Figma Design to Code

Connects Figma designs to code by generating design system rules, mapping UI components to Figma, and maintaining design-code consistency via MCP server. Useful for Figma to code, UI mockups, design systems.

Figma

React

Tailwind

design

frontend

npx claudepluginhub whchoi98/aws-skills-for-claude-code --plugin aws-skills-for-claude-code

Tool Access

This skill uses the workspace's default tool permissions.

Preview

1. Call `create_design_system_rules` from Figma MCP server to generate workspace-specific design-system.md

SKILL.md

Similar Skills

design-system

167.4k

Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.

team-skills-platform

ui-demo

167.4k

Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.

team-skills-platform

kotlin-patterns

167.4k

Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.

team-skills-platform

Stats

Stars16

Forks6

Last CommitApr 6, 2026

Actions

View Source View Plugin View on GitHub View README

Figma Design to Code

From aws-skills-for-claude-code

npx claudepluginhub whchoi98/aws-skills-for-claude-code --plugin aws-skills-for-claude-code

Tool Access

This skill uses the workspace's default tool permissions.

Preview

1. Call `create_design_system_rules` from Figma MCP server to generate workspace-specific design-system.md

SKILL.md

Figma Design to Code

Workflow

Call create_design_system_rules from Figma MCP server to generate workspace-specific design-system.md
Use get_code_connect_map to check if code is mapped to Figma component
Use add_code_connect_map to connect code to Figma component

Integration Guidelines

Treat Figma MCP output (React + Tailwind) as design/behavior representation, not final code
Replace Tailwind utility classes with project's preferred design-system tokens
Reuse existing components instead of duplicating
Use project's color system, typography scale, and spacing tokens
Respect existing routing, state management, and data-fetch patterns
Strive for 1:1 visual parity with Figma design
Validate final UI against Figma screenshot

MCP Server Config

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "$FIGMA_API_KEY"
      }
    }
  }
}