你是否也遇到过以下痛点：

• 把需求全丢给 AI。结果它不仅胡乱引入依赖，还破坏了你精心设计的 Vue3 响应式状态树。不过，
• 让 AI 遵循团队专属的 CSS 规范和目录结构。却频繁出现不符合约定的文件布局。
• 修 Bug 时经常是 “按下葫芦浮起瓢”，导致回滚和重构成本高于自己手写。

问题的本质在于：普通的 AI 缺乏工程化上下文与约束边界。

主要理念这方面，从“魔法黑盒”到“工业流水线”

这套 FE AI-Coding Skills 不再幻想“一句话生成整个程序”。我们采用"任务分解 + 契约化交接 + 人工把控"模式，让 AI 从“野生实习生”蜕变为“架构级资深研发”。

为什么要任务分解？

• AI 更擅长微观操作——在单一职责功能点上，它能精准给出类型定义与逻辑实现。其实，
• 便于人工审核纠偏——小改动易于 Review。每个功能点都能即时调整方向。
• 质量拦截网——通过拆分为小步骤。可在每一步设立关卡，确保高质量交付。

说到武器库，大 FE AI-Coding Skills 总览

Skill 集合包含多种主要能力。每个 skill 都有明确场景、触发关键词和固定工作流，用来让 AI 在需求实现、架构设计、代码审查、缺陷修复、重构、安全、性能和代码风格任务中稳定执行。

协作顺序与闭环协议

工作流概览的观点是。

fe-requirement-comprehension
-> fe-ai-coding
-> fe-architecture
-> fe-codestyle
-> fe-security / fe-performance
-> fe-refactor / fe-bugfix
-> fe-codereview
-> fe-mr-codereview
-> 按阻塞问题回流修复 / 记录风险
-> 最终交付

关键点这方面，

• 每一阶段都有清晰输入与输出，并设立质量拦截关卡。
• AIGenerated code 必须经过对应 skill 的约束检查，避免无效或不安全代码被直接合并。
• Merges 前 P0/P1 问题，确保上线风险降至最低。
• User 在任何阶段都可随时介入并回流修正，保持最终产品符合业务预期与技术标准。

主闭环工作流示意图—只供参考，实际流程由技能串联完成。

sequenceDiagram
participant PM as 产品经理
participant Dev as 开发者
participant AI as 🤖 智能流水线
participant Git as GitLab
PM->Dev: 抛出截图+描述
Dev->AI: 调用 fe-requirement-comprehension
AI-->Dev: 输出标准《需求规格书.md》+资源目录+参照图
Dev->AI: 确认边界 &调用 fe-ai-coding
alt 架构设计需要
AI->AI这方面，调用 fe-architecture
end
alt 风格控制需要
至于AI->AI。调用 fe-codestyle
end
alt 安全/性能检查
AI->AI这方面，调用 fe-security / fe-performance
end
Dev->Git: Push &创建 MR
Git->AI: 自动触发 fe-mr-codereview
alt 有 P0/P1 问题
AI-->Git: 评论
Git-->Dev: 回流至 bugfix/refactor 等
Dev->Git: 修复后
Push
end
alt 无问题
AI-->Git: 评论
end


典型工作流实战：从“原型图”到“平稳发版” 的颠覆式体验 



调用 /skill fe-requirement-comprehension 
将截图转为《看板需求规范》。完整归档原图，并标注后端 API 缺失需先找后端确认。


调用 /skill fe-ai-coding 
触发 /skill fe‑architecture 
将“图表渲染”和“数据请求”拆到不同职责层，并规划好数据流。


生成代码时自动调用 /skill fe‑codestyle 
统一命名、CSS Module 与 BEM 写法，mock 数据加前缀及 TODO 注释。


Trouble shoot security via `/skill fe‑security` and performance via `fea‑performance`..


Push 后自动触发 `/skill fe‑mr‑codereview` 串行审查，指出内存泄漏等 P1 问题并评论。

 &midlineheight=15px;font-size:.8rem;color:#888，margin-top:-5px;老实说，margin-bottom:-5px;">,调用相应 skill 修复后
Push 并进入增量审查。







说到写在最终。重新定义 AI 编程 

AIGenerated code 已不再是“一键生成万物”的黑盒，而是严谨工程化实践的产物。通过上述 Skill 集合，我们为每一次编码行为注入了"边界契约 + 流程协议"。从而将原本充满不确定性的 “玩具” 转化成工业级前端生产力引擎。若想配置与源码，请访问 👉 .