Skip to content
Get packs

Build UI from Figma

Builds UI matching a Figma file or design image using the project's existing tokens and components.

Source Download skill
Repository
jakubkrehel/skills
Stars
10,236
Licence
MIT
Files
3 files

What it does

When installed, the agent reads a design from a Figma link (via the Figma MCP tool) or from a screenshot, maps its spacing, colours, type and components onto the project's existing tokens and components, and builds the matching interface. It then renders the result at each frame's width and compares it element by element against the design, fixing mismatches and reporting any leftover differences, unsupported states or missing backend wiring.

Great for

  • Front-end developers turning Figma frames into code that must match closely
  • Designers checking whether a build faithfully follows their file
  • Teams with an established design token and component library

Skip it if

  • Projects without a design system or tokens, since mapping has nothing to match against and values may be guessed
  • Screenshots-only work where measurements are estimates and precise matching is not reliable
  • Designs that break accessibility or domain rules, which this skill defers to other skills rather than resolving

Try asking

  • “Build the pricing section from this Figma link so it matches the design and our existing tokens”
  • “Implement the mobile and desktop frames of this dashboard and compare the result to the designs”
  • “Turn this screenshot into a React card component using our existing components and report any deviations”
Step-by-step guide: how to use Build UI from FigmaInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    build-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip build-design.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip build-design.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide a Figma link rather than a screenshot so values are exact instead of estimated
  • Name the specific frames in scope to keep the diff limited to what the design shows
  • Have a browser available so the agent can screenshot each width and actually verify the match

What's inside

  • agents/openai.yaml
  • figma.md
  • SKILL.md

Redistributed unmodified from jakubkrehel/skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.