memi-design

Figma Generate Library — Design skill for Claude Code

Design community

Generate Figma component library from React/shadcn codebase with Code Connect parity.

How to install Figma Generate Library

Installs to ~/.claude/skills/memi-design-memi-figma_generate_library/SKILL.md

Terminal

mkdir -p ~/.claude/skills/memi-design-memi-figma_generate_library && curl -fsSL https://raw.githubusercontent.com/memi-design/memi/HEAD/skills/FIGMA_GENERATE_LIBRARY.md -o ~/.claude/skills/memi-design-memi-figma_generate_library/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Figma Generate Library does

name: figma-generate-library description: Generate Figma component library from React/shadcn codebase with Code Connect parity user-invocable: true model: opus effort: max context:

skills/FIGMA_USE.md
skills/ATOMIC_DESIGN.md

/figma-generate-library — Create Component Library from Codebase

Generate Figma components from your React/shadcn codebase, establishing Code Connect for perfect design-code parity. Requires /figma-use.

Freedom Level: High

Full creative freedom for

Alternatives in Design

Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Design Framework — Convert HTML/CSS design output to framework-specific component code 309 ★
Shadcn UI Plan — shadcn-ui-plan 265 ★