figma-to-code

12

Design-to-code workflow patterns for Figma. Assumes Figma MCP server provides design data. Converts design tokens to CSS/TypeScript, scaffolds components following Atomic Design, generates tests, and integrates with SpecWeave living docs. Activates for figma to code, implement design, convert figma to react, design tokens, component generation, figma url.

Also in: github

Third-Party Agent Skill: Review the code before installing. Agent skills execute in your AI assistant's environment and can access your files. Learn more about security

Installation for Agentic Skill

View all platforms →
skilz install anton-abyzov/sw-soccer-manager/figma-to-code
skilz install anton-abyzov/sw-soccer-manager/figma-to-code --agent opencode
skilz install anton-abyzov/sw-soccer-manager/figma-to-code --agent codex
skilz install anton-abyzov/sw-soccer-manager/figma-to-code --agent gemini

First time? Install Skilz: pip install skilz

Works with 22+ AI coding assistants

Cursor, Aider, Copilot, Windsurf, Qwen, Kimi, and more...

View All Agents
Download Agent Skill ZIP

Extract and copy to ~/.claude/skills/ then restart Claude Desktop

1. Clone the repository:
git clone https://github.com/anton-abyzov/sw-soccer-manager
2. Copy the agent skill directory:
cp -r sw-soccer-manager/fantasy-league-simulator-011CUyYf2FjxNwxxVN18853h/plugins/specweave-figma/skills/figma-to-code ~/.claude/skills/

Need detailed installation help? Check our platform-specific guides:

Related Agentic Skills

Agentic Skill Details

Type
Technical
Meta-Domain
development
Primary Domain
javascript
Market Score
12

Report Security Issue

Found a security vulnerability in this agent skill?