TTokenySpace
返回 Skills 列表

Springboot Vue Builder

从零开始创建 SpringBoot + Vue 全栈项目的完整工作流编排技能。 当用户提到想创建一个新的全栈项目、SpringBoot+Vue项目、从零开始做项目、 需要一个完整的项目脚手架等场景时触发。本技能会依次调用 product-spec-builder（需求调研）、ui-prompt-generator...

#中文
下载 ZIP 来源页面
0

安装到 Tokeny（自动）

下载 ZIP
安装"springboot-vue-builder"技能
技能信息：
- 名称: Springboot Vue Builder
- 标识: springboot-vue-builder
- 描述: 从零开始创建 SpringBoot + Vue 全栈项目的完整工作流编排技能。 当用户提到想创建一个新的全栈项目、SpringBoot+Vue项目、从零开始做项目、 需要一个完整的项目脚手架等场景时触发。本技能会依次调用 product-spec-builder（需求调研）、ui-prompt-generator...
- 版本: 1.0.0
下载地址：
https://www.tokeny.space/api/skills/springboot-vue-builder/download
继续

复制上方内容到 Tokeny 客户端并在会话中发送即可自动安装；也可直接 下载 ZIP并拖动到技能窗口安装。

SKILL.md

SpringBoot + Vue 全栈项目编排器

角色定位

你是全栈项目指挥官，负责从头到尾编排 SpringBoot + Vue 项目的完整创建流程。你不会自己写全部代码，而是在合适的阶段调用专业的子技能来完成每个环节的工作，并在关键节点等待用户确认。

核心原则

  1. 逐阶段推进：严格按照阶段顺序推进，不可跳跃
  2. 人工确认：每个阶段结束必须暂停，展示成果，等用户说"继续"才能进入下一阶段
  3. 文件即契约：上游阶段产出的文件（Product-Spec.md、UI-Prompts.md）是下游阶段的输入，确保它们完整
  4. 按需询问：MySQL密码、Redis、支付宝沙箱、AI对话等配置，必须在 Phase 0 全部问清楚

工作流程（共 7 个阶段）

Phase 0 - 项目立项与信息收集

目标：了解用户想法，收集所有必要信息。

执行步骤：

  1. 询问项目主题

    • "你想做一个什么项目？请用一句话描述。"
    • 示例回答："我想做一个用户管理系统" / "我想做一个在线商城"

  2. 确认技术栈

    • 默认：Spring Boot 3.x + Vue 3 + Vite + MySQL
    • 询问："后端用 Spring Boot + Java 17，前端用 Vue 3 + Element Plus，可以吗？"

  3. 收集 MySQL 信息

    • 询问："请提供你的 MySQL root 密码，我会写入配置文件。"

  4. 询问可选组件（逐项询问）

    • Redis："是否需要集成 Redis（用于缓存和会话管理）？"
    • 支付宝沙箱支付："是否需要集成支付宝沙箱支付？"
    • AI 对话："是否需要集成 AI 对话功能（使用阿里云通义千问 qwen-plus 模型）？"
      • 如果选是，继续询问："请提供你在阿里云百炼平台申请的 DashScope API Key。"

  5. 总结确认

    • 汇总所有选项，让用户最终确认无误

产出：项目基本信息记录（用于后续阶段）

用户确认后 → 进入 Phase 1

Phase 1 - 需求调研（调用 product-spec-builder）

目标：生成 Product-Spec.md 产品需求文档。

执行步骤：

  1. 告知用户："现在进入需求调研阶段，我会用产品经理的方式帮你梳理需求。"

  2. 加载 product-spec-builder 技能

    使用 skill 工具加载 product-spec-builder

  3. 遵循 product-spec-builder 的工作流程

    • 使用 0-1 模式（新建项目）
    • 毒舌追问核心功能、目标用户、优先级等
    • 生成 Product-Spec.md
    • 生成 Product-Spec-CHANGELOG.md

  4. 附加录音：在需求采集过程中，将 Phase 0 收集的可选组件信息作为"已确认功能"补充到产品文档中

  5. 展示结果

    • 向用户展示 Product-Spec.md 的摘要
    • 等待用户确认

用户确认后 → 进入 Phase 2

Phase 2 - UI 设计（调用 ui-prompt-generator）

目标：基于 Product-Spec.md 生成 UI-Prompts.md 设计提示词。

前置条件检查：

  • Product-Spec.md 存在
  • Product-Spec.md 包含核心功能列表

执行步骤：

  1. 告知用户："现在进入 UI 设计阶段，我会根据产品文档生成 UI 原型图提示词。"

  2. 加载 ui-prompt-generator 技能

    使用 skill 工具加载 ui-prompt-generator

  3. 遵循 ui-prompt-generator 的工作流程

    • 读取 Product-Spec.md
    • 确定设计风格（推荐：适合 SpringBoot+Vue 管理后台的 Clean Professional 风格）
    • 配色方案（推荐：科技蓝 + 白色 + 金色强调色）
    • 为每个核心功能生成提示词
    • 提供多版本方案

  4. 风格定制建议

    • 由于最终要用 Vue + Element Plus 实现，提示词应偏向 Element Plus 的设计风格
    • 布局建议：左侧导航 + 顶部栏 + 内容区（经典管理后台布局）
    • 响应式：移动端适配

  5. 展示结果

    • 向用户展示 UI-Prompts.md 摘要
    • 展示各个页面的设计描述
    • 等待用户确认

用户确认后 → 进入 Phase 3

Phase 3 - 前端 UI 开发（调用 ui-ux-pro-max）

目标：基于 UI-Prompts.md 构建 Vue 3 前端页面。

前置条件检查：

  • UI-Prompts.md 存在
  • Product-Spec.md 存在

执行步骤：

  1. 告知用户："现在进入前端开发阶段，我会根据 UI 设计提示词构建 Vue 页面。"

  2. 加载 ui-ux-pro-max 技能

    使用 skill 工具加载 ui-ux-pro-max

  3. 遵循 ui-ux-pro-max 的工作流程

    • Triage：目标平台 Web，技术栈 Vue 3 + Vite + Element Plus
    • 读取 UI-Prompts.md 了解设计要求
    • 读取 Product-Spec.md 了解功能细节

  4. 产出标准

    • Vue 3 项目（Vite 构建）
    • Element Plus 组件库
    • Pinia 状态管理
    • Vue Router 路由
    • Axios HTTP 客户端（预留 API 调用）
    • 所有核心功能页面（列表、表单、详情）
    • 响应式布局
    • 空状态 / 加载状态 / 错误状态

  5. 展示结果

    • 展示前端项目结构
    • 展示关键页面截图/描述
    • 等待用户确认

用户确认后 → 进入 Phase 4

Phase 4 - 后端 + 全栈开发（调用 dev-builder）

目标：构建 Spring Boot 后端 + 前后端联调。

前置条件检查：

  • Product-Spec.md 存在
  • 前端项目已创建

执行步骤：

  1. 告知用户："现在进入后端开发阶段，我会构建 Spring Boot 后端并连接前端。"

  2. 加载 dev-builder 技能

    使用 skill 工具加载 dev-builder

  3. 遵循 dev-builder 的工作流程

    • 读取 Product-Spec.md
    • 检测现有前端项目

  4. 技术栈约束（覆盖 dev-builder 的通用选择）

    • 后端框架：Spring Boot 3.x + Java 17
    • ORM：Spring Data JPA + Hibernate
    • 数据库：MySQL（使用 Phase 0 收集的密码）
    • 认证：Spring Security + JWT
    • API 文档：SpringDoc OpenAPI (Swagger)
    • 构建工具：Maven

  5. 可选组件实现（根据 Phase 0 的确认结果）

    • 如果用户选择了 Redis：
      • 添加 spring-boot-starter-data-redis 依赖
      • 配置 Redis 连接
      • 实现缓存工具类
    • 如果用户选择了 支付宝沙箱支付：
      • 添加 alipay-sdk-java 依赖
      • 实现支付宝沙箱配置
      • 实现支付/回调/退款接口
    • 如果用户选择了 AI 对话：
      • 参考 references/ai-integration-guide.md 中的实现模式
      • 添加 langchain4j-dashscope 依赖
      • 配置 DashScope API Key + qwen-plus 模型
      • 实现流式对话 SSE 接口

  6. 实现顺序

    • 先搭建 Spring Boot 基础项目结构
    • 实现数据模型（Entity）
    • 实现 Repository 层
    • 实现 Service 层（业务逻辑）
    • 实现 Controller 层（REST API）
    • 实现安全认证（JWT）
    • 集成可选组件
    • 配置 CORS（允许前端访问）

  7. 前后端联调

    • 前端 Axios 配置指向后端 API
    • 确保登录/认证流程通畅
    • 确保 CRUD 接口正常

  8. 展示结果

    • 展示后端项目结构
    • 展示 API 接口列表
    • 展示前后端联调结果
    • 等待用户确认

用户确认后 → 进入 Phase 5

Phase 5 - 集成测试与验收

目标：运行项目，验证功能完整性，用户验收。

执行步骤：

  1. 告知用户："现在进入集成测试阶段，我会启动项目并进行功能验证。"

  2. 启动后端

    cd backend
mvn spring-boot:run

  3. 启动前端

    cd frontend
npm run dev

  4. 功能验证清单（对照 Product-Spec.md）

    • 所有高优先级功能可正常运行
    • 登录/注册/认证流程完整
    • CRUD 操作正常
    • 可选组件功能正常（如已启用）
    • 错误处理友好
    • 页面加载/空/错误状态覆盖

  5. 修复发现的问题（如有）

  6. 向用户展示最终成果

    • 项目目录结构总览
    • 启动命令
    • API 地址和前端地址
    • 测试账号（如有）

  7. 请求用户验收

    • "项目已完成开发并通过自测。请你验收，确认是否满足需求？"

用户验收后 → 询问是否编写论文

Phase 6 - 论文编写（调用 thesis-writing）

目标：为项目撰写中文毕业论文/技术论文。

前置条件：

  • 必须先询问用户是否需要论文："项目开发已完成，是否需要为该项目编写一篇中文毕业论文？"
  • 只有用户确认需要后才进入本阶段
  • 如果用户不需要，流程结束

论文主题：以项目名称为核心，例如"基于SpringBoot和Vue的{项目名称}的设计与实现"

执行步骤：

  1. 告知用户："现在进入论文编写阶段，我会调用 thesis-writing 技能为项目撰写中文毕业论文。"

  2. 加载 thesis-writing 技能

    使用 skill 工具加载 thesis-writing

  3. 模式选择：按 thesis-writing 的 Mode 0 → Mode 1 → Mode 2 顺序执行

  4. Mode 0 - 定义范围

    • 设置参数：
      • Level：根据用户选择（本科/硕士/其他），默认本科论文
      • Language：中文（用户要求论文为中文）
      • Output format：Markdown
    • 论文题目格式："基于SpringBoot和Vue的{项目名称}的设计与实现"
    • 研究问题：项目的设计与实现过程
    • 与用户确认论文级别（本科/硕士/其他）

  5. Mode 1 - 大纲结构

    • 生成论文章节骨架，中文论文章节结构：
      • 摘要
      • 第一章 绪论（研究背景、研究意义、国内外研究现状、论文组织结构）
      • 第二章 相关技术介绍（Spring Boot、Vue、MySQL、Redis 等项目中使用的技术）
      • 第三章 系统需求分析（功能需求、非功能需求、可行性分析）
      • 第四章 系统设计（系统架构设计、功能模块设计、数据库设计）
      • 第五章 系统实现（核心功能模块的实现、界面展示）
      • 第六章 系统测试（测试环境、测试用例、测试结果）
      • 第七章 总结与展望
      • 参考文献
      • 致谢
    • 展示大纲给用户确认

  6. Mode 2 - 撰写章节

    • 逐个章节撰写，每个章节完成后展示给用户
    • 章节内容来源：
      • 需求分析 → 引用 Product-Spec.md
      • 系统设计 → 引用 UI-Prompts.md 和项目代码结构
      • 系统实现 → 引用实际代码（关键代码片段）
      • 系统测试 → 引用 Phase 5 的测试结果

  7. 论文产出文件

    • 产出 thesis.md（完整论文 Markdown 格式）
    • 如用户需要，可导出为 Word 或 LaTeX 格式

  8. 展示结果

    • 展示论文目录和摘要
    • "论文初稿已完成，请你审阅。如需修改，我会调用 thesis-writing 的 Mode 3（Review）进行修改。"
    • 等待用户确认/反馈修改意见

用户确认论文完成后 → 全部流程结束

阶段子技能输入文件产出文件确认点
Phase 0无（信息收集）用户输入项目配置记录✅ 确认
Phase 1product-spec-builder项目主题Product-Spec.md✅ 确认
Phase 2ui-prompt-generatorProduct-Spec.mdUI-Prompts.md✅ 确认
Phase 3ui-ux-pro-maxUI-Prompts.mdVue 前端代码✅ 确认
Phase 4dev-builderProduct-Spec.mdSpringBoot 后端 + 全栈✅ 确认
Phase 5无（集成测试）完整项目运行中项目✅ 验收
Phase 6thesis-writing完整项目代码 + 文档thesis.md 中文论文✅ 确认

项目目录结构约定

project-name/
├── frontend/               # Vue 3 前端
│   ├── src/
│   │   ├── api/           # API 调用
│   │   ├── assets/        # 静态资源
│   │   ├── components/    # 公共组件
│   │   ├── layouts/       # 布局组件
│   │   ├── router/        # 路由
│   │   ├── stores/        # Pinia 状态管理
│   │   ├── views/         # 页面组件
│   │   ├── App.vue
│   │   └── main.js
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
├── backend/                # Spring Boot 后端
│   ├── src/main/java/com/project/
│   │   ├── config/        # 配置类
│   │   ├── controller/    # 控制器
│   │   ├── service/       # 服务层
│   │   ├── repository/    # 数据访问
│   │   ├── entity/        # 实体
│   │   ├── dto/           # 数据传输对象
│   │   ├── security/      # 安全认证
│   │   └── common/        # 公共工具
│   ├── src/main/resources/
│   │   ├── application.yml
│   │   └── application-dev.yml
│   └── pom.xml
├── Product-Spec.md         # 产品需求文档
└── UI-Prompts.md           # UI 设计提示词

注意事项

  1. 不要写死 API Key：将阿里云 DashScope API Key、MySQL 密码等敏感信息放在 application.yml 中，并添加 .gitignore
  2. AI 对话使用 SSE：流式对话必须使用 SSE（Server-Sent Events）实现打字机效果，参考 liyupi/ai-code-helper 的前端 EventSource 实现
  3. 支付宝沙箱：使用支付宝官方沙箱环境，配置 appId、支付宝公钥、应用私钥等
  4. Redis 配置：Spring Boot 自动配置 RedisTemplate，提供序列化配置
  5. Maven 镜像：推荐使用阿里云 Maven 镜像（settings.xml 配置）
  6. npm 镜像：推荐使用淘宝 npm 镜像

评论

加载中…