前端工程师的 AI 工具箱

这个 pack 包含什么

这是 React / Vue / Svelte 工程师真要靠 AI 把 UI 上线时会上手的一套 — 不是「前端 AI 工具大全」那种 40 个 tab 的列表。每一个都覆盖同一条管线上的一环：把设计变成 agent 能读的格式 → 生成组件骨架 → 用 agent 已经认识的系统上样式 → 在真浏览器里跑通 → 合并前确保没有 a11y 红线。

Pack 的重心偏 React（这是目前生态最厚的地方），但十个里有七个在 Vue 和 Svelte 上一样能跑（Tailwind、Headless UI、Playwright MCP、a11y agent、frontend-developer agent、screenshot-to-code、Figma MCP）。v0、Onlook、Magic UI 是 React 专属 — 不在 React 圈就换成你框架对应的方案。

推荐安装顺序（设计 → 脚手架 → 样式 → 测试 → 无障碍）

1. Figma Context MCP (#198) — 设计输入源。把 Figma URL 丢给 agent，拿回 layout tree、样式、间距、组件层级。这是上游水龙头；没它，后面每一步都在猜「设计」到底长啥样。
2. Screenshot to Code (#313) — 设计输入兜底。Figma 文件不存在（老项目、营销 PNG、竞品截图）时，贴张图就能拿回 React + Tailwind 代码。和 Figma MCP 一起用，别二选一。
3. v0 by Vercel (#630) — 组件脚手架。从 prompt 生成 Tailwind + shadcn 的 React 组件。最适合用来出第一版卡片、表单、营销区块的草稿。v0 的输出别直接合并，是起点不是终点。
4. Onlook (#867) — 可视化代码编辑器。点应用里某个元素，告诉 agent 改啥，拿回代码 diff。补齐 v0 不擅长的「Figma 撞代码」工作流。React-first。
5. Claude Code Agent: Frontend Developer (#4374) — 通用 agent。调度上面 MCP 的指挥官，能读你现有代码、产出 diff。日常主力，v0 和 Onlook 是它在特定时刻调用的点工具。
6. Tailwind CSS v4 (#663) — 样式系统。第一天就选它 — 上面所有 AI 工具默认输出都是 Tailwind class。用 CSS-in-JS 或裸 CSS 对抗就是生产力税。v4 的 CSS-first 配置 + 零运行时是甜蜜点。
7. Magic UI (#3047) — 预制动画组件。150+ React + Tailwind + Framer Motion 组件。v0 出了静态 hero，丢个 Magic UI 的 shimmer / marquee / sparkles 进去就省 1 小时。
8. Headless UI (#1984) — 无样式可访问原语。菜单、对话框、组合框、列表框 — AI 生成器最容易把 a11y 写错的几个组件。Headless UI 自带键盘导航和正确 ARIA，你只管套样式。
9. Playwright MCP (#3687) — agent 驱动的浏览器测试。组件落地后，agent 开真浏览器、截图、断言可见文本、报 bug。闭合「我以为这就行了」的回路。
10. Claude Code Agent: Accessibility Tester (#4283) — a11y 守门员。跑 axe-core 检查、报 WCAG 2.1 AA 违规、给修复建议。PR 前的最后一关 — 专抓 AI 生成 UI 最常翻车的 对比度 / aria-label / focus trap 回归。

它们怎么协同（ASCII）

   Figma 文件                Screenshot.png
        │                          │
        ▼                          ▼
  Figma Context MCP ──┐   ┌── Screenshot to Code
        (#198)        │   │        (#313)
                      ▼   ▼
           ┌─ Frontend Developer Agent ─┐
           │           (#4374)           │
           │   ↑                  ↑      │
           │   │                  │      │
           │  v0          Onlook         │
           │ (#630)        (#867)        │
           │ 首版骨架      代码内编辑    │
           └─────────┬───────────────────┘
                     ▼
         Tailwind v4 (#663)  ◀── Magic UI (#3047)  ── Headless UI (#1984)
         (utility class)        (动画组件)         (a11y 原语)
                     │
                     ▼
          Playwright MCP (#3687)
          (真 Chromium 跑断言)
                     │
                     ▼
          Accessibility Tester (#4283)
          (axe-core + WCAG 2.1 AA)
                     │
                     ▼
                  合并 PR

Frontend Developer Agent + Tailwind + Playwright MCP 三者是关键连接：agent 写 Tailwind class（目录里所有工具都说这套），Playwright 告诉 agent 渲染出的 DOM 是不是符合设计，回路在你不切 tab 的情况下就闭合了。没有 Playwright MCP，agent 会交付「能编译但看着崩」的代码；没有 Tailwind，每个生成器输出的 CSS 都和你的代码库打架。

你会遇到的取舍

• Figma Context MCP vs Screenshot to Code — Figma MCP 结构精确（auto-layout、token、组件 variant），但要求 Figma 文件命名合理。Screenshot to Code 宽容（任何 PNG），但丢语义结构。真实团队两个都用：Figma MCP 跑设计系统活，screenshot-to-code 跑一次性的竞品参考。别二选一。
• v0 vs Onlook vs frontend-developer agent — v0 最擅长 从 prompt 出新组件（新建营销页）。Onlook 最擅长 改已经渲染出来的 UI（点击改属性）。Agent 最擅长 在现有代码库里改（读 repo、改三个文件、跑测试）。日常 90% 用 agent，v0 / Onlook 在特定时刻调用。
• Tailwind v4 vs CSS-in-JS — 本 pack 里每个 codegen 工具默认输出都是 Tailwind。CSS-in-JS 仍能跑，但你会花几小时重写 AI 输出。AI 辅助前端的框架战已经结束 — Tailwind 是「无意中」赢的。
• Magic UI vs 自己写 — Magic UI 出 hero section 闪光效果很爽，但特别容易过度使用。一个真实产品页有 8 个动画区块看起来像技术 demo。挑 1-2 个 hero 动画就够，其他保持静止。
• Headless UI vs Radix UI vs Ark UI — 三个解决同一类问题。Headless UI 进这个 pack 是因为它出自 Tailwind Labs、API 最简洁、和 v0 / Magic UI 输出最干净地配合。Radix 更完整；要做设计系统选 Radix，要做应用选 Headless UI。
• Playwright MCP vs Cypress vs Vitest browser mode — Playwright MCP 进 pack 是因为 agent 要用它。人工跑测试时 Vitest browser mode 更快、Cypress 更成熟。MCP 是 agent 的验证回路，不是你的 CI 测试套件（虽然也能当）。
• Accessibility Tester (axe) vs 人工 a11y review — 自动化工具大约抓 40% 的 WCAG 违规。剩下的 60%（键盘导航、屏幕阅读器叙述、焦点顺序）仍需要人。axe 全绿不等于合格。

常见踩坑

• 过度依赖可视化生成 — v0 和 Onlook 出的代码看起来对，但结构很奇怪（嵌套 div、没语义 HTML、缺 label）。当作起点，merge 前重构。Agent (#4374) 你显式 prompt 就会做这一步：「按 /components 里的现有模式重构，加 a11y 属性」。
• a11y 留到最后才管 — a11y tester 是关卡不是修复器。脚手架阶段（step 8）就用 Headless UI 原语，到 step 10 时违规会很少。在做完的页面上修 200 条 axe 违规要一天；上游 10 分钟搞定。
• 任由 agent 把 Tailwind 配置写散 — 每个 prompt 都新增颜色、间距 token、字号。一周后你的 tailwind.config.ts 有 80 个颜色没系统。先定 design token，再让 agent 通过 Figma MCP 的 token 导出强制用。
• 「组件看着就行」就跳过 Playwright MCP — AI 前端最常见的回归：按钮视觉上能点但键盘 / 移动端 tap / Enter 键不触发。MCP 30 秒就能抓到；盯着渲染页面看永远漏。
• 场景错配脚手架工具 — 用 v0 改一个已登录的 dashboard 很痛苦（没 auth、没 state）。用 Onlook 从 prompt 设计新营销页是杀鸡用牛刀（应用还没渲染）。按阶段配工具：新项目 → v0，现有应用 → Onlook，深度改代码 → agent。
• 把 MCP 当可选管道 — 没有 Figma MCP，agent 只能猜你系统里「primary button」是啥。先把 MCP 串起来（一下午），后面整个 pack 每天都给你赚回时间。