在开始之前，先把 Skill 安装到你常用的 AI 工具里。Skill 已打包发布到 GitHub，两种工具都支持导入。

下载地址

https://github.com/Alpha961/Vibecoding-helper-Skill.git

安装方式一：Claude（网页端 / 桌面端）

1. 打开 Claude 对话框
2. 直接告诉它：帮我导入这个 Skill
3. 把 Skill 的 GitHub 链接或下载的文件发给它
4. 导入完成后即可开始使用

安装方式二：Trae

1. 在 Trae 的 Agent 选择中，切换到 Kimi
2. 同样告诉它：帮我导入这个 Skill
3. 发送 Skill 文件，直接开始对话

Skill 格式在 Claude 和 Trae（Kimi）中完全通用，操作方式一致。

打开Claude桌面端

拖入下载好的压缩文件，并让Claude导入这个skill

Openclaw同理

安装完成后，直接告诉 AI 你的想法。Skill 内置了需求分析师角色，会通过提问帮你把模糊想法梳理清楚——你只需要回答选择题，不需要写任何文档。

操作流程

1. 对 Claude / Trae 描述你的想法，例如：我想做一个能把文字转成绘本的工具
2. AI 会引导你回答几个关键问题：
   • 这个工具是给谁用的？（自用 / 给别人用 / 公开分享）
   • 你希望它能做哪些事？
   • 偏好什么风格或形式？
   • 打算用什么开发工具？（Cursor / Trae）
   • 还有其他特殊需求吗？

不用刻意整理逻辑，想到什么说什么，AI 会帮你整理。全程都是选择题或简短回答，不需要大段输入。

需求收集完成后，Skill 进入 PRD（产品需求文档）编写阶段。AI 会针对产品关键设计决策再提几个问题，同样是选择题形式。

典型问题示例（以绘本工具为例）

1. 分页方式：AI 自动分页 / 用户手动分页
2. 图文布局：固定版式 / 多种版式混搭
3. 导出格式：仅 PPT / PPT + PDF / 其他
4. 封面封底：自动生成 / 不需要

完成后你会得到

• 一份完整的 PRD 文档，涵盖功能说明、交互逻辑、API 集成方案、导出方式等细节
• 所有你没想到的细节，AI 都会替你补全

确认 PRD 内容无误后，直接告诉 AI「没有问题，继续」，进入下一阶段。

PRD 确认后，Skill 自动进入 UI 设计和技术方案阶段，无需你回答任何问题，AI 直接输出两份文档。

UI 设计文档包含

• 各页面的线框图（ASCII 或文字描述形式）
• 主要界面结构，例如：输入页、API Key 配置页、生成结果页
• 色彩风格、布局规则建议

技术文档包含

• 推荐技术栈（锁定最成熟、最不容易翻车的框架组合）
• API 接入方案（如 DeepSeek、硅基流动等）
• API Key 安全存储方案（localStorage，不硬编码）
• 项目目录结构建议

Skill 内置了「防坑机制」：强制使用业内通用解决方案，禁止 AI 随意发挥，极大降低后续开发报错率。

三份文档（PRD + UI 设计 + 技术文档）生成完毕后，把整个文档包拖进 Cursor 项目，让编程 AI 读懂再动手写代码。

操作步骤

1. 将 AI 输出的 PRDS 文件夹保存到本地
2. 打开 Cursor，新建项目或打开已有项目
3. 将 PRDS 文件夹拖入项目根目录
4. 在 Cursor 对话框输入：

仔细阅读 PRDS 文件夹内的所有文档，然后告诉我你对这个项目的理解。

1. 确认 Cursor 理解正确后，让它建立开发计划并开始写代码

先让 Cursor「理解项目」再「开始开发」，这一步非常关键。跳过这步直接让它写代码，报错率会大幅上升。

Cursor 完成开发后，按提示打开本地网页，配置 API Key 即可开始使用产品。

配置步骤

1. 按 Cursor 提示打开本地网页（通常是 http://localhost:3000）
2. 页面顶部会提示「尚未配置 API Key」，点击 ⚙️ 设置图标
3. 填入以下 API Key（按项目需求选择）：

常用 API 平台

• DeepSeek 开放平台：platform.deepseek.com → 注册 → 创建 API Key
• 硅基流动：siliconflow.cn → 注册 → 创建 API Key（支持文生图模型）

1. 将 API Key 填入设置弹窗并保存
2. 粘贴测试内容，点击生成，验证功能是否正常

API Key 保存在浏览器 localStorage 中，不会上传到任何服务器，安全可靠。