Kit IA pour Ingénieur Frontend

What's in this pack

This 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.

The 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.

Install in this order (design → component scaffold → style → test → a11y)

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. 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/marquee/sparkles in and you've shaved an hour.
8. 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.
9. 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.
10. 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/aria-label/focus-trap regressions that AI-generated UI fails at most.

How they fit together (ASCII)

   Figma file                Screenshot.png
        │                          │
        ▼                          ▼
  Figma Context MCP ──┐   ┌── Screenshot to Code
        (#198)        │   │       (#313)
                      ▼   ▼
           ┌─ Frontend Developer Agent ─┐
           │          (#4374)            │
           │   ↑                  ↑      │
           │   │                  │      │
           │  v0          Onlook         │
           │ (#630)        (#867)        │
           │ first-draft   in-context    │
           │ scaffold       edits        │
           └─────────┬───────────────────┘
                     ▼
         Tailwind v4 (#663)  ◀── Magic UI (#3047)  ── Headless UI (#1984)
         (utility classes)       (animated comps)    (a11y primitives)
                     │
                     ▼
          Playwright MCP (#3687)
          (browser test in real Chromium)
                     │
                     ▼
          Accessibility Tester (#4283)
          (axe-core + WCAG 2.1 AA)
                     │
                     ▼
                  Merge PR

The 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.

Tradeoffs you'll hit

• 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.
• 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/Onlook for specific moments.
• 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.
• 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.
• 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/Magic UI output. Radix is more complete; pick Radix if you're building a design system, Headless UI if you're building an app.
• 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).
• 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.

Common pitfalls

• 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.
• 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.
• 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.
• 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 / mobile tap / Enter key. The MCP catches these in 30 seconds; staring at the rendered page misses them every time.
• 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.
• 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.