English | 中文

Autodesign

AI-powered Claude Code skills that turn design ideas or Figma files into structured specifications, then generate production-ready UI code.

License

Overview

Text Idea ─→ /idea2design ─────┐
                               ├─→ .design/ ─→ /design2code ─→ Production UI Code
Figma File ─→ /figma2design ──┘

Three Claude Code skills that work together:

Skill Trigger Description
idea2design /idea2design Generate .design/ specs from text descriptions — no Figma needed
figma2design /figma2design Extract .design/ specs from a Figma link — tokens, components, brand assets, icons, screenshots
design2code /design2code Read .design/ and generate React / Vue / Svelte UI code adapted to your project

Install

npx skills add yugasun/autodesign

This installs all three skills to ~/.claude/skills/.

Prerequisites

  • Claude Code — claude.ai/code
  • /idea2design — no extra dependencies
  • /figma2design — Figma MCP plugin (figma@claude-plugins-official) + edit access to the target Figma file
  • /design2code — a target codebase

Quick Start

From a text idea (no Figma required)

/idea2design

Prompts for brand description, design style, core pages, color preferences, platform, and tech stack — then generates the full .design/ spec.

From a Figma file

/figma2design https://www.figma.com/design/your-file-key/Your-Design

Extracts design tokens, component interfaces, page layouts, brand assets, custom icons, and screenshots into .design/.

Generate UI code

/design2code

Reads .design/ and generates pages and components in your project's tech stack.

.design/ Output

All three skills produce (or consume) this directory structure:

.design/
├── DESIGN.md          # Design tokens: colors, typography, spacing, radii
├── CODE_PATTERNS.md   # Target tech stack, naming conventions, layout patterns
├── COMPONENTS.md      # Component specs: TypeScript props, state tables
├── PAGES.md           # Page layouts: ASCII diagrams, data flow, interactions
├── ICONS.md           # Icon inventory: Lucide mappings + custom SVG list
├── ANIMATIONS.md      # Motion specs (optional, figma2design only)
├── INTERACTIONS.md    # Interaction states (optional, figma2design only)
├── brand/             # Brand assets: logo, app-icon, mascot (figma2design only)
├── icons/             # Custom SVG icons (figma2design only)
└── screenshots/       # Key screen PNGs + index.md (figma2design only)
    ├── index.md       # Screenshot directory: grouped by module, filename ↔ description
    ├── <frame>.png
    └── ...

Project Structure

autodesign/
└── skills/
    ├── idea2design/
    │   └── SKILL.md                  # Text-to-design skill spec
    ├── figma2design/
    │   ├── SKILL.md                  # Figma-to-design skill spec
    │   ├── references/               # Manifest contract docs
    │   └── assets/
    │       ├── manifest.schema.json  # .design/ format reference
    │       └── preview/              # HTML preview renderer
    └── design2code/
        └── SKILL.md                  # Code generation skill spec

Support

If this project helps you, feel free to buy me a coffee ☕

License

Apache License 2.0