适合沉淀为团队模板或个人项目流程
← 返回AI 技能
资源说明 使用收益 最终效果把产品需求拆成页面结构、组件职责、状态流和代码任务，适合前端开发交接和 AI 编程辅助。 执行步骤3 步 推荐工具ChatGPT / Cursor / GitHub 分步指南 同类推荐
- 资源格式
- zip zip(适用于vibecoding项目)
- 当前版本
- v1.0.0 详情同步展示最新资源
- 执行步骤
- 3 步 高级用户可直接上手
代码开发高级3 个步骤
SKILL DETAIL
前端需求到组件代码生成 SOP
把产品需求拆成页面结构、组件职责、状态流和代码任务，适合前端开发交接和 AI 编程辅助。
- 推荐工具
- 3 个 ChatGPT / Cursor
- 累计下载
- 9 用于判断资源热度
推荐工具
ChatGPTCursorGitHub
技能标签
进阶组合
资源下载
007-FrontendDev-FRCS.md.zip
- 格式
- zip
- 版本
- v1.0.0
- 下载
- 9
- 收藏
- 0
资源已同步先看下方接入说明再下载
下载前先看格式和接入方式
- 资源格式
- zip zip(适用于vibecoding项目)
- 版本维护
- v1.0.0 后台迭代后同步展示最新版本
- 资源反馈
- 9 下载 · 0 收藏 用于判断后续优先更新顺序
- 下载 ZIP 项目包
- 解压到本地或 Vibecoding 项目目录
- 按说明替换账号、素材和配置
先确认这个工作流适不适合你
包含可复制 Prompt
工具可替换，流程逻辑优先保留
跟随步骤搭建专属工作流
每一步包含目标说明，部分步骤附带可复制的示例 Prompt。
- 1
拆需求边界
把业务目标拆成页面、组件、数据接口和边界状态。
示例 Prompt 请把以下前端需求拆成页面结构、组件列表、状态流、接口契约和验收标准。
- 2
生成组件任务
按组件职责生成可执行开发清单。
- 3
代码审查
使用 checklist 检查边界状态、空态、错误态和移动端适配。
