[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-frontend-engineer-ai-toolkit-fr":3,"seo:pack:frontend-engineer-ai-toolkit:fr":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","Nouveau · cette semaine","Kit IA pour Ingénieur Frontend","Dix choix que le dev React\u002FVue\u002FSvelte sort quand l'IA doit vraiment livrer de l'UI : MCP Figma-vers-code, screenshot-to-code, v0, éditeur visuel Onlook, agent frontend-developer, Tailwind v4, Magic UI, Headless UI, Playwright MCP, testeur d'accessibilité. Ordre : design → scaffold → style → test → a11y.",[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",137,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",106,"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",210,"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",224,{"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精选",28,{"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.",190,{"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.",70,{"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.",134,{"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.",82,{"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...",26,"tokrepo install pack\u002Ffrontend-engineer-ai-toolkit",{"pageType":101,"pageKey":8,"locale":25,"title":102,"metaDescription":103,"h1":104,"tldr":105,"bodyMarkdown":106,"faq":107,"schema":123,"internalLinks":129,"citations":142,"wordCount":155,"generatedAt":156},"pack","Frontend Engineer's AI Toolkit — 10 Picks to Actually Ship UI","Figma Context MCP, Screenshot to Code, v0, Onlook, frontend-developer agent, Tailwind v4, Magic UI, Headless UI, Playwright MCP, Accessibility Tester. Curated install order for React\u002FVue\u002FSvelte engineers using AI from design hand-off to a11y audit. Install via TokRepo.","Frontend Engineer's AI Toolkit — A Design-to-A11y Pipeline","Ten picks in a deliberate order — design hand-off, component scaffold, styling, browser test, accessibility. Skip the framework debate, wire the pipeline, ship the screen.","## What's in this pack\n\nThis is the stack a React, Vue, or Svelte engineer reaches for when *AI actually has to ship the UI* — not the 40-tab \"AI tools for frontend\" listicle. Every pick here covers one rung of the same ladder: get the design into a format an agent can read, scaffold the component, style it with a system the agent already speaks, prove it works in a real browser, and check it doesn't fail an accessibility audit before merge.\n\nThe pack is **framework-leaning toward React** because that's where the tooling is densest right now, but seven of the ten work fine in Vue and Svelte too (Tailwind, Headless UI, Playwright MCP, the a11y agent, the frontend-developer agent, screenshot-to-code, Figma MCP). Magic UI, v0, and Onlook are React-only — swap them for your framework's equivalent if you live elsewhere.\n\n## Install in this order (design → component scaffold → style → test → a11y)\n\n1. **Figma Context MCP** (#198) — design input. Hand the agent a Figma URL, get back layout tree, styles, spacing, and component hierarchy. This is the upstream tap; without it, every later step is guessing what \"the design\" means.\n2. **Screenshot to Code** (#313) — design input, fallback. When the Figma file doesn't exist (legacy app, marketing PNG, competitor page), paste a screenshot and get React + Tailwind back. Pair with Figma MCP, don't pick between them.\n3. **v0 by Vercel** (#630) — component scaffold. Generates Tailwind+shadcn React from a prompt. Best for first-draft cards, forms, marketing sections you'll then hand-edit. Don't ship v0 output verbatim; it's a starting block.\n4. **Onlook** (#867) — visual code editor. Click an element in the running app, tell the agent what to change, get a code edit back. The Figma-meets-code workflow that v0 doesn't cover. React-first.\n5. **Claude Code Agent: Frontend Developer** (#4374) — generalist agent. The orchestrator that calls the MCPs above, reads your existing code, and produces the diff. Use as the daily driver; v0 and Onlook are point tools you invoke through this.\n6. **Tailwind CSS v4** (#663) — styling system. Pick this on day one — every AI tool above generates Tailwind classes by default. Fighting that with CSS-in-JS or vanilla CSS is a productivity tax. v4's CSS-first config + zero-runtime is the sweet spot.\n7. **Magic UI** (#3047) — pre-built animated components. 150+ React + Tailwind + Framer Motion components. When v0 spits out a static hero, drop a Magic UI shimmer\u002Fmarquee\u002Fsparkles in and you've shaved an hour.\n8. **Headless UI** (#1984) — unstyled accessible primitives. Use for menus, dialogs, comboboxes, listboxes — the components AI generators most often get a11y-wrong. Headless UI ships keyboard nav and ARIA correct; you only style.\n9. **Playwright MCP** (#3687) — browser test from the agent. After the component lands, the agent drives a real browser, takes a screenshot, asserts visible text, files the bug. Closes the \"works in my head\" loop.\n10. **Claude Code Agent: Accessibility Tester** (#4283) — a11y gate. Runs axe-core checks, reports WCAG 2.1 AA violations, suggests fixes. The last step before PR — catches the contrast\u002Faria-label\u002Ffocus-trap regressions that AI-generated UI fails at most.\n\n## How they fit together (ASCII)\n\n```\n   Figma file                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           │ first-draft   in-context    │\n           │ scaffold       edits        │\n           └─────────┬───────────────────┘\n                     ▼\n         Tailwind v4 (#663)  ◀── Magic UI (#3047)  ── Headless UI (#1984)\n         (utility classes)       (animated comps)    (a11y primitives)\n                     │\n                     ▼\n          Playwright MCP (#3687)\n          (browser test in real Chromium)\n                     │\n                     ▼\n          Accessibility Tester (#4283)\n          (axe-core + WCAG 2.1 AA)\n                     │\n                     ▼\n                  Merge PR\n```\n\nThe critical join is **Frontend Developer Agent + Tailwind + Playwright MCP**: the agent writes Tailwind classes (which everything in the catalog speaks), Playwright tells the agent whether the rendered DOM matches the design, and the loop closes without you alt-tabbing. Without Playwright MCP, the agent ships code that compiles and looks broken; without Tailwind, every generator outputs CSS that fights your codebase.\n\n## Tradeoffs you'll hit\n\n- **Figma Context MCP vs Screenshot to Code** — Figma MCP is structurally precise (auto-layout, tokens, component variants) but requires a Figma file with sane naming. Screenshot to Code is forgiving (any PNG) but loses semantic structure. Real teams use Figma MCP for design-system work and screenshot-to-code for the one-off competitor reference. Don't pick one.\n- **v0 vs Onlook vs the frontend-developer agent** — v0 is best for *new* components from a prompt (greenfield marketing page). Onlook is best for *editing* existing rendered UI (click and change). The agent is best for *changes inside your existing codebase* (read repo, modify three files, run tests). Most days, you'll use the agent and only drop into v0\u002FOnlook for specific moments.\n- **Tailwind v4 vs CSS-in-JS** — every code-gen tool in this pack outputs Tailwind by default. CSS-in-JS still works, but you'll spend hours rewriting AI output. The framework war is over for AI-assisted frontend; Tailwind won by accident.\n- **Magic UI vs writing it yourself** — Magic UI is great for hero-section sparkle and *very* tempting to overuse. A real product page with 8 animated sections feels like a tech demo. Pick 1-2 hero animations; keep the rest still.\n- **Headless UI vs Radix UI vs Ark UI** — all three solve the same problem. Headless UI is in this pack because it ships with Tailwind Labs, has the smallest API surface, and pairs cleanest with the v0\u002FMagic UI output. Radix is more complete; pick Radix if you're building a design system, Headless UI if you're building an app.\n- **Playwright MCP vs Cypress vs Vitest browser mode** — Playwright MCP is in this pack because the *agent* uses it. For human-run tests, Vitest browser mode is faster and Cypress is more mature. The MCP is for the agent's verification loop, not your CI suite (though it can be).\n- **Accessibility Tester (axe) vs manual a11y review** — automated tools catch ~40% of WCAG violations. The other 60% (keyboard nav flow, screen reader narrative, focus order) still needs a human or a more thorough audit. Don't ship just because axe is green.\n\n## Common pitfalls\n\n- **Over-relying on visual generation** — v0 and Onlook produce code that *looks* right and is structurally weird (nested div soup, no semantic HTML, missing labels). Treat their output as a starting block and refactor before merging. The agent (#4374) does this refactor pass if you ask explicitly.\n- **Ignoring accessibility until the end** — the a11y tester is the *gate*, not the *fix*. Use Headless UI primitives during scaffold (step 8) so violations are rare by the time you reach step 10. Fixing 200 axe violations on a finished page is a day; preventing them upstream is 10 minutes.\n- **Letting the agent write Tailwind config sprawl** — every prompt produces a new color name, a new spacing token, a new font size. After a week your `tailwind.config.ts` has 80 colors and no system. Define your design tokens *first*, then make the agent use them via the Figma MCP token export.\n- **Skipping Playwright MCP because \"the component looks fine\"** — the most common AI-frontend regression is a button that works visually but doesn't trigger on keyboard \u002F mobile tap \u002F Enter key. The MCP catches these in 30 seconds; staring at the rendered page misses them every time.\n- **Picking the wrong scaffold tool for the job** — using v0 to edit an existing logged-in dashboard is painful (no auth, no state). Using Onlook to design a fresh marketing page from a prompt is overkill (no rendered app yet). Match tool to phase: greenfield → v0, existing app → Onlook, deep code change → the agent.\n- **Treating MCPs as optional plumbing** — without Figma MCP, the agent has to guess what \"primary button\" means in your system. Wire the MCPs first (an afternoon), then the rest of the pack pays off daily.",[108,111,114,117,120],{"q":109,"a":110},"I work in Vue \u002F Svelte \u002F SolidJS — is this pack still useful?","Seven of ten work everywhere: Figma Context MCP (#198), Screenshot to Code (#313, configurable target), Tailwind v4 (#663), Headless UI (#1984, has Vue port), Playwright MCP (#3687), Frontend Developer Agent (#4374), and Accessibility Tester (#4283). The three React-only picks are v0 (#630), Onlook (#867), and Magic UI (#3047). For Vue, substitute the Vue ports of Headless UI plus the Vue+Tailwind community kits; for Svelte, use Skeleton UI as the Tailwind component layer. The pipeline shape is the same.",{"q":112,"a":113},"Do I need every tool, or can I start with three?","Start with three: Figma Context MCP (#198), Frontend Developer Agent (#4374), and Playwright MCP (#3687). With just those, an agent can read a Figma file, generate code against your existing repo, and verify the result in a real browser. Add Tailwind v4 and the accessibility tester next; the visual generators (v0, Onlook, Magic UI) are accelerators you bolt on once the core loop works.",{"q":115,"a":116},"How much does running this whole stack cost?","Most of the cost is the LLM bill behind the agents — budget $20-60\u002Fmonth for Claude or GPT depending on volume. The tools themselves: Figma MCP is free (you provide a Figma personal access token), Playwright MCP is free, the Claude Code agents are part of your Claude Code subscription. v0 has a generous free tier; Onlook is open-source and free to self-host; Magic UI and Headless UI are free. Tailwind v4 is free. The only paid SaaS line item is Vercel\u002FCursor\u002FClaude depending on which agent shell you live in.",{"q":118,"a":119},"Will the agent actually produce production-quality components, or am I refactoring everything?","Honest answer: first-draft output from v0 or screenshot-to-code needs a pass before merge — naming, prop boundaries, splitting, semantic HTML. The Frontend Developer Agent (#4374) does this refactor pass if you prompt for it explicitly (\"now refactor to match existing patterns in \u002Fcomponents and add the proper a11y attributes\"). Treat AI-generated UI as a 70% solution that compiles and runs; the last 30% (your codebase's conventions, prop API, a11y, tests) is where you earn your title.",{"q":121,"a":122},"Why is there no visual-regression tool (Chromatic, Percy) in this pack?","Playwright MCP (#3687) covers the *functional* verification loop the agent needs to know if the component works. Visual regression is a separate concern that lives in CI, not in the agent's scaffold loop, and tools like Chromatic \u002F Percy \u002F Lost Pixel are best added once you have a design system mature enough to regress against. For pack v1, the pipeline ends at \"axe is green and Playwright assertions pass\"; bolt visual regression on after you've shipped 10+ components.",{"@context":124,"@type":125,"name":126,"description":127,"numberOfItems":128,"inLanguage":25},"https:\u002F\u002Fschema.org","ItemList","Frontend Engineer's AI Toolkit","Ten AI tools for React\u002FVue\u002FSvelte engineers, in install order from design hand-off through accessibility audit.",10,[130,134,138],{"url":131,"anchor":132,"reason":133},"\u002Fen\u002Fai-tools-for\u002Ffrontend","AI tools curated for frontend work","Broader catalog of frontend-focused assets on TokRepo",{"url":135,"anchor":136,"reason":137},"\u002Fen\u002Ftopics","Browse other topic packs","Adjacent packs cover MCP servers, browser automation, agent frameworks",{"url":139,"anchor":140,"reason":141},"\u002Fen\u002Ffeatured","Featured assets on TokRepo","These ten picks live in the broader curated catalog of agent-ready assets",[143,147,151],{"claim":144,"source_name":145,"source_url":146},"Figma Context MCP is an MCP server that provides Figma design context to AI coding agents","Figma Context MCP on GitHub","https:\u002F\u002Fgithub.com\u002FGLips\u002FFigma-Context-MCP",{"claim":148,"source_name":149,"source_url":150},"Tailwind CSS v4 ships a CSS-first config and zero-runtime engine","Tailwind CSS v4 release notes","https:\u002F\u002Ftailwindcss.com\u002Fblog\u002Ftailwindcss-v4",{"claim":152,"source_name":153,"source_url":154},"Playwright provides cross-browser end-to-end testing automation","Playwright official docs","https:\u002F\u002Fplaywright.dev\u002F",980,"2026-05-22T13:00:00Z"]