Figma Build

by awdr74100

Figma Build is a Frontend skill for Claude Code, published by awdr74100 in figwright.

580 stars33 forkson awdr74100/figwrightAdded 2026/08/25+6% in starsRepository updated 2026/08/24

View source on GitHub Download repo ZIP

aiclaude-codecodegencodexcursordesign-to-codefigmafigma-mcpfigma-pluginfigma-to-codemcpmodel-context-protocol

Install in seconds

Install Figma Build

Copy Figma Build into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/awdr74100/figwright/tree/main/skills/figma-build ~/.claude/skills/figma-build

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/awdr74100/figwright.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/figma-build/SKILL.md in awdr74100/figwright
Installs to: ~/.claude/skills/figma-build
Collection: One of 4 skills cataloged from this repository
Category: Frontend — 567 skills

What Figma Build does

Figma Build turns code or a description into a Figma design in the connected file, reusing existing components, variables, and styles. Use it when creating or updating screens, components, or design-system assets in Figma from a spec or code artifact.

Figma Build is cataloged under Frontend on DirSkills. Figma Build comes from a repository tagged ai, claude-code, codegen, codex and cursor.

Documentation

README

Excerpt

figma-build

Turn code or a description into a Figma design that looks like it belongs in the file: reuse the components, variables, and styles that already exist, and only build what's genuinely missing. This is the mirror image of figma-codegen — same "reuse beats regenerate / reference tokens not literals" philosophy, pointed at the canvas instead of the codebase. This file is the router; deep detail lives in references/ — load a reference when its step is in play.

You operate on the connected Figma file (the plugin's current session). There is no fetch-by-URL; the user must have the target file open. Confirm a plugin is connected (ping) before building.

When to use

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Figma Build

What else does awdr74100 publish alongside Figma Build?
Figma Build is one of 4 skills that DirSkills catalogs from awdr74100/figwright, the repository it ships in. Its siblings there include Figma Codegen, Figma Typings Audit and MCP SDK Audit. Each one is a separate skill with its own page in this directory, installs the same way Figma Build does, and is maintained by awdr74100 in that same repository. The rest of the collection is listed on the awdr74100/figwright page.
How does Figma Build compare to other Frontend skills?
Figma Build ranks #485 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Figma Build against them. Open each page to compare what they document and how they install.