Reads the Figma file, builds the component, and ships the page without redrawing the design in CSS by eye.
Built for: The front-end engineer handed a file with 40 frames and a deadline that assumed they were already components.
The button opens the checkout, where the 5 servers and 5 skills are listed one by one. Every member is free, so the checkout lists them and asks for no card.
The reason to buy a stack rather than five listings: each line below needs more than one member connected at the same time.
Read design context, tokens and variables out of Figma instead of measuring screenshots.
Add, compose and fix shadcn components in the project, and keep the styling in one system.
Generate the illustrations and sprites a screen needs when the design file left them as placeholders.
Deploy the branch preview so the designer reviews the built page rather than the pull request.
What each part contributes, and why it was picked over the obvious alternative. Prices and permissions are read from the listings, so nothing here can disagree with the catalogue.
Turns a Figma frame into HTML or a React component and checks the render against the frame pixel by pixel, which is what removes the copying step between design and code.
The automation-heavy alternative, for teams that drive the file itself rather than only read from it.
Generates the image assets a screen needs, so a placeholder is not still a placeholder at review.
Where the component lands, and where the designer's comment becomes a diff.
Builds the branch preview, which is the only version of a page worth reviewing with the person who designed it.
Adds, searches, fixes and composes shadcn components, keeping the implementation inside one system instead of a folder of one-off CSS.
Produces clean 2D sprites and animation atlases with a repeatable pipeline, for interfaces with illustration or game-like elements.
The storefront half of design-to-code: Liquid sections and blocks with correct schema and translation keys.
Adds browser-native structured tools to the page itself, which is how a front end becomes usable by an agent rather than only by a person.
Reviews what the built page actually ships — inline script, bundle behaviour — because a design implemented with inline handlers fails a CSP later.
Every member is free, so the monthly figure is $0 whatever you do with the stack: nothing here is billed by the call, and only adding a paid member could change it.
| Part | What you are paying for | Monthly, as quoted |
|---|---|---|
| Figma | Free | — |
| Supercharged Figma | Free | — |
| Imagegen | Free | — |
| GitLab | Free | — |
| Netlify | Free | — |
| Skills | ||
| shadcn/ui | Free · context cost only | — |
| Sprite Gen | Free · context cost only | — |
| Shopify Liquid Themes | Free · context cost only | — |
| Webmcp | Free · context cost only | — |
| Avoid inline JavaScript | Free · context cost only | — |
| Everything above | $0 of servers plus $0 of skills, the same in a quiet month and a busy one | $0/mo |
Subscriptions at their monthly plan price; one-off licences spread over 12 months.
Install only these and the bill is nothing: 5 servers and 5 skills, and all 129 tools.
Nothing in this stack carries a call allowance, so nothing here can run out before the month does. The bill is decided when you install it, not when you use it.
The spend cap is one figure for the whole account, set in your dashboard and checked when an order is placed. On the call path what stops a retry loop is the plan's call allowance and its rate limit, and a refused call is never billed.
The steps below come before the install lines: what to decide and scope before connecting anything, in the order it matters. The lines themselves follow, part by part, for the client you pick.
npx mcprush@latest stack add design-to-code writes all 5 servers into Claude Code’s config in one go — or run the lines below one by one. The 5 skills are not included — add them with lines 06–10.
FIGMA_TOKEN — Figma personal access token (Settings -> Security -> Personal access tokens, scope "File content: read")OPENAI_API_KEY — Your OpenAI API keyGITLAB_PERSONAL_ACCESS_TOKEN — GitLab personal access token for local stdio useSet them where you start Claude Code — export FIGMA_TOKEN=… in your shell profile on macOS and Linux, setx FIGMA_TOKEN "…" on Windows, then open a new terminal. Claude Code reads them at start; the config keeps only the names.
# 01 · Figma
claude mcp add --scope user --env 'FIGMA_TOKEN=${FIGMA_TOKEN}' --transport stdio mehmoodqureshi-figma-mcp '--' npx -y @mehmoodqureshi/figma-mcp
# 02 · Supercharged Figma
claude mcp add --scope user supercharged-figma-mcp '--' npx -y supercharged-figma-mcp
# 03 · Imagegen
claude mcp add --scope user --env 'OPENAI_API_KEY=${OPENAI_API_KEY}' --transport stdio imagegen-mcp '--' npx -y imagegen-mcp
# 04 · GitLab
claude mcp add --scope user --env 'GITLAB_PERSONAL_ACCESS_TOKEN=${GITLAB_PERSONAL_ACCESS_TOKEN}' --transport stdio zereight-gitlab-mcp '--' npx -y @zereight/mcp-gitlab
# 05 · Netlify
claude mcp add --scope user netlify-mcp '--' npx -y @netlify/mcp
# 06 · shadcn/ui
npx mcprush@latest skill add shadcn-ui/shadcn-ui
# 07 · Sprite Gen
npx mcprush@latest skill add aldegad/sprite-gen
# 08 · Shopify Liquid Themes
npx mcprush@latest skill add benjaminsehl/shopify-liquid-themes
# 09 · Webmcp
npx mcprush@latest skill add qdhenry/webmcp
# 10 · Avoid inline JavaScript
npx mcprush@latest skill add thedaviddias/avoid-inline-javascriptnpx).Set-ExecutionPolicy -Scope CurrentUser RemoteSigned once, or type npx.cmd instead of npx (codex.cmd, gemini.cmd, grok.cmd likewise). PowerShell 7 needs neither.Nothing is connected until you approve it in Claude Code. mcprush is not in the path and meters nothing here.
Installed together, these tool surfaces add up. It is the first thing a security reviewer asks for, so what has been counted — and what nobody has counted yet — is on the page rather than in a PDF.
| Member | Tool surface | Write tools |
|---|---|---|
| Supercharged Figma | imported | 71 |
| GitLab | not imported | not recorded |
A stack's blast radius is the union of its members, not the worst of them. That union cannot be taken here, because 1 member of 5 has no imported tool surface — so the figure a review asks for is missing rather than low, and a member marked not imported is one nobody has counted rather than one that cannot write.
A stack is a default, not a verdict. These are the substitutions the maintainer would make, and what each one costs or saves.
For work that is about tokens and variables rather than automation, the console-oriented server reads the file more directly and asks for less access.
Take the platform your previews already build on; the desk only needs the URL a designer can open.
Written by the maintainer, kept on the page rather than in a support thread.
It cannot design. Everything here starts from a decision somebody made in the file; a stack does not have taste.
Two Figma servers are here because they read differently, not because you need both. Keep the one your file works with.
It does not audit accessibility. That is the QA desk's job, and a design-to-code pass that skips it produces beautiful unusable pages.
A stack has an owner: whoever keeps it re-checks the combination when a member changes, and the members themselves are published by the people named on each row.
Tools to inspect code changes, run checks and prepare a pull request review.
Takes a green branch to a running deployment, and keeps the DNS, the cluster and the access list honest on the way.
Tools to prepare database changes and review their effects before rollout.