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 6 servers and 5 skills are listed one by one with what each does to the bill — free, already yours, monthly or a one-off licence. Nothing is charged until you confirm it there, in Stripe’s own card frame on that page rather than a redirect, and each paid member keeps its own budget cap.
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.
A local server that connects the design file to the editor, 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.
For the marketing pages that live outside the application, so one desk covers both halves of the front end.
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 a subscription or a licence bought once, so the monthly figure is a price rather than an estimate: what moves it is adding or dropping a member, not how hard the stack is worked. The one assumption is that a one-off licence is spread over a year so it can sit in the same column as a subscription.
| Part | What you are paying for | Monthly, as quoted |
|---|---|---|
| Figma | Free | — |
| Supercharged Figma | from $19/mo | $19/mo |
| Imagegen | Free | — |
| Gitlab | Free | — |
| Netlify | Free | — |
| Webflow | Free | — |
| Skills | ||
| shadcn/ui | $45 · $3.75/mo over 12 months | $3.75/mo |
| Sprite Gen | $19 · $1.58/mo over 12 months | $1.58/mo |
| Shopify Liquid Themes | Free · context cost only | — |
| Webmcp | Free · context cost only | — |
| Avoid inline JavaScript | Free · context cost only | — |
| Everything above | $19 of servers plus $5.00 of skills, the same in a quiet month and a busy one | $24/mo |
Subscriptions at their monthly plan price; one-off licences spread over 12 months. One-off purchases in this stack total $64 — shadcn/ui $45, Sprite Gen $19 — paid once and spread here so they sit in the same column as a subscription. Everything arrives on one mcprush invoice, taken by Stripe from the card on your account, not one per publisher — mcprush.com is the merchant of record and each publisher is paid out of it.
Install only these and the bill is nothing: 5 servers and 3 skills, 2 of the 82 tools.
Left out, and what goes with it:
Supercharged Figma at from $19/mo. Each of those plans states the calls it includes in a month, and running past one never arrives as a larger invoice: the gateway refuses the call over the allowance and returns an MCP error naming the plan. The figure above is what the stack costs in a busy month as well as a quiet one — what a heavy month changes is which plan you need, not what this one bills.
Budget caps are set per install and enforced at the gateway, so a retry loop is refused at the cap rather than left to run through an allowance overnight.
One step per part, in the order they are useful: connect what the work reads before what it writes, and install the skills that decide how the work is done last. Each step is a command you can read before you run it.
npx mcprush@latest stack add design-to-codeNothing in this stack installs from one command today: 11 members are either paid, run from its own source, or a skill with its own command — the steps above name each one. Nothing is connected until you approve it.
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 | 29 |
| Figma | not imported | not recorded |
| Gitlab | not imported | not recorded |
| Netlify | not imported | not recorded |
| Webflow | 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 4 members of 6 have 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.
Reads the branch, runs it in a throwaway sandbox, and leaves the review on the merge request before a human opens it.
Takes a green branch to a running deployment, and keeps the DNS, the cluster and the access list honest on the way.
Writes the migration, proves it on a branch, and says what it will do to the table before it touches the real one.