刘洋的 AI 前端工作流

工作流 · · 原创

日常推荐顺序

  1. 需求刚来时:

使用 frontend-requirement-doc,基于这个需求帮我整理一份前端技术文档。要求包含目录策略、项目落点、模块设计、接口契约、类型设计、多语言 Key 清单、风险、开发步骤和验收清单。

  1. 准备开发前:

使用 vue-admin-feature-design,基于刚才的技术文档,帮我拆前端实现方案。重点看页面、组件、接口、类型、状态、路由、权限、国际化和校验。

  1. 涉及架构调整时:

使用 frontend-architecture-review,评估这个方案是否适合中大型中后台长期维护。给出推荐方案、备选方案和不推荐方案。

  1. 涉及地图、围栏、HERE、邮编区域时:

使用 frontend-map-sdk-integration,帮我分析这个地图需求应该复用 SDK、扩展 SDK、封装项目 facade,还是修改页面调用层。

  1. 页面慢、表格卡、包大时:

使用 frontend-performance-review,帮我分析这个模块的性能风险。重点看首屏、包体积、接口频率、大表格渲染、导入导出和缓存策略。

  1. 代码写完后:

使用 frontend-code-review,review 当前改动。先列问题,重点看 bug、回归风险、类型安全、权限边界、性能和测试缺口。

  1. 准备交付前:

使用 frontend-acceptance-check,开发完成后帮我列人工检查清单和 AI 自检查清单,并确认格式化、遗留问题和是否还有更优实现。

最省心的组合 prompt

做一个完整需求时,可以直接说:

使用刘洋前端工作流处理这个需求。先用 frontend-workflow-router 判断流程,再用 frontend-requirement-doc 写技术文档,然后用 vue-admin-feature-design 拆实现方案。如果涉及架构、地图或性能风险,分别补充 frontend-architecture-review、frontend-map-sdk-integration 或 frontend-performance-review。代码完成后用 frontend-code-review 审查,最后用 frontend-acceptance-check 做交付前检查。

常用快捷入口

场景 Prompt
不确定走哪个流程 使用 frontend-workflow-router,帮我判断这个任务应该走哪个前端流程。
写技术文档 使用 frontend-requirement-doc,按固定技术文档模板写方案。
设计中后台功能 使用 vue-admin-feature-design,帮我设计这个中后台功能。
架构评审 使用 frontend-architecture-review,评审这个方案的架构合理性和长期维护风险。
地图需求 使用 frontend-map-sdk-integration,判断这个地图需求应该复用 SDK、扩展 SDK、封装 facade,还是改页面调用层。
性能分析 使用 frontend-performance-review,分析首屏、包体积、接口频率、大表格和导入导出性能。
代码审查 使用 frontend-code-review,按 P0-P3 审查当前改动。
交付检查 使用 frontend-acceptance-check,列人工检查清单、AI 自检查清单、格式化校验和交付结论。

固定原则

  • 先判断目录策略:新增模块、新增子页面、改造现有模块,还是只改公共能力。
  • 目录落点不明确时,先列候选目录让我确认,不要一股脑扫全项目。
  • 新增可见文案必须处理多语言 Key 清单。
  • 地图需求优先复用 /Users/liuyang/aymfx/code/heremapsdk@eu/heremapsdk,不要在项目里散写 HERE SDK 原生逻辑。
  • 代码完成后必须有代码审查和交付前检查两步:前者找问题,后者判断能不能交付。