20 Figma Design to Code alternatives
Figma Design to Code: Figma's official design-to-code skill — a mandatory pre-step to get_design_context that turns a Figma node into components matching your real stack, not generic markup. 20 agent skills do similar work, most sharing MCP, Frontend and React, ranked by how much they have in common with Figma Design to Code.
-
by Google Labs (Stitch)
Google's official Stitch skill that reverses the usual direction — turns an existing React, Vue, Angular or Vite front end back into an editable Stitch design.
Also: Design System, Frontend, MCP, React
-
by Vercel
Vercel's official skill for React component architecture — replace boolean prop proliferation with compound components, lifted state and explicit variants. Includes React 19 APIs.
Also: Design System, Frontend, React
-
by Google Labs (Stitch)
Google's official Stitch skill for generating and editing UI screens from text or images — with a mandatory prompt-enhancement pipeline before every call.
Also: Design System, Frontend, MCP
-
by Google Labs (Stitch)
Google's official Stitch skill for distilling a project into a DESIGN.md — a semantic design system agents can read before they generate anything.
Also: Design System, Frontend, MCP
-
by Google Labs (Stitch)
Google's official Stitch build skill for shadcn/ui — component discovery, installation, customisation and the conventions that keep a generated UI idiomatic.
-
by Ferousco-dev
Stops AI-generated UI from defaulting to purple gradients and templated hero sections by forcing a named design direction first.
Also: Design System, Frontend
-
by Vercel
Vercel's official guide to React's <ViewTransition> API — shared elements, list identity, Suspense reveals and directional route animations without an animation library.
-
by Datadog
Official Datadog skill that adds or repairs Browser RUM in a web app — detects framework, router, bundler and existing setup, then wires init once and verifies the build still passes.
-
by Google Labs (Stitch)
Google's official Stitch skill for autonomous multi-page site building — a baton file carries the next task from one agent iteration to the next.
-
by Cloudflare
Audits Core Web Vitals through the Chrome DevTools MCP server — LCP, INP, CLS plus FCP, TBT and Speed Index — and traces each one back to the render-blocking resource or layout shift causing it.
-
by Remotion
Remotion's official skill for scaffolding a programmatic video project in React and iterating on it in the Studio preview instead of re-rendering.
Also: React
-
by Cloudflare
Cloudflare's routing skill for Next.js on Workers — sends the agent to vinext, the Vite-based Next.js runtime Cloudflare now recommends ahead of OpenNext.
Also: React
-
by Vercel
Vercel Engineering's React and Next.js performance playbook as an agent skill — 70 rules across 8 categories, ordered by impact, for writing and refactoring fast components.
Also: React
-
by SerpApi
A protocol for measuring whether agents can discover and use your tool without being told about it — WITH/WITHOUT trials, binary scoring, and lift as the only metric. The subject under test is your docs, not the model.
Also: MCP
-
by OpenAI
OpenAI's skill for driving Linear through its MCP server: a read-first workflow for issue triage, sprint planning, documentation audits and workload balancing, with the MCP setup and OAuth steps written out.
Also: MCP
-
by Microsoft
Microsoft's official plugin that generates codeful MCP tools — a self-contained JS runtime plus JSON Schema metadata — and single-file HTML widgets to visualise their results.
Also: MCP
-
by Apollo GraphQL
Sets up Apollo MCP Server so an AI agent can call a GraphQL API as MCP tools — defining tools from named operations, or exposing introspect/search/validate/execute for open-ended schemas.
Also: MCP
-
by Agnost AI
Walks a coding agent through wiring Agnost AI conversation analytics into a Python or TypeScript app — inspecting existing OpenTelemetry first and only adding an SDK when the traces are not usable.
Also: MCP
-
by LaunchDarkly
Design a staged LaunchDarkly rollout — traffic steps, monitoring windows, regression thresholds and automatic rollback — and start it from your coding agent.
Also: MCP
-
by Notion
Notion's official meeting-prep skill: searches the workspace for context, enriches it with research, then writes an internal pre-read and an external agenda back into Notion.
Also: MCP
