[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-frontend-engineer-ai-toolkit-zh":3,"seo:pack:frontend-engineer-ai-toolkit:zh":100},{"code":4,"message":5,"data":6},200,"操作成功",{"pack":7},{"slug":8,"icon":9,"tone":10,"status":11,"status_label":12,"title":13,"description":14,"items":15,"install_cmd":99},"frontend-engineer-ai-toolkit","🎨","#EC4899","new","本周新建","前端工程师的 AI 工具箱","React \u002F Vue \u002F Svelte 工程师真要靠 AI 出 UI 时会上手的十个：Figma → 代码 MCP、截图转代码、v0、Onlook 可视化编辑、frontend-developer agent、Tailwind v4、Magic UI、Headless UI、Playwright MCP、a11y tester。按 设计 → 脚手架 → 样式 → 测试 → 无障碍 顺序装。",[16,28,38,48,56,64,71,78,85,92],{"id":17,"uuid":18,"slug":19,"title":20,"description":21,"author_name":22,"view_count":23,"vote_count":24,"lang_type":25,"type":26,"type_label":27},198,"b51a5814-eacc-4864-a047-9fd66c255006","figma-context-mcp-design-code-ai-agents-b51a5814","Figma Context MCP — Design-to-Code for AI Agents","MCP server that gives AI coding agents access to Figma design context. Provides layout, styles, and component info so agents like Cursor and Claude Code can generate pixel-perfect code. 14K+ stars.","MCP Hub",139,0,"en","mcp","MCP",{"id":29,"uuid":30,"slug":31,"title":32,"description":33,"author_name":34,"view_count":35,"vote_count":24,"lang_type":25,"type":36,"type_label":37},313,"e8c64554-d3b8-402d-b5c7-74bce0b57159","screenshot-code-convert-designs-code-e8c64554","Screenshot to Code — Convert Designs to Code","Screenshot to Code converts screenshots, mockups, and Figma designs into clean code using AI. 72.1K+ GitHub stars. HTML, React, Vue, Bootstrap. MIT.","Script Depot",111,"script","Script",{"id":39,"uuid":40,"slug":41,"title":42,"description":43,"author_name":44,"view_count":45,"vote_count":24,"lang_type":25,"type":46,"type_label":47},630,"ee124425-626b-4bcf-a738-9cdf88f98bd7","v0-vercel-ai-ui-component-generator-ee124425","v0 by Vercel — AI UI Component Generator","AI-powered tool that generates production-ready React and Next.js UI components from text descriptions. Uses shadcn\u002Fui and Tailwind CSS. Copy-paste or install via CLI. 8,000+ stars.","Vercel",213,"skill","Skill",{"id":49,"uuid":50,"slug":51,"title":52,"description":53,"author_name":54,"view_count":55,"vote_count":24,"lang_type":25,"type":46,"type_label":47},867,"0d4f9803-33e3-11f1-9bc6-00163e2b0d79","onlook-visual-ai-code-editor-react-apps-0d4f9803","Onlook — Visual AI Code Editor for React Apps","Open-source Figma-like visual editor for building React and Next.js apps with AI. Edit visually and code syncs in real-time. Design branching, team collab, deploy. Apache-2.0, 25,000+ stars.","AI Open Source",229,{"id":57,"uuid":58,"slug":59,"title":60,"description":61,"author_name":62,"view_count":63,"vote_count":24,"lang_type":25,"type":46,"type_label":47},4374,"79c222c4-b530-423a-9100-24d1aad45752","claude-code-agent-frontend-developer-79c222c4","Claude Code Agent: Frontend Developer","Use when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integration. Specifically:...","TokRepo精选",33,{"id":65,"uuid":66,"slug":67,"title":68,"description":69,"author_name":54,"view_count":70,"vote_count":24,"lang_type":25,"type":46,"type_label":47},663,"46f11f5d-bec2-46b8-89ba-fee11a265142","tailwind-css-v4-utility-first-css-framework-46f11f5d","Tailwind CSS v4 — Utility-First CSS Framework","The most popular utility-first CSS framework, now with v4 engine rewritten in Rust. 10x faster builds, automatic content detection, and zero-config setup. 90,000+ GitHub stars.",191,{"id":72,"uuid":73,"slug":74,"title":75,"description":76,"author_name":54,"view_count":77,"vote_count":24,"lang_type":25,"type":46,"type_label":47},3047,"ca9d165d-4d35-11f1-9bc6-00163e2b0d79","magic-ui-animated-react-components-design-engineers-ca9d165d","Magic UI — Animated React Components for Design Engineers","Magic UI is a free open-source collection of animated React components built with Tailwind CSS, Framer Motion, and shadcn\u002Fui conventions that you copy and paste into your projects.",98,{"id":79,"uuid":80,"slug":81,"title":82,"description":83,"author_name":34,"view_count":84,"vote_count":24,"lang_type":25,"type":46,"type_label":47},1984,"0ecba1d4-3eae-11f1-9bc6-00163e2b0d79","headless-ui-unstyled-accessible-ui-components-tailwind-css-0ecba1d4","Headless UI — Unstyled Accessible UI Components for Tailwind CSS","Completely unstyled, fully accessible UI components for React and Vue designed to integrate with Tailwind CSS, giving you behavior and accessibility without imposing visual design.",135,{"id":86,"uuid":87,"slug":88,"title":89,"description":90,"author_name":22,"view_count":91,"vote_count":24,"lang_type":25,"type":26,"type_label":27},3687,"0c80ab9c-0031-5a65-b7f5-fcdb5de2232e","playwright-mcp-browser-automation-for-agents","Playwright MCP — Browser Automation for Agents","Playwright MCP exposes browser automation via MCP with device emulation; verified 5,510★ and documents 143 device profiles plus `playwright install` setup.",88,{"id":93,"uuid":94,"slug":95,"title":96,"description":97,"author_name":62,"view_count":98,"vote_count":24,"lang_type":25,"type":46,"type_label":47},4283,"82e71c91-23ba-481c-bc2e-f89a2d397b4c","claude-code-agent-accessibility-tester-82e71c91","Claude Code Agent: Accessibility Tester","Use this agent when conducting comprehensive accessibility audits, WCAG 2.2 compliance assessments, or evaluating UI components and full codebases for barriers that affect...",32,"tokrepo install pack\u002Ffrontend-engineer-ai-toolkit",{"pageType":101,"pageKey":8,"locale":102,"title":103,"metaDescription":104,"h1":105,"tldr":106,"bodyMarkdown":107,"faq":108,"schema":124,"internalLinks":130,"citations":143,"wordCount":156,"generatedAt":157},"pack","zh","前端工程师的 AI 工具箱 — 真能把 UI 上线的 10 个","Figma Context MCP \u002F Screenshot to Code \u002F v0 \u002F Onlook \u002F frontend-developer agent \u002F Tailwind v4 \u002F Magic UI \u002F Headless UI \u002F Playwright MCP \u002F Accessibility Tester。一份 React\u002FVue\u002FSvelte 工程师从设计交付到 a11y 审核全打通的 AI pipeline。TokRepo 一键装。","前端工程师的 AI 工具箱 — 从设计交付到 a11y 的完整 pipeline","十个资产按推荐顺序装：设计交付 → 组件脚手架 → 样式 → 浏览器测试 → 无障碍审核。别再纠结框架对决，把 pipeline 串好，把屏幕发出去。","## 这个 pack 包含什么\n\n这是 React \u002F Vue \u002F Svelte 工程师**真要靠 AI 把 UI 上线时**会上手的一套 — 不是「前端 AI 工具大全」那种 40 个 tab 的列表。每一个都覆盖同一条管线上的一环：把设计变成 agent 能读的格式 → 生成组件骨架 → 用 agent 已经认识的系统上样式 → 在真浏览器里跑通 → 合并前确保没有 a11y 红线。\n\nPack 的**重心偏 React**（这是目前生态最厚的地方），但十个里有七个在 Vue 和 Svelte 上一样能跑（Tailwind、Headless UI、Playwright MCP、a11y agent、frontend-developer agent、screenshot-to-code、Figma MCP）。v0、Onlook、Magic UI 是 React 专属 — 不在 React 圈就换成你框架对应的方案。\n\n## 推荐安装顺序（设计 → 脚手架 → 样式 → 测试 → 无障碍）\n\n1. **Figma Context MCP** (#198) — 设计输入源。把 Figma URL 丢给 agent，拿回 layout tree、样式、间距、组件层级。这是上游水龙头；没它，后面每一步都在猜「设计」到底长啥样。\n2. **Screenshot to Code** (#313) — 设计输入兜底。Figma 文件不存在（老项目、营销 PNG、竞品截图）时，贴张图就能拿回 React + Tailwind 代码。和 Figma MCP 一起用，别二选一。\n3. **v0 by Vercel** (#630) — 组件脚手架。从 prompt 生成 Tailwind + shadcn 的 React 组件。最适合用来出第一版卡片、表单、营销区块的草稿。v0 的输出**别直接合并**，是起点不是终点。\n4. **Onlook** (#867) — 可视化代码编辑器。点应用里某个元素，告诉 agent 改啥，拿回代码 diff。补齐 v0 不擅长的「Figma 撞代码」工作流。React-first。\n5. **Claude Code Agent: Frontend Developer** (#4374) — 通用 agent。调度上面 MCP 的指挥官，能读你现有代码、产出 diff。日常主力，v0 和 Onlook 是它在特定时刻调用的点工具。\n6. **Tailwind CSS v4** (#663) — 样式系统。第一天就选它 — 上面所有 AI 工具默认输出都是 Tailwind class。用 CSS-in-JS 或裸 CSS 对抗就是生产力税。v4 的 CSS-first 配置 + 零运行时是甜蜜点。\n7. **Magic UI** (#3047) — 预制动画组件。150+ React + Tailwind + Framer Motion 组件。v0 出了静态 hero，丢个 Magic UI 的 shimmer \u002F marquee \u002F sparkles 进去就省 1 小时。\n8. **Headless UI** (#1984) — 无样式可访问原语。菜单、对话框、组合框、列表框 — AI 生成器最容易把 a11y 写错的几个组件。Headless UI 自带键盘导航和正确 ARIA，你只管套样式。\n9. **Playwright MCP** (#3687) — agent 驱动的浏览器测试。组件落地后，agent 开真浏览器、截图、断言可见文本、报 bug。闭合「我以为这就行了」的回路。\n10. **Claude Code Agent: Accessibility Tester** (#4283) — a11y 守门员。跑 axe-core 检查、报 WCAG 2.1 AA 违规、给修复建议。PR 前的最后一关 — 专抓 AI 生成 UI 最常翻车的 对比度 \u002F aria-label \u002F focus trap 回归。\n\n## 它们怎么协同（ASCII）\n\n```\n   Figma 文件                Screenshot.png\n        │                          │\n        ▼                          ▼\n  Figma Context MCP ──┐   ┌── Screenshot to Code\n        (#198)        │   │        (#313)\n                      ▼   ▼\n           ┌─ Frontend Developer Agent ─┐\n           │           (#4374)           │\n           │   ↑                  ↑      │\n           │   │                  │      │\n           │  v0          Onlook         │\n           │ (#630)        (#867)        │\n           │ 首版骨架      代码内编辑    │\n           └─────────┬───────────────────┘\n                     ▼\n         Tailwind v4 (#663)  ◀── Magic UI (#3047)  ── Headless UI (#1984)\n         (utility class)        (动画组件)         (a11y 原语)\n                     │\n                     ▼\n          Playwright MCP (#3687)\n          (真 Chromium 跑断言)\n                     │\n                     ▼\n          Accessibility Tester (#4283)\n          (axe-core + WCAG 2.1 AA)\n                     │\n                     ▼\n                  合并 PR\n```\n\n**Frontend Developer Agent + Tailwind + Playwright MCP** 三者是关键连接：agent 写 Tailwind class（目录里所有工具都说这套），Playwright 告诉 agent 渲染出的 DOM 是不是符合设计，回路在你不切 tab 的情况下就闭合了。没有 Playwright MCP，agent 会交付「能编译但看着崩」的代码；没有 Tailwind，每个生成器输出的 CSS 都和你的代码库打架。\n\n## 你会遇到的取舍\n\n- **Figma Context MCP vs Screenshot to Code** — Figma MCP 结构精确（auto-layout、token、组件 variant），但要求 Figma 文件命名合理。Screenshot to Code 宽容（任何 PNG），但丢语义结构。真实团队两个都用：Figma MCP 跑设计系统活，screenshot-to-code 跑一次性的竞品参考。别二选一。\n- **v0 vs Onlook vs frontend-developer agent** — v0 最擅长 *从 prompt 出新组件*（新建营销页）。Onlook 最擅长 *改已经渲染出来的 UI*（点击改属性）。Agent 最擅长 *在现有代码库里改*（读 repo、改三个文件、跑测试）。日常 90% 用 agent，v0 \u002F Onlook 在特定时刻调用。\n- **Tailwind v4 vs CSS-in-JS** — 本 pack 里每个 codegen 工具默认输出都是 Tailwind。CSS-in-JS 仍能跑，但你会花几小时重写 AI 输出。AI 辅助前端的框架战已经结束 — Tailwind 是「无意中」赢的。\n- **Magic UI vs 自己写** — Magic UI 出 hero section 闪光效果很爽，但**特别容易过度使用**。一个真实产品页有 8 个动画区块看起来像技术 demo。挑 1-2 个 hero 动画就够，其他保持静止。\n- **Headless UI vs Radix UI vs Ark UI** — 三个解决同一类问题。Headless UI 进这个 pack 是因为它出自 Tailwind Labs、API 最简洁、和 v0 \u002F Magic UI 输出最干净地配合。Radix 更完整；要做设计系统选 Radix，要做应用选 Headless UI。\n- **Playwright MCP vs Cypress vs Vitest browser mode** — Playwright MCP 进 pack 是因为 *agent* 要用它。人工跑测试时 Vitest browser mode 更快、Cypress 更成熟。MCP 是 agent 的验证回路，不是你的 CI 测试套件（虽然也能当）。\n- **Accessibility Tester (axe) vs 人工 a11y review** — 自动化工具大约抓 40% 的 WCAG 违规。剩下的 60%（键盘导航、屏幕阅读器叙述、焦点顺序）仍需要人。axe 全绿不等于合格。\n\n## 常见踩坑\n\n- **过度依赖可视化生成** — v0 和 Onlook 出的代码*看起来*对，但结构很奇怪（嵌套 div、没语义 HTML、缺 label）。当作起点，merge 前重构。Agent (#4374) 你显式 prompt 就会做这一步：「按 \u002Fcomponents 里的现有模式重构，加 a11y 属性」。\n- **a11y 留到最后才管** — a11y tester 是*关卡*不是*修复器*。脚手架阶段（step 8）就用 Headless UI 原语，到 step 10 时违规会很少。在做完的页面上修 200 条 axe 违规要一天；上游 10 分钟搞定。\n- **任由 agent 把 Tailwind 配置写散** — 每个 prompt 都新增颜色、间距 token、字号。一周后你的 `tailwind.config.ts` 有 80 个颜色没系统。**先定 design token**，再让 agent 通过 Figma MCP 的 token 导出强制用。\n- **「组件看着就行」就跳过 Playwright MCP** — AI 前端最常见的回归：按钮视觉上能点但键盘 \u002F 移动端 tap \u002F Enter 键不触发。MCP 30 秒就能抓到；盯着渲染页面看永远漏。\n- **场景错配脚手架工具** — 用 v0 改一个已登录的 dashboard 很痛苦（没 auth、没 state）。用 Onlook 从 prompt 设计新营销页是杀鸡用牛刀（应用还没渲染）。**按阶段配工具**：新项目 → v0，现有应用 → Onlook，深度改代码 → agent。\n- **把 MCP 当可选管道** — 没有 Figma MCP，agent 只能猜你系统里「primary button」是啥。先把 MCP 串起来（一下午），后面整个 pack 每天都给你赚回时间。",[109,112,115,118,121],{"q":110,"a":111},"我写 Vue \u002F Svelte \u002F SolidJS，这 pack 还有用吗？","十个里有七个全框架通用：Figma Context MCP (#198)、Screenshot to Code (#313, 目标框架可配)、Tailwind v4 (#663)、Headless UI (#1984, 有 Vue 移植)、Playwright MCP (#3687)、Frontend Developer Agent (#4374)、Accessibility Tester (#4283)。React 专属的三个是 v0 (#630)、Onlook (#867)、Magic UI (#3047)。Vue 用 Headless UI 的 Vue 版 + Vue+Tailwind 社区套件；Svelte 用 Skeleton UI 作为 Tailwind 组件层。Pipeline 形状完全一样。",{"q":113,"a":114},"需要每个都装吗？能不能先上手三个？","先上三个：Figma Context MCP (#198)、Frontend Developer Agent (#4374)、Playwright MCP (#3687)。光这三个就够 agent 读 Figma 文件、对你的现有 repo 出代码、在真浏览器里验。再加 Tailwind v4 和 accessibility tester；可视化生成器（v0 \u002F Onlook \u002F Magic UI）是核心回路跑通后再插上的加速器。",{"q":116,"a":117},"整套跑下来一个月成本多少？","大头是 agent 背后的 LLM 账单 — 按量算 $20-60\u002F月（Claude \u002F GPT）。工具本身：Figma MCP 免费（你出 Figma personal access token）、Playwright MCP 免费、Claude Code agents 已经在你的 Claude Code 订阅里。v0 有比较慷慨的免费额度；Onlook 是开源的，自部署免费；Magic UI 和 Headless UI 全免费。Tailwind v4 免费。唯一的付费 SaaS 行项是 Vercel \u002F Cursor \u002F Claude 这种 agent 外壳。",{"q":119,"a":120},"agent 真能出能上生产的组件吗？还是我得全部重构？","实话：v0 和 screenshot-to-code 的第一版输出 merge 前一定要过一遍 — 命名、prop 边界、拆分、语义 HTML。Frontend Developer Agent (#4374) 你显式 prompt 它会做这步（「按 \u002Fcomponents 里现有模式重构，加 a11y 属性」）。把 AI 生成的 UI 当作 70% 的解 — 能编译能跑；剩下 30%（你的代码库约定、prop API、a11y、测试）是你赚工资的地方。",{"q":122,"a":123},"为啥 pack 里没有视觉回归工具（Chromatic \u002F Percy）？","Playwright MCP (#3687) 覆盖的是 agent 需要知道「组件功能是否对」的*功能*验证回路。视觉回归是另一回事，住在 CI 里、不在 agent 的脚手架回路里，Chromatic \u002F Percy \u002F Lost Pixel 这类工具适合在设计系统成熟到值得回归后再加。Pack v1 的边界是「axe 全绿 + Playwright 断言通过」就停；上线 10+ 个组件后再加视觉回归。",{"@context":125,"@type":126,"name":13,"description":127,"numberOfItems":128,"inLanguage":129},"https:\u002F\u002Fschema.org","ItemList","十个 AI 工具，覆盖 React \u002F Vue \u002F Svelte 工程师从设计交付到无障碍审核的完整 pipeline，按推荐安装顺序排列。",10,"zh-CN",[131,135,139],{"url":132,"anchor":133,"reason":134},"\u002Fzh\u002Fai-tools-for\u002Ffrontend","TokRepo 前端 AI 工具集","本 pack 的工具属于更大的前端类目",{"url":136,"anchor":137,"reason":138},"\u002Fzh\u002Ftopics","浏览其他主题 pack","相邻主题包含 MCP、浏览器自动化、agent 框架等",{"url":140,"anchor":141,"reason":142},"\u002Fzh\u002Ffeatured","TokRepo 精选资产","这十个属于更大的 agent-ready 精选目录",[144,148,152],{"claim":145,"source_name":146,"source_url":147},"Figma Context MCP 是一个把 Figma 设计上下文提供给 AI coding agent 的 MCP 服务器","Figma Context MCP GitHub 仓库","https:\u002F\u002Fgithub.com\u002FGLips\u002FFigma-Context-MCP",{"claim":149,"source_name":150,"source_url":151},"Tailwind CSS v4 提供 CSS-first 配置和零运行时引擎","Tailwind CSS v4 发布说明","https:\u002F\u002Ftailwindcss.com\u002Fblog\u002Ftailwindcss-v4",{"claim":153,"source_name":154,"source_url":155},"Playwright 提供跨浏览器端到端测试自动化","Playwright 官方文档","https:\u002F\u002Fplaywright.dev\u002F",950,"2026-05-22T13:00:00Z"]