Summary
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.
Install to Claude Code
npx -y skills add davila7/claude-code-templates --skill figma --agent claude-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
