---
name: frontend-generator
description: Use when the user wants a single entry point to generate, redesign, or ship frontend UI such as landing pages, dashboards, admin pages, forms, detail pages, app shells, or Figma screens, and the agent should automatically route across frontend planning, design-system selection, brand styling, image generation, code delivery, polish, and browser validation.
---

# Frontend Generator

前端生成总入口。目标不是重复下游 skill 的细则，而是把“该走哪条前端链路”一次性路由好，让调用方只触发一个 skill 就能进入正确流程。

## 适用范围

- 生成或改造落地页、官网页、营销页
- 生成或改造后台、仪表盘、工作台、列表页、表单页、详情页
- 先出 UI 图，再落前端代码
- 先生成 Figma 页面或 Figma design system
- 指定品牌风格，例如 Apple、Stripe、Notion、Linear、Claude
- 对已有前端做 polish、可访问性、动效性能、metadata 和真实浏览器验收

## 禁止事项

- 不要只读本 skill 就直接开始写页面代码，必须继续加载对应下游 skill。
- 不要把本 skill 当成新的设计规范来源；真正的设计、实现、验收规则以下游 skill 为准。
- 不要同时混用多条主链路；先判断主交付目标，再进入对应路线。

## 先做的判断

先用用户请求和当前仓库上下文判断本次任务的主交付类型，只选一条主路线：

1. **代码交付优先**
   - 用户要的是可运行页面、组件、路由、样式、交互
   - 默认进入“前端代码主链路”
2. **图片规格优先**
   - 用户要先看 UI 方向图、规格图、页面视觉方案
   - 进入“AI 生图主链路”
3. **Figma 交付优先**
   - 用户明确要“生成到 Figma / 写到 Figma / 建 Figma 页面 / 建 design system”
   - 进入“Figma 主链路”
4. **审查或抛光优先**
   - 用户要 polish、audit、improve、fix UI、做真实浏览器验收
   - 进入“抛光与验收主链路”

如果一句话里同时包含多种目标，按这个优先级取主路线：

`Figma` > `图片规格` > `代码交付` > `抛光验收`

## 主链路

### 1. 前端代码主链路

适用于直接交付 React / Next.js / Vue / HTML/Tailwind 页面与组件。

按顺序加载和使用：

1. `frontend-first-workflow`
   - 用于确认当前任务是直接编码，还是应该先补前端先行的需求映射和生图阶段
2. `ui-ux-pro-max`
   - 先生成 design system 建议，再补 style / typography / ux / stack 检索
3. `impeccable`
   - 负责整体设计语言、register、布局和 polish 主决策
4. `design-taste-frontend`
   - 负责 anti-slop、密度、动效强度、布局方差和高级视觉约束
5. `frontend-design`
   - 负责把 UI 任务继续路由到品牌、图标、可访问性、动效和 metadata 子 skill
6. `baseline-ui`
   - 在真正输出代码前做工程基线约束
7. `frontend-patterns`
   - 当前端栈需要组件模式、状态、性能、表单、动画实现模式时补读

按条件插入：

- 指定品牌风格时：`brand-design-md`
- 需要真实 SVG 图标时：`better-icons`
- 需要可访问性修正时：`fixing-accessibility`
- 需要动效性能修正时：`fixing-motion-performance`
- 页面级 SEO / OG / favicon 时：`fixing-metadata`

### 2. AI 生图主链路

适用于先出方向图、规格图，再转前端规格。

按顺序加载和使用：

1. `frontend-first-workflow`
2. `ui-ux-pro-max`
3. `impeccable`
4. `design-taste-frontend`
5. `baseline-ui`
6. `brand-design-md`（仅用户指定品牌风格时）
7. `ai-ui-prompts`

硬门禁：

- 不得跳过 `frontend-first-workflow` 里的 `Frontend Skill Intake`
- 不得只用一句“做个 xx 风格页面”就直接生图
- 未形成方向图评审结论前，不进入前端编码

### 3. Figma 主链路

适用于把页面、视图或 design system 交付到 Figma。

如果是**页面 / 视图 / 落地页 / modal / drawer / panel**：

1. `figma:figma-use`
2. `figma:figma-generate-design`

如果是**组件 / design system / variables / tokens / library**：

1. `figma:figma-use`
2. `figma:figma-generate-library`

如果来源是网页前端代码，且需要对齐真实界面视觉：

- 先补 `ui-ux-pro-max`
- 再视情况补 `impeccable` / `design-taste-frontend`
- 最后走 Figma 路线

### 4. 抛光与验收主链路

适用于用户要“优化现有前端”，而不是从零生成。

默认顺序：

1. `impeccable`
2. `frontend-design`
3. `baseline-ui`
4. `fixing-accessibility`
5. `fixing-motion-performance`
6. `fixing-metadata`
7. `browser-e2e-testing`（需要真实浏览器验收时）

如果问题更偏实现细节，再补：

- `frontend-patterns`
- `better-icons`

## 交付规则

### 代码交付时

- 先确定 stack，再决定具体实现
- 保持现有设计系统和组件习惯，除非用户明确要重做视觉语言
- 默认输出生产可用代码，而不是只有 prompt、草图或思路

### 设计交付时

- 先给出 design system / 视觉原则 / 页面层级，不要直接散写 prompt
- 有品牌参照时，优先使用 `brand-design-md` 提供的 DESIGN.md 上下文

### 验收时

- 有真实网页时，优先使用 `browser-e2e-testing`
- 不要把“脚本写好了”或“本地截图看起来正常”当成前端已验收

## 最小决策表

| 用户意图 | 先加载 |
|----------|--------|
| “直接帮我做一个后台页 / landing page / 表单页” | `frontend-first-workflow` + `ui-ux-pro-max` + `impeccable` |
| “先给我出界面图 / 方向图 / 规格图” | `frontend-first-workflow` + `ai-ui-prompts` |
| “做成 Apple / Stripe / Linear 风格” | `brand-design-md` |
| “写到 Figma / 生成 Figma 页面” | `figma:figma-use` + `figma:figma-generate-design` |
| “建 Figma design system / 组件库” | `figma:figma-use` + `figma:figma-generate-library` |
| “帮我 polish 一下现有页面” | `impeccable` + `frontend-design` + `baseline-ui` |
| “做完后帮我真实验收页面” | `browser-e2e-testing` |

## 默认回答风格

- 对用户只暴露一条清晰主线，不把所有 skill 名称一股脑抛出去
- 内部可以组合多个 skill，但对外要说明当前主路线和下一步产物
- 发现任务其实不该直接生成代码时，要明确切回 `frontend-first-workflow` 的前置阶段
