build-design
- Use it when:
- You have a Figma frame or a screenshot of a design and want it built in your app as drawn.
- It does:
- Reads exact values through the Figma MCP server, maps each to an existing token or component, builds only what the design shows, then compares element by element.
- You get:
- The built UI and a table of each element's design value, built value and status, plus lists of unwired data, missing states and rule conflicts.
- From an image:
- It states the scale it assumed, treats every measurement as an estimate and asks for the Figma link if one exists.
- Won't:
- Add tokens, variants or arbitrary values to hit a number, design states the file doesn't draw, or touch code around the piece.
A Figma link needs the Figma MCP server connected; from an image it works without one, treating every measurement as an estimate.
TL;DR
One of Jakub Krehel's interface skills, but it owns no design rules: the design decides, and where it breaks a rule, such as contrast or focus, the agent builds it as drawn and reports the conflict, naming the better-* skill that owns that rule. From a Figma link it first searches its tools for the Figma MCP server, asks you to sign in or connect one rather than build from guesswork, and reads each frame's design context, variables and screenshot, trusting named variables over raw hex, Code Connect mappings (Figma's links from component to code) over name matches, and auto layout over absolute positions. It reads your tokens and components before writing anything; a raw value with no token rounds to the nearest one and is reported, and it stops to ask when rounding would visibly change the design, such as more than 2px or a different color step. Data with no backend yet is fed by props and listed as unwired. With a browser it screenshots each frame width beside the design and fixes its own mismatches until only roundings and questions remain; without one it hands over the local URL and says the comparison is unverified.
Summarizes the skill at 60bf140.
npx skills add https://github.com/jakubkrehel/skills --skill build-design skills.sh pageSource on GitHubAll skills from jakubkrehel/skills
- Total Downloads
- 7,600 on skills.sh, Nov 9, 2026
- Repo stars
- 11,765 jakubkrehel/skills
- First seen
- Oct 6, 2026 on skills.sh
Weekly values
| Week to | Installs |
|---|---|
| Sep 21 | 0 |
| Sep 28 | 0 |
| Oct 5 | 0 |
| Oct 12 | 994 |
| Oct 19 | 1,171 |
| Oct 26 | 1,377 |
| Nov 2 | 1,967 |
| Nov 9 | 2,028 |
| Category |
Taste for interfaces that don't look generated: direction, motion and accessibility. Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills. |
|---|---|
| Type |
A multi-step process the agent follows: interview, debug, run a TDD loop, review. |
| Effect |
Its own steps create or change files, git state or local tools. |
| Needs |
Needs an MCP server connected. An account, API key or paid plan with an outside service. |
| Publisher |
Everyone else. Unverified vendor claims default to community. |
| Topics | |
| Stack |
SKILL.md
From jakubkrehel/skills at 60bf140. Checked daily, last changed Nov 7, 2026.
Frontmatter
name: build-design
description: Builds UI from a Figma file or a design image so it matches the design, using the project's existing tokens and components.Build design
This skill turns a design into code that matches it. It reads the design at its source, builds with what the project already has, then compares the result against the design before calling it done.
The design decides. Values come from the design file, never from your taste or a pattern you liked elsewhere. A change the design does not show is a deviation, and a deviation is the user's call.
It owns no domain rules. Where the design breaks one, build it as designed and report the conflict with its owner. Contrast is a requirement in better-accessibility and a measurement in better-colors. Focus and semantics are better-accessibility, type is better-typography and spacing and structure are better-layout. Palette is better-colors, copy is better-writing and surfaces, icons and motion are better-ui. Reviewing finished work is interface-review, exploring alternatives is variant and stress testing a component is break.
1. Read the design at its source
A Figma link means the Figma MCP. Search the available and deferred tools for figma before saying it is unavailable, since the server often sits under a name you did not expect. A server that lists only an authenticate tool is connected but signed out, so ask the user to authenticate. With no Figma tool at all, ask the user to connect one, and do not build from memory or guesswork meanwhile. figma.md holds which tools to call and what each returns.
A screenshot or exported image has no values to read. Sizes are ratios to the capture, so state the scale you assumed and treat every measurement as an estimate. Ask for the Figma link when one exists, since it replaces the whole estimate.
Scope the run to the frames named. Frames that show the same thing at different widths are one piece at several breakpoints, not separate pieces.
This step is done when you hold a screenshot of every frame in scope and its values for spacing, size, radius, color, type and the components used. From a Figma file they are exact. From an image they are estimates at the scale you stated.
2. Map the design onto the project
Read the project's tokens and component library before writing anything. Then map every design value to what exists:
| In the design | In code |
|---|---|
| A bound variable or style | The token with the same name or the same value |
| A raw value that equals a token | That token |
| A raw value with no token | The nearest existing token, listed in the report as rounded |
| A component instance | The project's component of that name, with the variant the design shows |
| A component instance with no project equivalent | Plain markup in place, listed as a deviation, and ask whether a component should exist |
| A one-off group of layers | Plain markup in place, not a new component |
Never add a token, a component variant or an arbitrary value to hit a number. Stop and ask which way to go when rounding would visibly change the design. That means more than 2px on spacing or size, or a color landing on a different step.
Check what data the design needs and wire it to what exists. Where the backend for part of it does not exist yet, build that part as UI fed by props and name it in the report as unwired.
3. Build only what the design shows
Implement the frames, the breakpoints the frames define and the states the file draws, such as hover, empty or error. A state the file does not draw is not yours to design. Leave it to the existing component's default and list it as missing.
Leave everything around the piece as it was. No neighbouring copy edits, no icon swaps, no "while I was here" cleanups. A diff wider than the design is the most common way this goes wrong.
4. Compare against the design
Render the build at each frame's width beside the design screenshot and walk it element by element. Compare the properties Read the design at its source collected. "Gap is 12px, design is 16px" is a finding. "Feels a bit tight" is not.
With a browser at hand, screenshot each width and compare. Without one, hand over the local URL with the widths to check and say the comparison is unverified. Do not report a match you did not look at.
Fix every mismatch you caused, then compare again. This step is done when every remaining difference is a rounding or a question.
5. Report and stop
| Element | Design | Built | Status |
|---|---|---|---|
| Card padding | 20px | p-5 |
Matches |
| Title size | 15px | text-sm, 14px |
Rounded to token |
| Badge | Filled pill | Text label | Deviates, asked: no badge component exists |
Then list, one line each, and omit a list with nothing in it:
- Unwired. What renders from props until the backend exists.
- Missing states. What the design does not draw.
- Domain conflicts. Where the design breaks a rule, with the owning skill.
Close by saying where the build is running and at which widths you compared.
Before you finish
| You notice | Fix |
|---|---|
| "Figma isn't connected" written before any tool search | Search the tools for figma first |
| Values in code that appear in no Figma response, only in the screenshot | Read them from the design context |
An arbitrary utility such as w-[343px] or a raw hex in the diff |
Map it to a token, or ask if rounding shows |
| A new file under the components directory for a frame that is not a component | Inline it as plain markup |
| A loading or error branch the design never drew | Remove it, keep the default and list it as missing |
| Files in the diff that no frame touches | Revert them |
| A contrast or focus change the design does not show | Restore the design and report the conflict with its owner |
| A comparison claimed with no screenshot of the build | Render each frame width, or say it is unverified |
| Hard-coded sample data with no mention in the report | List it under Unwired |