From Figma to AI Design Skills
Transform your design system into AI-readable skills
How It Works
01
Paste Figma URL
Drop any Figma file link — we connect to your design system via Figma API.
02
Generate Skills
We extract your design DNA — colors, typography, spacing, components — and generate a SKILL.md file.
03
Download or Publish
Download for Claude Code, Cursor, Codex, Gemini CLI — or publish directly to GitHub and our leaderboard with one click.
Supported Formats
Same design skill, packaged for your workflow. Download the zip and place files in the matching directory.
🌐
Universal SKILL.md
Works with any AI tool
Claude Code
.claude/skills/
Cursor
.cursor/skills/
DESIGN.md
Paste into any AI
Extracting design DNA...
Analyzing tokens, building type scale, classifying colors...
Skill Generated!
Ready
Design System Preview
Spacing & Layout
Elevation
Generated Files
Download for your AI tool
Same design skill, packaged for your workflow. Universal works everywhere.
🌐 Universal
Works with any AI tool — drop it anywhere
+ more
Claude Code
CLAUDE.md
Cursor
.cursorrules
Codex
~/.codex/
Gemini CLI
.gemini/skills/
Copy Prompt
AI Studio, Lovable…
Download, unzip, and place the files in your agent's skills directory (e.g. .claude/skills/)
Publish
Share to GitHub & Hub
Create a public repo and list your skill on designskills.xyz