liorelidesign

Lior Code To Figma — Design skill for Claude Code

Design community

A Claude skill that exports your prototype into Figma using your own design system: real components, variables, text styles and auto layout.

How to install Lior Code To Figma

This entry records only its repository, not the path inside it, so there is no exact command to give. Open liorelidesign/lior-code-to-figma and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Lior Code To Figma does

A Claude skill that exports your prototype into Figma using your own design system: real components, variables, text styles and auto layout. By Lior Eli™

Alternatives in Design

Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Brand Kit — Generate a complete brand kit from a logo and 1-2 brand colors — full palette, type scale, icon style, compone 309 ★
Opencode Vibe — 🏄‍♂️ Next.js 16 web UI for OpenCode - real-time chat with streaming, SSE sync, and React Server Components 178 ★

README

Lior Code to Figma™

**A Claude skill that exports your prototype into Figma — the way a senior product designer would.** Created by **Lior Eli™**

Build a prototype with Claude, then let it rebuild every screen and state in Figma using *your* design system: real components, variables, text styles and auto layout. No hardcoded hex values, no detached frames, no floating components.

What it does

Turns your prototype, ticket or use cases into a numbered list of states, then creates one mock per state
Uses only your design system: components, color/spacing variables, text styles, icons and logos
Builds components first (atoms → composites → one master screen), so a change in one place updates every mock
Auto layout everywhere
Places every mock inside the real product screen, with realistic content
Never touches your existing work: adds everything in a new, clearly named section
Ends with an audit and a short report: what was created, what's new, what's missing

Requirements

Figma MCP connected — the skill does not work without it.
- Claude app: Settings → Connectors → Figma → Connect
- Claude Code: add the Figma MCP server and check it appears in /mcp
Edit access to the Figma file you export into.
Your design system library enabled in that file. More variables and text styles = cleaner output.

Install

Claude app: Settings → Capabilities → Skills → Upload → choose lior-code-to-figma.skill
Claude Code: copy SKILL.md into ~/.claude/skills/lior-code-to-figma/

How to use

After building a prototype with Claude, ask:

Export the prototype screens to Figma using our design system. File: [link to your Figma file]

Add a ticket or use-case list if you have one.

**What to expect**

Before building, Claude shows a numbered list of states. Review it and correct it if needed.
Components are built before mocks. This takes time, especially the first run.
If something's off, a