简介
| 角色 | 前端工程师 |
| 包名 | @the-aico/frontend |
| 技能数 | 6 |
| 命令数 | 4 |
全栈前端开发：设计系统提取、页面设计、任务拆分，以及 TDD 方式的实现。
安装
aico add @the-aico/frontend技能
init
通过模板创建设计系统和约束文档来初始化前端环境。
使用场景：
- 运行
/frontend.init命令时 - 用户要求"初始化前端"、"设置前端环境"
- 开始前端工作需要建立设计系统和约束时
- 需要创建
docs/reference/frontend/design-system.md或constraints.md时
style-extraction
从参考网站或截图中提取设计令牌（颜色、字体、间距、效果）来创建项目设计系统。
使用场景：
- 用户分享参考网站 URL 并想提取其样式
- 用户提供截图或图片并要求"提取设计"、"提取样式"
- 运行
/frontend.init需要从参考创建设计系统 - 用户要求"创建设计系统"、"提取颜色"、"提取字体"
- 开始前端工作前需要建立一致的设计令牌
design
将 PRD 或故事转换为完整的页面/组件设计，包括 ASCII 布局、组件规格、交互流程和前端实现提示。
使用场景：
- 用户要求"设计页面"、"设计组件"、"创建页面设计"
- 用户提到"页面设计"、"组件设计"、"UI 设计"、"布局设计"
- 运行
/frontend.design命令时 - PRD 或故事已准备好，需要在实现前进行视觉/交互设计
- 需要创建前端开发人员可以实现的设计规格
task-breakdown
将 PM 故事拆分为前端任务，按 UI 开发顺序：设置 → 静态 UI → 动态逻辑 → 交互 → 测试。
使用场景：
- 运行
/frontend.tasks命令时 - 用户要求"拆分故事"、"创建前端任务"、"分解成任务"
- 在
docs/reference/pm/stories/有故事并需要有组织的任务列表 - 需要按 UI 开发层级排序的任务（而非随机顺序）
- 开始前端工作并想要有组织的任务列表
plan
为单个前端任务创建原子化实现计划。每个步骤都有确切代码和验证命令。
使用场景：
- 运行
/frontend.plan命令时 - 用户明确要求"原子步骤"、"带验证的逐步计划"
- 有来自
docs/reference/frontend/tasks/的特定任务并需要实现步骤 - 需要细粒度步骤：设置（创建文件）→ 实现（写代码）→ 测试（验证）→ 提交
不要用于：
- 架构规划（使用 EnterPlanMode）
- 通用开发规划
- 功能范围界定或估算
implement
以 TDD 方式执行前端实现。在写代码前先读取所有约束文件，先写失败的测试，每步后验证。
使用场景：
- 用户要求"实现这个"、"实现计划"、"开始实现"、"执行计划"
- 有实现计划准备好并需要执行
- 执行
/frontend.plan输出的步骤 - 用户说"开始写代码"、"写代码"、"开始实现"
- 用户要求"使用 TDD"、"先写测试"、"测试驱动"的前端代码
- 用户要求"写测试"、"添加测试"、"创建测试"
- 修复 UI bug（先写重现 bug 的失败测试）
TDD 铁律： 没有失败的测试就没有生产代码。
命令
/frontend.init
初始化前端约束文件，包含项目特定配置。
/frontend.init创建配置文档，包括：
- 技术栈（React、Vue 等）
- 样式方案（Tailwind、CSS modules 等）
- 组件模式
- 测试要求
/frontend.design
根据 PRD 或需求生成页面/组件设计规格。
/frontend.design "用户资料页面"产出：
- 组件层级
- 状态管理方案
- API 集成点
- 响应式断点
/frontend.tasks
将故事拆分为前端任务并跟踪进度。
/frontend.tasks S-001创建原子化任务列表：
- 每个任务可独立实现
- 清晰的验收标准
- 预估复杂度
/frontend.plan
为特定任务创建原子化实现计划。
/frontend.plan FE-001产出逐步实现指南。
文档结构
docs/reference/frontend/
├── constraints.md # 项目约束
├── design-system.md # 提取的设计系统
├── designs/
│ └── profile-page.md # 页面设计规格
└── tasks/
└── FE-001.md # 任务定义工作流程
- 提取现有代码的设计系统（
style-extraction） - 根据需求设计页面/组件（
design） - 拆分为原子化任务（
task-breakdown） - 规划每个任务的实现（
plan） - 以 TDD 方式实现（
implement）