拓冰网站优化 
一、核心思想这套 AI 工作流的重点不是简单地让 AI 帮忙写代码而是让 AI 参与完整的软件开发流程需求分析 → 架构设计 → 编码实现 → 自动化测试 → 文档交付在人机协作过程中AI 负责分析、整理、生成方案、执行重复任务、编写代码和文档初稿。人负责确认需求边界、选择技术方案、审核代码、控制风险和最终验收。AI 负责提高执行效率人负责保证方向和质量。二、完整的 AI 开发工作流1. 需求分析可以将 PRD、产品原型、设计稿或口头需求提供给 AI让 AI 协助完成拆分功能模块梳理业务流程识别用户角色和权限补充异常场景查找需求冲突和遗漏输出前后端任务清单生成初步技术方案整理待确认问题。推荐让 AI 按照以下结构输出1. 项目背景 2. 项目目标 3. 用户角色 4. 核心业务流程 5. 功能模块 6. 页面清单 7. 接口清单 8. 数据结构 9. 异常场景 10. 验收标准 11. 待确认问题需要注意AI 输出的需求分析不能直接作为最终需求必须经过产品、开发或项目负责人确认。2. 架构设计AI 可以根据项目需求提供多个技术方案并进行对比。例如React、Vue 或小程序原生框架Zustand、Redux Toolkit 或 ContextSSE、WebSocket 或普通 HTTP 请求单体项目、Monorepo 或前后端分离本地缓存、服务端存储或混合存储。AI 可以协助完成技术选型对比优缺点分析项目目录设计数据流设计模块依赖分析接口通信设计性能风险分析项目扩展方案。最终架构需要由人根据以下因素决定团队现有技术栈项目开发周期部署环境维护成本性能要求安全要求未来扩展需求。推荐工作方式AI 提供多个方案 → AI 对比优缺点 → 人确认核心约束 → 人选择最终方案 → AI 生成详细架构文档3. 编码实现图片中的工作流以 Claude Code 作为统一入口。Claude Code 可以读取项目文件理解现有代码创建和修改文件执行终端命令安装依赖运行测试检查构建结果生成开发文档。但“Claude Code 负责全部编程”并不代表完全不需要人工参与。更加安全的执行流程是先分析项目 → 输出修改方案 → 等待人工确认 → 每次修改一个模块 → 执行测试 → 汇报修改结果 → 再进入下一步推荐在提示词中明确要求请先阅读项目代码和相关文档。 第一阶段只输出 1. 当前项目结构分析 2. 需要修改的文件 3. 技术实现方案 4. 可能存在的风险 5. 分步骤执行计划。 暂时不要修改任何代码。 等我确认后再按照步骤逐项执行。 每完成一个步骤都需要汇报结果并等待我的确认。这种模式特别适用于小程序分包大规模代码重构核心业务功能修改接口迁移技术栈升级数据库结构调整。4. 自动化测试AI 可以协助生成单元测试组件测试接口测试E2E 测试边界条件测试异常流程测试回归测试测试报告。常见测试工具如下测试类型常用工具前端单元测试Vitest、JestReact 组件测试Testing LibraryE2E 测试PlaywrightNode.js 接口测试Supertest代码质量检查ESLint类型检查TypeScript构建检查Vite、Webpack、NestJS CLI推荐测试流程修改代码 → TypeScript 类型检查 → ESLint 检查 → 单元测试 → 接口测试 → E2E 测试 → 正式构建 → 输出测试报告需要注意AI 自动生成了测试代码并不代表功能一定正确。测试用例本身也需要人工审核。否则可能出现错误的业务实现 错误的测试用例 测试依然通过5. 文档与交付AI 可以协助生成和维护README架构设计文档接口文档数据库文档部署文档测试报告使用说明CHANGELOG发布说明回滚方案故障排查文档。推荐的项目交付结构project/ ├── README.md ├── CLAUDE.md ├── CHANGELOG.md ├── docs/ │ ├── README.md │ ├── architecture.md │ ├── api.md │ ├── database.md │ ├── deployment.md │ ├── testing.md │ └── troubleshooting.md └── src/三、CLAUDE.md 的作用1. 什么是 CLAUDE.mdCLAUDE.md可以理解为 Claude Code 在当前项目中的长期说明书。它主要告诉 AI项目是做什么的项目使用什么技术栈项目目录如何划分代码需要遵守什么规范可以执行哪些命令哪些文件不能修改开发任务需要遵循什么流程完成任务后需要执行哪些检查。它相当于项目中的AI 开发说明书 项目规则 代码规范 文档导航2. CLAUDE.md 不应该写得过长不推荐把以下所有内容全部塞进一个CLAUDE.md完整 PRD所有接口文档所有数据库字段全部业务规则所有部署流程所有测试说明每个页面的详细需求。这样做会产生以下问题每次对话都需要读取大量内容消耗大量 TokenAI 不容易找到重点文档维护困难不同任务的信息互相干扰重要规则容易被忽略。核心原则是精简、分层、按需读取。3. 推荐的三层文档结构第一层必读层根目录的CLAUDE.md属于必读层。它只保留高频、全局、长期有效的信息。例如# 项目说明 ## 项目简介 这是一个基于 React 和 NestJS 开发的 AI 智能助手项目。 ## 技术栈 ### 前端 - React - TypeScript - Vite - Zustand - Ant Design ### 后端 - NestJS - TypeScript - PostgreSQL - Redis ### AI 能力 - 大模型 API - SSE 流式响应 - Prompt 模板 - 上下文管理 - 历史会话管理 ## 常用命令 - pnpm dev - pnpm lint - pnpm test - pnpm build ## 核心规范 - 所有新增代码必须使用 TypeScript - 禁止随意使用 any - 接口请求统一放在 services 目录 - 公共组件统一放在 components 目录 - 修改代码前必须先输出方案 - 未经确认不允许进行大规模重构 - 完成后必须执行 lint、test 和 build。 ## 禁止事项 - 不允许直接修改生产环境配置 - 不允许删除已有功能 - 不允许随意修改公共接口 - 不允许跳过类型检查 - 不允许在未确认的情况下安装大型依赖。 ## 文档导航 详细项目文档请阅读 - docs/README.md第二层导航层使用docs/README.md作为文档导航。它负责告诉 AI哪些文档必须优先阅读哪些文档根据任务选择性阅读每份文档包含什么内容。示例# 项目文档导航 ## Read first 开始开发任务前需要优先阅读 - architecture.md系统架构说明 - conventions.md代码规范 - business-rules.md核心业务规则。 ## Read based on task 根据任务类型选择性阅读 - frontend.md前端开发任务 - backend.md后端开发任务 - api.md接口开发与联调 - database.md数据库相关任务 - deployment.md部署相关任务 - testing.md测试相关任务 - ai.mdAI 对话和模型能力相关任务。第三层选读层将详细内容按照功能或领域拆分。例如docs/ ├── README.md ├── architecture.md ├── conventions.md ├── business-rules.md ├── frontend/ │ ├── components.md │ ├── routing.md │ ├── state-management.md │ └── request.md ├── backend/ │ ├── modules.md │ ├── authentication.md │ ├── database.md │ └── exception-handling.md ├── ai/ │ ├── prompt.md │ ├── context.md │ ├── streaming.md │ └── conversation-history.md └── testing/ ├── unit-testing.md ├── api-testing.md └── e2e-testing.mdAI 在执行任务时只读取当前任务需要的文档。例如开发前端页面 → 阅读 frontend 相关文档 修改数据库 → 阅读 backend/database.md 开发 AI 流式对话 → 阅读 ai/streaming.md 编写 E2E 测试 → 阅读 testing/e2e-testing.md四、Skill 的概念1. 什么是 SkillSkill 可以理解为一套可以重复使用的标准操作流程。也就是将开发经验、项目规范和执行步骤封装成 AI 可以重复执行的指令。Skill 类似于 SOP输入任务 → 按固定步骤执行 → 检查结果 → 输出标准化报告例如可以将“开发一个前端页面”封装成 Skill1. 阅读需求和设计稿 2. 检查项目已有页面和组件 3. 输出页面结构拆分方案 4. 等待人工确认 5. 创建页面和组件 6. 接入接口 7. 增加加载状态 8. 增加空状态 9. 增加错误状态 10. 编写测试 11. 执行 lint、test 和 build 12. 输出修改报告。2. Skill 和普通 Prompt 的区别类型作用特点Prompt描述当前任务通常只使用一次Skill定义标准执行流程可以重复调用CLAUDE.md定义项目全局规则对整个项目长期生效docs保存项目详细知识根据任务按需读取普通 Prompt 示例帮我开发一个用户列表页面。Skill 示例执行前端页面开发 Skill 1. 阅读需求 2. 检查已有组件 3. 输出方案 4. 等待确认 5. 开发页面 6. 接入接口 7. 补充状态处理 8. 编写测试 9. 执行构建 10. 输出报告。Skill 的优势执行过程更加稳定不容易遗漏步骤可以沉淀团队经验可以统一代码质量可以重复复用可以逐步优化。五、常见 Skill1. frontend-designfrontend-designSkill 用于提升 AI 生成页面的设计质量。它可以规定页面信息层级字体大小和层级页面间距组件一致性响应式适配加载状态空状态错误状态移动端适配交互反馈无障碍要求。它的主要目标是避免 AI 生成千篇一律、缺乏设计感的页面。例如可以限制不滥用渐变背景不滥用大圆角卡片不随意增加阴影不重复创建已有组件不使用无意义装饰保持页面信息层级清晰。2. PDF、PPTX、XLSX文档类 Skill 可以用于生成 PDF编辑 PDF制作 PPT修改 PPT创建 Excel分析 Excel生成数据报表统一文档格式。常见应用需求文档 → 自动生成技术方案 PDF 项目数据 → 自动生成 Excel 报表 阶段成果 → 自动生成汇报 PPT 发票或收据 → 修改并生成新的 PDF3. webapp-testingwebapp-testingSkill 一般通过 Playwright 执行自动化测试。典型流程启动项目 → 打开浏览器 → 进入目标页面 → 模拟用户操作 → 验证页面结果 → 检查控制台错误 → 截图 → 输出测试报告可以测试登录表单提交页面跳转搜索筛选分页弹窗文件上传接口异常权限控制移动端适配。4. skill-creatorskill-creator用于根据自然语言需求创建新的 Skill。例如帮我创建一个“小程序分包”Skill。 要求 1. 先分析主包体积 2. 输出适合迁移的页面 3. 每次只迁移一个页面 4. 迁移前必须等待确认 5. 检查页面路径 6. 检查公共依赖 7. 检查静态资源 8. 执行构建 9. 输出分包前后体积变化 10. 未经确认不得继续下一步。AI 可以根据这些要求生成一套可重复执行的流程。5. brainstormingbrainstormingSkill 适用于需求不完整、方案不明确或存在多种技术选择的场景。标准流程梳理需求 → 明确目标 → 确认用户 → 识别约束 → 找出待确认问题 → 提供多个方案 → 对比成本和风险 → 人工选择 → 形成最终技术方案它的重点不是直接写代码而是先把问题想清楚再开始执行。适用场景新项目立项技术选型功能改版页面重构数据库设计AI 功能规划小程序分包性能优化。六、CLAUDE.md、docs、Skill 和 Prompt 的关系内容解决的问题典型内容PRD要做什么产品需求、业务目标CLAUDE.md项目中应该怎么做技术栈、规范、禁止事项docs执行任务需要知道什么架构、接口、数据库、业务规则Skill某类任务按什么流程执行开发、测试、发布 SOPPrompt这一次具体做什么当前任务要求可以总结为PRD 决定做什么 CLAUDE.md 规定怎么做 docs 提供详细知识 Skill 规定执行流程 Prompt 描述当前任务七、“APP 本质上是 Skill”的含义传统 APP 通常通过图形界面触发固定流程。例如传统 APP对应的业务流程滴滴打车选择起点、终点并叫车携程订票选择日期、航班并填写信息美团外卖选择餐厅、菜品并下单快递查询输入单号并查询物流在 AI Agent 模式下这些流程可以被抽象成 Skill。例如用户表达目标 → AI 识别意图 → AI 收集必要参数 → AI 调用对应服务 → AI 执行业务流程 → AI 返回执行结果用户不再需要点击多个页面而是可以直接表达目标帮我订一张周五晚上从上海到北京的机票 优先选择虹桥出发 价格不超过 1200 元。AI 可以执行识别出发地识别目的地识别日期和时间查询航班根据价格筛选展示候选方案等待用户确认填写乘客信息创建订单进入支付环节。因此未来很多 APP 的功能可能会变成自然语言入口 业务 Skill 第三方服务 确认界面不过“80% 的 APP 应该消失”更像是一种趋势性表达并不是严格的数据结论。更准确的理解是APP 不一定消失但大量复杂、重复的操作界面可能会被自然语言和 Agent 工作流替代。涉及以下场景时传统 UI 仍然很重要支付确认身份认证隐私授权风险提示商品对比地图操作复杂数据展示最终订单确认。八、这套工作流的关键原则1. 先规划再执行不推荐直接对 AI 说帮我把这个功能做完。推荐改成请先阅读项目代码和需求。 只输出以下内容 1. 功能拆分 2. 涉及文件 3. 技术方案 4. 数据流 5. 风险点 6. 实施步骤 7. 测试方案。 暂时不要修改代码等待我确认。确认方案后再执行按照已确认的方案执行第一步。 要求 1. 只完成第一步 2. 不要修改无关文件 3. 完成后运行检查 4. 汇报修改内容 5. 等待我确认后再继续。2. 文档分层按需读取不推荐将所有项目知识全部写进 CLAUDE.md推荐CLAUDE.md → 全局规则和文档入口 docs/README.md → 文档导航 docs/* → 详细业务和技术知识 skills/* → 标准执行流程3. AI 执行人类验收AI 生成代码后仍然需要执行代码审查类型检查ESLint 检查单元测试接口测试E2E 测试构建验证页面实际操作安全检查业务验收。4. 每次只处理一个明确任务不推荐一次性要求 AI重构整个项目 升级所有依赖 修改所有页面 补充全部测试 并完成部署。推荐拆分成第一阶段分析现状 第二阶段确定方案 第三阶段修改一个模块 第四阶段执行测试 第五阶段人工确认 第六阶段进入下一个模块5. 每一步都要有可验证结果每个任务都应该包含明确的完成标准。例如页面开发完成标准 - 页面可以正常访问 - 接口可以正常调用 - 加载状态正常 - 空状态正常 - 错误状态正常 - 移动端适配正常 - TypeScript 检查通过 - ESLint 检查通过 - 单元测试通过 - 正式构建通过。九、推荐的项目目录结合前端、小程序和 AI 智能助手项目可以使用以下结构project/ ├── CLAUDE.md ├── README.md ├── CHANGELOG.md ├── docs/ │ ├── README.md │ ├── product-requirements.md │ ├── architecture.md │ ├── conventions.md │ ├── business-rules.md │ ├── frontend.md │ ├── backend.md │ ├── api.md │ ├── database.md │ ├── deployment.md │ ├── testing.md │ └── ai/ │ ├── prompt.md │ ├── context.md │ ├── streaming.md │ └── conversation-history.md ├── skills/ │ ├── requirement-analysis/ │ ├── brainstorming/ │ ├── frontend-page/ │ ├── frontend-design/ │ ├── api-integration/ │ ├── mini-program-subpackage/ │ ├── bug-fix/ │ ├── code-review/ │ ├── webapp-testing/ │ └── release/ ├── src/ └── tests/十、适合优先创建的 Skill1. 需求分析 Skill负责阅读 PRD拆分功能梳理页面梳理接口找出异常场景输出待确认问题生成技术任务清单。2. 设计稿还原 Skill负责阅读蓝湖或 Figma 设计稿分析页面结构提取颜色、字体和间距检查已有公共组件拆分页面组件实现响应式页面对比设计稿输出差异报告。3. 前端页面开发 Skill负责分析页面需求检查现有组件输出开发方案创建页面接入接口增加加载、空状态和错误状态编写测试执行构建。4. 接口联调 Skill负责阅读接口文档检查请求参数检查返回结构创建 TypeScript 类型封装请求方法处理异常处理 Token测试正常和异常场景输出联调结果。5. 小程序分包 Skill负责分析主包大小找出适合迁移的页面分析依赖关系每次迁移一个页面等待人工确认修改路由和路径检查静态资源执行构建对比包体积。6. Bug 修复 Skill负责复现问题 → 收集错误信息 → 定位根因 → 输出修复方案 → 等待确认 → 修改代码 → 编写回归测试 → 验证修复结果 → 输出修复报告7. Playwright 测试 Skill负责启动项目打开目标页面模拟用户操作验证页面结果检查控制台检查网络请求截取测试截图输出测试报告。8. 发布检查 Skill负责检查环境变量检查接口地址执行类型检查执行 ESLint执行单元测试执行 E2E 测试执行正式构建检查产物生成 CHANGELOG生成发布说明准备回滚方案。十一、最终总结这套 AI 工程化方法可以概括为用 CLAUDE.md 规定项目规则 用 docs 管理项目知识 用 Skill 固化执行流程 用 Prompt 描述当前任务 用 Claude Code 执行代码修改 用自动化测试验证结果 由人完成最终决策和验收最终目标不是让 AI 无限制地修改项目而是建立一套可控可复用可验证可维护可追踪的 AI 辅助开发流程。AI 不只是代码生成工具而是可以参与需求、架构、开发、测试和交付的工程协作工具。 AI 工程化工作流知识点整理
一、核心思想这套 AI 工作流的重点不是简单地让 AI 帮忙写代码而是让 AI 参与完整的软件开发流程需求分析 → 架构设计 → 编码实现 → 自动化测试 → 文档交付在人机协作过程中AI 负责分析、整理、生成方案、执行重复任务、编写代码和文档初稿。人负责确认需求边界、选择技术方案、审核代码、控制风险和最终验收。AI 负责提高执行效率人负责保证方向和质量。二、完整的 AI 开发工作流1. 需求分析可以将 PRD、产品原型、设计稿或口头需求提供给 AI让 AI 协助完成拆分功能模块梳理业务流程识别用户角色和权限补充异常场景查找需求冲突和遗漏输出前后端任务清单生成初步技术方案整理待确认问题。推荐让 AI 按照以下结构输出1. 项目背景 2. 项目目标 3. 用户角色 4. 核心业务流程 5. 功能模块 6. 页面清单 7. 接口清单 8. 数据结构 9. 异常场景 10. 验收标准 11. 待确认问题需要注意AI 输出的需求分析不能直接作为最终需求必须经过产品、开发或项目负责人确认。2. 架构设计AI 可以根据项目需求提供多个技术方案并进行对比。例如React、Vue 或小程序原生框架Zustand、Redux Toolkit 或 ContextSSE、WebSocket 或普通 HTTP 请求单体项目、Monorepo 或前后端分离本地缓存、服务端存储或混合存储。AI 可以协助完成技术选型对比优缺点分析项目目录设计数据流设计模块依赖分析接口通信设计性能风险分析项目扩展方案。最终架构需要由人根据以下因素决定团队现有技术栈项目开发周期部署环境维护成本性能要求安全要求未来扩展需求。推荐工作方式AI 提供多个方案 → AI 对比优缺点 → 人确认核心约束 → 人选择最终方案 → AI 生成详细架构文档3. 编码实现图片中的工作流以 Claude Code 作为统一入口。Claude Code 可以读取项目文件理解现有代码创建和修改文件执行终端命令安装依赖运行测试检查构建结果生成开发文档。但“Claude Code 负责全部编程”并不代表完全不需要人工参与。更加安全的执行流程是先分析项目 → 输出修改方案 → 等待人工确认 → 每次修改一个模块 → 执行测试 → 汇报修改结果 → 再进入下一步推荐在提示词中明确要求请先阅读项目代码和相关文档。 第一阶段只输出 1. 当前项目结构分析 2. 需要修改的文件 3. 技术实现方案 4. 可能存在的风险 5. 分步骤执行计划。 暂时不要修改任何代码。 等我确认后再按照步骤逐项执行。 每完成一个步骤都需要汇报结果并等待我的确认。这种模式特别适用于小程序分包大规模代码重构核心业务功能修改接口迁移技术栈升级数据库结构调整。4. 自动化测试AI 可以协助生成单元测试组件测试接口测试E2E 测试边界条件测试异常流程测试回归测试测试报告。常见测试工具如下测试类型常用工具前端单元测试Vitest、JestReact 组件测试Testing LibraryE2E 测试PlaywrightNode.js 接口测试Supertest代码质量检查ESLint类型检查TypeScript构建检查Vite、Webpack、NestJS CLI推荐测试流程修改代码 → TypeScript 类型检查 → ESLint 检查 → 单元测试 → 接口测试 → E2E 测试 → 正式构建 → 输出测试报告需要注意AI 自动生成了测试代码并不代表功能一定正确。测试用例本身也需要人工审核。否则可能出现错误的业务实现 错误的测试用例 测试依然通过5. 文档与交付AI 可以协助生成和维护README架构设计文档接口文档数据库文档部署文档测试报告使用说明CHANGELOG发布说明回滚方案故障排查文档。推荐的项目交付结构project/ ├── README.md ├── CLAUDE.md ├── CHANGELOG.md ├── docs/ │ ├── README.md │ ├── architecture.md │ ├── api.md │ ├── database.md │ ├── deployment.md │ ├── testing.md │ └── troubleshooting.md └── src/三、CLAUDE.md 的作用1. 什么是 CLAUDE.mdCLAUDE.md可以理解为 Claude Code 在当前项目中的长期说明书。它主要告诉 AI项目是做什么的项目使用什么技术栈项目目录如何划分代码需要遵守什么规范可以执行哪些命令哪些文件不能修改开发任务需要遵循什么流程完成任务后需要执行哪些检查。它相当于项目中的AI 开发说明书 项目规则 代码规范 文档导航2. CLAUDE.md 不应该写得过长不推荐把以下所有内容全部塞进一个CLAUDE.md完整 PRD所有接口文档所有数据库字段全部业务规则所有部署流程所有测试说明每个页面的详细需求。这样做会产生以下问题每次对话都需要读取大量内容消耗大量 TokenAI 不容易找到重点文档维护困难不同任务的信息互相干扰重要规则容易被忽略。核心原则是精简、分层、按需读取。3. 推荐的三层文档结构第一层必读层根目录的CLAUDE.md属于必读层。它只保留高频、全局、长期有效的信息。例如# 项目说明 ## 项目简介 这是一个基于 React 和 NestJS 开发的 AI 智能助手项目。 ## 技术栈 ### 前端 - React - TypeScript - Vite - Zustand - Ant Design ### 后端 - NestJS - TypeScript - PostgreSQL - Redis ### AI 能力 - 大模型 API - SSE 流式响应 - Prompt 模板 - 上下文管理 - 历史会话管理 ## 常用命令 - pnpm dev - pnpm lint - pnpm test - pnpm build ## 核心规范 - 所有新增代码必须使用 TypeScript - 禁止随意使用 any - 接口请求统一放在 services 目录 - 公共组件统一放在 components 目录 - 修改代码前必须先输出方案 - 未经确认不允许进行大规模重构 - 完成后必须执行 lint、test 和 build。 ## 禁止事项 - 不允许直接修改生产环境配置 - 不允许删除已有功能 - 不允许随意修改公共接口 - 不允许跳过类型检查 - 不允许在未确认的情况下安装大型依赖。 ## 文档导航 详细项目文档请阅读 - docs/README.md第二层导航层使用docs/README.md作为文档导航。它负责告诉 AI哪些文档必须优先阅读哪些文档根据任务选择性阅读每份文档包含什么内容。示例# 项目文档导航 ## Read first 开始开发任务前需要优先阅读 - architecture.md系统架构说明 - conventions.md代码规范 - business-rules.md核心业务规则。 ## Read based on task 根据任务类型选择性阅读 - frontend.md前端开发任务 - backend.md后端开发任务 - api.md接口开发与联调 - database.md数据库相关任务 - deployment.md部署相关任务 - testing.md测试相关任务 - ai.mdAI 对话和模型能力相关任务。第三层选读层将详细内容按照功能或领域拆分。例如docs/ ├── README.md ├── architecture.md ├── conventions.md ├── business-rules.md ├── frontend/ │ ├── components.md │ ├── routing.md │ ├── state-management.md │ └── request.md ├── backend/ │ ├── modules.md │ ├── authentication.md │ ├── database.md │ └── exception-handling.md ├── ai/ │ ├── prompt.md │ ├── context.md │ ├── streaming.md │ └── conversation-history.md └── testing/ ├── unit-testing.md ├── api-testing.md └── e2e-testing.mdAI 在执行任务时只读取当前任务需要的文档。例如开发前端页面 → 阅读 frontend 相关文档 修改数据库 → 阅读 backend/database.md 开发 AI 流式对话 → 阅读 ai/streaming.md 编写 E2E 测试 → 阅读 testing/e2e-testing.md四、Skill 的概念1. 什么是 SkillSkill 可以理解为一套可以重复使用的标准操作流程。也就是将开发经验、项目规范和执行步骤封装成 AI 可以重复执行的指令。Skill 类似于 SOP输入任务 → 按固定步骤执行 → 检查结果 → 输出标准化报告例如可以将“开发一个前端页面”封装成 Skill1. 阅读需求和设计稿 2. 检查项目已有页面和组件 3. 输出页面结构拆分方案 4. 等待人工确认 5. 创建页面和组件 6. 接入接口 7. 增加加载状态 8. 增加空状态 9. 增加错误状态 10. 编写测试 11. 执行 lint、test 和 build 12. 输出修改报告。2. Skill 和普通 Prompt 的区别类型作用特点Prompt描述当前任务通常只使用一次Skill定义标准执行流程可以重复调用CLAUDE.md定义项目全局规则对整个项目长期生效docs保存项目详细知识根据任务按需读取普通 Prompt 示例帮我开发一个用户列表页面。Skill 示例执行前端页面开发 Skill 1. 阅读需求 2. 检查已有组件 3. 输出方案 4. 等待确认 5. 开发页面 6. 接入接口 7. 补充状态处理 8. 编写测试 9. 执行构建 10. 输出报告。Skill 的优势执行过程更加稳定不容易遗漏步骤可以沉淀团队经验可以统一代码质量可以重复复用可以逐步优化。五、常见 Skill1. frontend-designfrontend-designSkill 用于提升 AI 生成页面的设计质量。它可以规定页面信息层级字体大小和层级页面间距组件一致性响应式适配加载状态空状态错误状态移动端适配交互反馈无障碍要求。它的主要目标是避免 AI 生成千篇一律、缺乏设计感的页面。例如可以限制不滥用渐变背景不滥用大圆角卡片不随意增加阴影不重复创建已有组件不使用无意义装饰保持页面信息层级清晰。2. PDF、PPTX、XLSX文档类 Skill 可以用于生成 PDF编辑 PDF制作 PPT修改 PPT创建 Excel分析 Excel生成数据报表统一文档格式。常见应用需求文档 → 自动生成技术方案 PDF 项目数据 → 自动生成 Excel 报表 阶段成果 → 自动生成汇报 PPT 发票或收据 → 修改并生成新的 PDF3. webapp-testingwebapp-testingSkill 一般通过 Playwright 执行自动化测试。典型流程启动项目 → 打开浏览器 → 进入目标页面 → 模拟用户操作 → 验证页面结果 → 检查控制台错误 → 截图 → 输出测试报告可以测试登录表单提交页面跳转搜索筛选分页弹窗文件上传接口异常权限控制移动端适配。4. skill-creatorskill-creator用于根据自然语言需求创建新的 Skill。例如帮我创建一个“小程序分包”Skill。 要求 1. 先分析主包体积 2. 输出适合迁移的页面 3. 每次只迁移一个页面 4. 迁移前必须等待确认 5. 检查页面路径 6. 检查公共依赖 7. 检查静态资源 8. 执行构建 9. 输出分包前后体积变化 10. 未经确认不得继续下一步。AI 可以根据这些要求生成一套可重复执行的流程。5. brainstormingbrainstormingSkill 适用于需求不完整、方案不明确或存在多种技术选择的场景。标准流程梳理需求 → 明确目标 → 确认用户 → 识别约束 → 找出待确认问题 → 提供多个方案 → 对比成本和风险 → 人工选择 → 形成最终技术方案它的重点不是直接写代码而是先把问题想清楚再开始执行。适用场景新项目立项技术选型功能改版页面重构数据库设计AI 功能规划小程序分包性能优化。六、CLAUDE.md、docs、Skill 和 Prompt 的关系内容解决的问题典型内容PRD要做什么产品需求、业务目标CLAUDE.md项目中应该怎么做技术栈、规范、禁止事项docs执行任务需要知道什么架构、接口、数据库、业务规则Skill某类任务按什么流程执行开发、测试、发布 SOPPrompt这一次具体做什么当前任务要求可以总结为PRD 决定做什么 CLAUDE.md 规定怎么做 docs 提供详细知识 Skill 规定执行流程 Prompt 描述当前任务七、“APP 本质上是 Skill”的含义传统 APP 通常通过图形界面触发固定流程。例如传统 APP对应的业务流程滴滴打车选择起点、终点并叫车携程订票选择日期、航班并填写信息美团外卖选择餐厅、菜品并下单快递查询输入单号并查询物流在 AI Agent 模式下这些流程可以被抽象成 Skill。例如用户表达目标 → AI 识别意图 → AI 收集必要参数 → AI 调用对应服务 → AI 执行业务流程 → AI 返回执行结果用户不再需要点击多个页面而是可以直接表达目标帮我订一张周五晚上从上海到北京的机票 优先选择虹桥出发 价格不超过 1200 元。AI 可以执行识别出发地识别目的地识别日期和时间查询航班根据价格筛选展示候选方案等待用户确认填写乘客信息创建订单进入支付环节。因此未来很多 APP 的功能可能会变成自然语言入口 业务 Skill 第三方服务 确认界面不过“80% 的 APP 应该消失”更像是一种趋势性表达并不是严格的数据结论。更准确的理解是APP 不一定消失但大量复杂、重复的操作界面可能会被自然语言和 Agent 工作流替代。涉及以下场景时传统 UI 仍然很重要支付确认身份认证隐私授权风险提示商品对比地图操作复杂数据展示最终订单确认。八、这套工作流的关键原则1. 先规划再执行不推荐直接对 AI 说帮我把这个功能做完。推荐改成请先阅读项目代码和需求。 只输出以下内容 1. 功能拆分 2. 涉及文件 3. 技术方案 4. 数据流 5. 风险点 6. 实施步骤 7. 测试方案。 暂时不要修改代码等待我确认。确认方案后再执行按照已确认的方案执行第一步。 要求 1. 只完成第一步 2. 不要修改无关文件 3. 完成后运行检查 4. 汇报修改内容 5. 等待我确认后再继续。2. 文档分层按需读取不推荐将所有项目知识全部写进 CLAUDE.md推荐CLAUDE.md → 全局规则和文档入口 docs/README.md → 文档导航 docs/* → 详细业务和技术知识 skills/* → 标准执行流程3. AI 执行人类验收AI 生成代码后仍然需要执行代码审查类型检查ESLint 检查单元测试接口测试E2E 测试构建验证页面实际操作安全检查业务验收。4. 每次只处理一个明确任务不推荐一次性要求 AI重构整个项目 升级所有依赖 修改所有页面 补充全部测试 并完成部署。推荐拆分成第一阶段分析现状 第二阶段确定方案 第三阶段修改一个模块 第四阶段执行测试 第五阶段人工确认 第六阶段进入下一个模块5. 每一步都要有可验证结果每个任务都应该包含明确的完成标准。例如页面开发完成标准 - 页面可以正常访问 - 接口可以正常调用 - 加载状态正常 - 空状态正常 - 错误状态正常 - 移动端适配正常 - TypeScript 检查通过 - ESLint 检查通过 - 单元测试通过 - 正式构建通过。九、推荐的项目目录结合前端、小程序和 AI 智能助手项目可以使用以下结构project/ ├── CLAUDE.md ├── README.md ├── CHANGELOG.md ├── docs/ │ ├── README.md │ ├── product-requirements.md │ ├── architecture.md │ ├── conventions.md │ ├── business-rules.md │ ├── frontend.md │ ├── backend.md │ ├── api.md │ ├── database.md │ ├── deployment.md │ ├── testing.md │ └── ai/ │ ├── prompt.md │ ├── context.md │ ├── streaming.md │ └── conversation-history.md ├── skills/ │ ├── requirement-analysis/ │ ├── brainstorming/ │ ├── frontend-page/ │ ├── frontend-design/ │ ├── api-integration/ │ ├── mini-program-subpackage/ │ ├── bug-fix/ │ ├── code-review/ │ ├── webapp-testing/ │ └── release/ ├── src/ └── tests/十、适合优先创建的 Skill1. 需求分析 Skill负责阅读 PRD拆分功能梳理页面梳理接口找出异常场景输出待确认问题生成技术任务清单。2. 设计稿还原 Skill负责阅读蓝湖或 Figma 设计稿分析页面结构提取颜色、字体和间距检查已有公共组件拆分页面组件实现响应式页面对比设计稿输出差异报告。3. 前端页面开发 Skill负责分析页面需求检查现有组件输出开发方案创建页面接入接口增加加载、空状态和错误状态编写测试执行构建。4. 接口联调 Skill负责阅读接口文档检查请求参数检查返回结构创建 TypeScript 类型封装请求方法处理异常处理 Token测试正常和异常场景输出联调结果。5. 小程序分包 Skill负责分析主包大小找出适合迁移的页面分析依赖关系每次迁移一个页面等待人工确认修改路由和路径检查静态资源执行构建对比包体积。6. Bug 修复 Skill负责复现问题 → 收集错误信息 → 定位根因 → 输出修复方案 → 等待确认 → 修改代码 → 编写回归测试 → 验证修复结果 → 输出修复报告7. Playwright 测试 Skill负责启动项目打开目标页面模拟用户操作验证页面结果检查控制台检查网络请求截取测试截图输出测试报告。8. 发布检查 Skill负责检查环境变量检查接口地址执行类型检查执行 ESLint执行单元测试执行 E2E 测试执行正式构建检查产物生成 CHANGELOG生成发布说明准备回滚方案。十一、最终总结这套 AI 工程化方法可以概括为用 CLAUDE.md 规定项目规则 用 docs 管理项目知识 用 Skill 固化执行流程 用 Prompt 描述当前任务 用 Claude Code 执行代码修改 用自动化测试验证结果 由人完成最终决策和验收最终目标不是让 AI 无限制地修改项目而是建立一套可控可复用可验证可维护可追踪的 AI 辅助开发流程。AI 不只是代码生成工具而是可以参与需求、架构、开发、测试和交付的工程协作工具。