刘洋的 AI 前端工作流
日常推荐顺序
- 需求刚来时:
使用 frontend-requirement-doc,基于这个需求帮我整理一份前端技术文档。要求包含目录策略、项目落点、模块设计、接口契约、类型设计、多语言 Key 清单、风险、开发步骤和验收清单。
- 准备开发前:
使用 vue-admin-feature-design,基于刚才的技术文档,帮我拆前端实现方案。重点看页面、组件、接口、类型、状态、路由、权限、国际化和校验。
- 涉及架构调整时:
使用 frontend-architecture-review,评估这个方案是否适合中大型中后台长期维护。给出推荐方案、备选方案和不推荐方案。
- 涉及地图、围栏、HERE、邮编区域时:
使用 frontend-map-sdk-integration,帮我分析这个地图需求应该复用 SDK、扩展 SDK、封装项目 facade,还是修改页面调用层。
- 页面慢、表格卡、包大时:
使用 frontend-performance-review,帮我分析这个模块的性能风险。重点看首屏、包体积、接口频率、大表格渲染、导入导出和缓存策略。
- 代码写完后:
使用 frontend-code-review,review 当前改动。先列问题,重点看 bug、回归风险、类型安全、权限边界、性能和测试缺口。
- 准备交付前:
使用 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 原生逻辑。 - 代码完成后必须有代码审查和交付前检查两步:前者找问题,后者判断能不能交付。