Guide · Agent skill
How to use the Build UI from Figma agent skill (build-design)
Updated · written with AI from the project's own documentation and checked against our catalogue data
build-design is an agent skill that turns a Figma frame or a design image into interface code that matches the design. It uses the project's existing design tokens and components rather than inventing new ones. This guide explains what the skill does, how to install it, how to trigger it with a normal request, and what it needs before it can work well.
Build UI from Figmajakubkrehel/skills · MIT Download the skill Quick start
- 1Download and unzip the skill. Download the ZIP from this page and unzip it into ~/.claude/skills/ or into a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings, then Capabilities, then Skills.
- 2Connect Figma MCP. Connect the official Figma MCP server and authenticate it, so the agent can read frames from Figma links.
- 3Confirm your project has tokens and components. The skill maps design values onto existing tokens and components, so the project needs a design token and component library.
- 4Send a natural request with the link. Ask the agent to build a named frame from your Figma link, using the project's existing components.
- 5Review the mapping and questions. The agent may ask about rounding or missing components before it builds. Answer those questions, because it treats changes the design does not show as your decision.
- 6Check the comparison report. Read the table of matches and deviations, plus the Unwired, Missing states and Domain conflicts lists.
What the build-design skill makes the agent do
An agent skill is a folder of instructions that an AI agent loads when a task matches it. This one covers building UI from a design. The agent reads the design, maps its spacing, colours, type and components onto what your project already has, and builds the matching interface.
After building, the agent renders the result at each frame's width and compares it element by element against the design. It fixes any mismatches it caused and reports what is left: rounded values, unsupported states, and missing backend wiring.
- Reads a design from a Figma link through the Figma MCP tool, or from a screenshot.
- Maps design values to existing tokens and components, and lists any rounding in its report.
- Builds only the frames, breakpoints and states the design shows.
- Compares the build against the design and reports a table of matches and deviations.
Install the build-design skill
Download the ZIP from this page and unzip it into one of two locations. Use ~/.claude/skills/ to make the skill available in all your projects, or use .claude/skills/ inside a single project folder to limit it to that project.
If you use the Claude apps, you can instead upload the skill under Settings, then Capabilities, then Skills.
- Personal install: unzip into ~/.claude/skills/ so the build-design folder sits there.
- Project install: unzip into the project's .claude/skills/ folder.
- Claude apps: upload the skill under Settings, then Capabilities, then Skills.
~/.claude/skills/build-design/SKILL.mdConnect Figma so the agent can read your designs
For Figma links, the skill needs the official Figma MCP server connected and authenticated. If the server is connected but signed out, the agent will ask you to authenticate. If no Figma tool is available at all, the agent will ask you to connect one and will not build from memory in the meantime.
Without Figma access you can still work from an exported image. The skill then treats every measurement as an estimate at a scale it states, so a Figma link gives much more precise results.
- Figma MCP server connected and authenticated (required for Figma links).
- Screenshot or image input works, but measurements are estimates.
- Use a Figma link that includes the frame's node-id, or list the frames first so you confirm which ones to build.
Trigger the skill with a natural request
You do not need a special command. Describe the job in plain language and include the Figma link or attach the image. The agent matches the request to the skill's description: building UI from a Figma file or design image so it matches the design, using the project's existing tokens and components.
Name the frames you want if the file contains several, because the skill builds only the frames in scope. Frames that show the same thing at different widths count as one piece at several breakpoints.
- Build this frame from Figma in our project, using our existing components: [Figma link]
- Match this screenshot in the project's tokens and components, and tell me any values you had to estimate.
- Build the mobile and desktop frames of this card, and compare each width against the design.
What the agent does with the design
The skill reads the design at its source, reads the project's tokens and component library, and then maps each value. A bound variable or style maps to the token with the same name or value. A raw value that equals a token maps to that token. A raw value with no token maps to the nearest existing token, and the report lists it as rounded.
The skill does not add tokens, component variants or arbitrary values to hit a number. If rounding would visibly change the design, it stops and asks you which way to go. A change the design does not show is treated as a deviation for you to decide.
- A component instance maps to the project's component of that name, with the variant the design shows.
- An instance with no project equivalent is built as plain markup and flagged as a deviation.
- A one-off group of layers is built as plain markup, not as a new component.
- Backend data that does not exist yet is built as UI fed by props and listed as unwired.
Safety notes: network access and scripts
The skill uses the network, because reading a Figma link goes through the Figma MCP server. It does not run scripts. Its files are agents/openai.yaml, figma.md and SKILL.md. The figma.md file lists the Figma tools to call and what each returns.
Check the Figma server you connect and the account you authenticate with, since the skill reads whatever design that account can access.
- Network: yes, for Figma links through the Figma MCP server.
- Scripts: none listed in the skill.
- Review the skill files before installing if your team needs to vet them.
Tips for better results
The skill works best when the project already has design tokens and a component library. Without them, there is nothing to match against and values may be guessed. Frames with precise spacing and named variables give the most exact builds.
Give the agent a browser for the visual comparison. Without one, the agent hands over the local URL and the widths to check, and says the comparison is unverified.
- Check the report's Unwired, Missing states and Domain conflicts sections before you accept the build.
- Accessibility, typography, layout and colour rules are handled by other skills; this one builds the design as drawn and reports conflicts.
- Ask for the Figma link instead of a screenshot whenever one exists.
What people use it for
- Turning a Figma product card into a component-based build that uses the project's existing spacing and colour tokens.
- Building a page at mobile and desktop widths and comparing each width against the design.
- Checking whether an existing front-end build faithfully follows the designer's Figma file.
- Building the UI for a screen whose backend does not exist yet, with the data wired later.
Frequently asked questions
How do I install the build-design skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project. In the Claude apps, you can upload it under Settings, then Capabilities, then Skills.
What does the build-design skill need to work?
For Figma links it needs the Figma MCP server connected and authenticated. It also needs a browser for the visual comparison, and a project with existing design tokens and a component library.
Is the build-design skill free?
The skill is listed under the MIT licence. Check the licence file in the skill's files for the full terms.
Can it build from a screenshot instead of Figma?
Yes, but the skill can only estimate measurements from a screenshot, at a scale it states. Precise matching is not reliable this way, so use a Figma link when one exists.
Why does the agent say the comparison is unverified?
That happens when no browser is available for the visual comparison. The agent then gives you the local URL and widths to check, and does not report a match it did not look at.
Does the skill run scripts or use the network?
It does not run scripts. It does use the network, because reading Figma links goes through the Figma MCP server.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use build-design if you build front-end code from Figma frames that must match closely, and your project already has design tokens and components. Pick something else if your project has no design system, or if you mainly work from screenshots, because measurements from images are estimates and the skill cannot match them precisely.
Download the skill