Connects Claude to your Figma files through the MCP server so you can pull design context, screenshots, variables, and assets directly into your implementation workflow. The skill enforces a specific flow: grab structured design data with get_design_context, fetch visual references with get_screenshot, then translate the React and Tailwind output into your project's conventions and design tokens. It's opinionated about reusing your existing components and color system rather than duplicating code. The asset handling is notable because it serves images and SVGs through localhost endpoints, which means no placeholder hunting or icon package bloat. Best for teams doing regular design to code work where you want the handoff automated but still need control over how designs map to your actual codebase.
- skills.sh installs
- 331
- GitHub stars
- 33.2K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add davila7/claude-code-templates --skill figma --agent claude-codeInstalls into .claude/skills of the current project.
Files
Figma MCP
Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.md.
Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.
Required flow (do not skip)
- Run get_design_context first to fetch the structured representation for the exact node(s).
- If the response is too large or truncated, run get_metadata to get the high-level node map and then re-fetch only the required node(s) with get_design_context.
- Run get_screenshot for a visual reference of the node variant being implemented.
- Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
- Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible.
- Validate against Figma for 1:1 look and behavior before marking complete.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/davila7/claude-code-templates
- Categories
- Backend & APIs, AI & Agent Building, Debugging, Design & UI/UX
- First seen
- Jun 3, 2026
More from davila7/claude-code-templates
All 618- Zapier Workflows330
- Scikit Survival329
- Axolotl328
- Developer Growth Analysis328
- Alphafold Database326
- Llm App Patterns326
- Gh Fix Ci325
- Pyhealth325
- Scanpy325
- Aeon324
- Web To Markdown322
- Biomni321
- Constitutional Ai321
- Nanogpt320
- Sglang320
- Uspto Database318
- Receiving Code Review317
- Transformer Lens Interpretability317
- Skypilot Multi Cloud Orchestration316
- Llava315
- Mdr 745 Specialist315
- Create Pr314
- Fda Database313
- Astropy312
Recommended
More Backend & APIs
google-adsjdrhyne/agent-skillsQuery, audit, and optimize Google Ads campaigns. Supports two modes: (1) API mode for bulk operations with the google-ads Python SDK, (2) attached-browser mode 331skills.sh installs
deep-researchglebis/claude-skillsThis skill should be used when conducting comprehensive research on any topic using the OpenAI Deep Research API. It automates prompt enhancement through intera330skills.sh installs
bun-react-ssrsecondsky/claude-skillsUse when building server-rendered React with Bun, including streaming SSR, hydration, renderToString, or custom SSR without a framework.330skills.sh installs
pulumi-typescriptdirien/claude-skillsScaffolds Pulumi TypeScript infrastructure-as-code projects, writes IaC code with proper resource configuration, manages Pulumi ESC environments for centralized329skills.sh installs
cloudflare-imagesjezweb/claude-skillsStore and transform images with Cloudflare Images API and transformations. Use when: uploading images, implementing direct creator uploads, creating variants, g328skills.sh installs
load-test-builderpatricio0312rev/skillsCreates load and performance tests with k6, Artillery, or autocannon to validate system behavior under stress. Use when users request "load testing", "performan328skills.sh installs