Agent Skills
返回列表
前端开发统一工作流

前端开发统一工作流

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_4e42b097/frontend-workflow。

技能介绍

解决什么问题

前端交付常卡在分散步骤：Figma 还原后缺检查，需求文档、接口定义和业务代码各自漂移，AI 容易跳过确认直接生成。frontend-workflow 把这些环节收敛为一个可路由、可检查、可回退的流程入口，而不是把规则全部塞进 prompt。

技能如何工作

它先解读意图，输出任务边界：范围、输入物、目标产物、起止阶段和技术栈。随后按固定阶段读取 references/：Figma 还原、静态检查、人工确认、生成 OpenSpec 或 fw_dev_spec 活文档、Swagger 接口定义、组件/状态/数据流、业务逻辑、工程检查与终验。

  • 单 Agent 模式：同一模型按阶段顺序推进，适合轻量任务。
  • 多 Agent 模式：编排器 workflow-orchestrator 分发 figma-restorer、prd-analyst、api-contractor、frontend-implementer、qa-reviewer 等角色，并用状态脚本做 Gate 校验、推进、回退。
  • 独立分支：TAPD 缺陷修复和开发计划活文档不套主流程，直接读取对应 reference。

适用边界与注意点

该技能是路由层，核心规则在 references/ 中，命中分支后必须先读取文件再执行。人工 Gate 不可跳过；检查阶段最多回流 3 次，超出后转人工。测试能力仍是骨架，适合已有明确约定的项目。技术栈默认偏 Vue3+TS，若目标项目是 Vue2+JS 或 React，需要结合 frontend-workflow-usage.md 做输出适配。

使用场景

  • 根据 Figma 设计稿生成静态页面，并按 QA 清单检查偏差、人工确认后进入下一环节。
  • 已有原型 .md 或 Figma，需要拆成 OpenSpec 需求文档、specs 和 tasks，供后续开发使用。
  • 拿到 Swagger open.json，需要按项目接口模式生成接口函数、类型与 JSDoc，并做增量同步。
  • 要修复 TAPD 缺陷，需要筛选需求关联缺陷、生成本地活文档计划、修复后验证并更新状态。

适合人员

  • 负责 Figma 还原的前端工程师：希望设计稿到静态页面的规则、测量、资源导出和 QA 检查统一。
  • 需要从原型文档产出 PRD 的产品/前端负责人：希望把 .md 或 Figma 需求规范化为 OpenSpec specs/tasks。
  • 要接入后端接口的全栈工程师：希望基于 Swagger 生成接口定义并适配现有 TypeScript/JSDoc 风格。
  • 使用多 Agent 工作流的高级工程师：希望编排器按阶段 spawn 专职角色，并用状态脚本做 Gate 与回退。