What is the build-design skill?
The build-design skill turns a design into code that matches it. It reads values at the source, maps them onto your project's tokens and components, builds only the frames shown, compares the render with the design, and reports every rounding, deviation and unwired part. The design decides, never taste.
Build-design follows five steps: read the design, map it onto the project, build only what is drawn, compare against the design, then report and stop. Its stance is that the design decides and a change the design does not show is the user's call.
It owns no domain rules. When a design breaks one, the skill builds it as designed and reports the conflict with its owning skill, such as contrast with better-accessibility.
Reading the source
A Figma link means the Figma MCP, and the skill searches the available tools before declaring it missing. A screenshot has no values, so sizes become ratios to the capture, with the assumed scale stated.
Mapping values onto the project
- A bound variable or style becomes the token with the same name or value.
- A raw value with no token becomes the nearest existing token, listed in the report as rounded.
- A component instance becomes the project's component with the variant the design shows.
- Rounding that moves spacing or size by more than 2px, or lands a color on a different step, stops the run for a question.
Who it is for
Best for
- Implementing frames in a codebase that already has tokens and a component library.
- Teams that need an element by element report instead of a vague claim of a match.
Not for
- Reviewing finished work, which belongs to interface-review, or exploring alternatives and stress testing components, which belong to the variant and break skills.
- Cloning a design from a flat picture. Related: image-to-code, figma-mcp and framelink-figma-mcp.
Use it with UiChemy
Build-design writes code, while UiChemy Figma to WordPress converts the Figma file into an editable WordPress page. Choose by destination: a coded app for this skill, WordPress for UiChemy. Get Started on uichemy.com.
How to install Build Design Skill: Turn Figma or Images Into Matching UI
git clone https://github.com/jakubkrehel/skills.gitClone the repository
Run
git clone https://github.com/jakubkrehel/skills.git. The skill is in skills/build-design.Copy the folder
Copy skills/build-design to your agent's skills location and keep figma.md beside SKILL.md. It lists which Figma tools to call and what each returns.
Connect Figma
For a Figma link, your agent needs a Figma MCP tool connected and signed in. Without one the skill asks you to connect one and does not build from memory.
Plugin option for Claude Code
Run
/plugin marketplace add jakubkrehel/skillsand/plugin install interfaces@interfaces, the commands documented in the README.
Check that it loaded
Ask it to build one named frame. It should finish with an element table of design against built values and say where the build runs and which widths it compared.
Key features
- Source reading firstA Figma link triggers the Figma MCP, with a tool search before any claim that it is unavailable. A signed out server is reported as connected but needing authentication.
- Image estimates stated openlyFrom a screenshot, sizes are ratios to the capture, the assumed scale is stated and every measurement is labelled an estimate. The skill asks for the Figma link when one exists.
- Scoped to named framesThe run covers the frames you name. Frames that show the same thing at different widths are treated as one piece at several breakpoints.
- Token and component mappingEvery design value maps to an existing token or component, and a component instance with no match becomes plain markup in place and is listed as a deviation.
- No invented tokensIt never adds a token, a component variant or an arbitrary value to hit a number, and it stops to ask when rounding would visibly change the design.
- Build only what is drawnStates the file does not draw are left to the component default and listed as missing. Neighbouring copy edits and cleanups are excluded from the diff.
- Render and compareThe build is rendered at each frame's width beside the design screenshot and walked element by element. Without a browser it hands over a local URL and says the comparison is unverified.
- Findings are measurableA gap of 12px against a design of 16px is a finding, and a feeling that it looks tight is not.
- Structured reportAn element table shows design, built and status, followed by lists for unwired parts, missing states and domain conflicts.
- Pre-finish checksA table catches arbitrary utilities like w-[343px], raw hex values, new component files for non-components and files no frame touches.
Frequently asked questions
What does the build-design skill do?
It builds UI from a Figma file or a design image so the result matches the design, using your project's existing tokens and components. It reads the design at its source, maps values onto the codebase, builds only the drawn frames and compares the render before reporting.
How do I install build-design?
Clone jakubkrehel/skills and copy skills/build-design, with figma.md, into your agent's skills folder. In Claude Code you can run the plugin marketplace add and plugin install commands from the README. Connect a Figma MCP tool if you plan to build from a Figma link.
Does it need the Figma MCP?
For a Figma link, yes. The skill searches your tools for Figma before saying it is unavailable, and if none exists it asks you to connect one instead of building from memory. A screenshot works without it, but every measurement is then an estimate.
What happens when a design value has no token?
It uses the nearest existing token and lists the value in the report as rounded. It will not add a token or arbitrary value to hit a number, and if rounding moves spacing or size by more than 2px, or shifts a color to another step, it stops and asks.
Which AI coding agents can use build-design?
The README documents a Claude Code plugin install, and the skill folder includes an agents/openai.yaml file. For other agents, copy the folder to their skills location. The README lists no other agents, so confirm yours reads SKILL.md folders.
Will it add loading or error states the design lacks?
No. A state the file does not draw is left to the existing component's default and listed as missing, because designing it is not the skill's job. The same applies to neighbouring cleanups, which it keeps out of the diff.
What if the design breaks an accessibility rule?
It builds the design as drawn and reports the conflict with its owning skill. Contrast is a requirement in better-accessibility and a measurement in better-colors, so a low contrast pair is flagged for the user and never silently changed.