Create DESIGN.md
Extract a durable design document from evidence in a product or public website.
Figma Design to Code
Implement Figma designs using design context, real assets, and existing components.
The editorial verdict
Where it earns its place.
Fills the handoff between an approved Figma design and an existing application. It requires structured design context and a visual reference, then guides component reuse, Code Connect mappings, asset handling, and adaptation to the project's stack. This is an implementation workflow with a Figma MCP prerequisite, not a source of visual direction or a guarantee of pixel-perfect results.
Reach for it when
- Implementing an approved Figma screen in an existing codebase
- Reusing design-system components and exported assets during handoff
Think twice if
- You cannot connect your agent to the Figma MCP server
- You want to create or edit the Figma canvas itself
- You require a permissively licensed instruction package
Before you install
Compatibility & contents.
- Claude Code
- native
- Cursor
- native
- Codex
- partial
- Gemini CLI
- native
- GitHub Copilot
- native
- License
- Figma Developer Terms (Beta)
- Bundled scripts
- None found
- Hooks
- None found
Native: documented support. Partial: setup or adaptation may be needed. Not verified: the source has not established this fact. “None found” describes the inspected skill, not a security audit. Read the methodology.
Source context
The repository, in numbers.
Source: GitHub / figma/mcp-server-guide. Repository totals may be shared by several skills. Snapshot fetched ; these are not live counts. Check the snapshot date for freshness. Popularity is not a measure of design quality.
Watch the overlap.
No conflicts are recorded. This does not establish that every combination has been tested.