dwetherell

Design To Code — Design skill for Claude Code

Design community

Turn a design into production code: $ARGUMENTS.

How to install Design To Code

Installs to ~/.claude/commands/dwetherell-youlio-agent-design-to-code.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/dwetherell/youlio-agent/HEAD/.claude/commands/design-to-code.md -o ~/.claude/commands/dwetherell-youlio-agent-design-to-code.md

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

What Design To Code does

Turn a design into production code: $ARGUMENTS

$ARGUMENTS should be a Figma URL or a detailed design description.

Step 1 — Load Design Context

Read `skills/design/design-system.md` for the project's design tokens (colors, typography, spacing, animation). Read `skills/figma/figma-workflow.md` for how to use the Figma MCP.

Step 2 — Extract Specs

**If a Figma URL was provided:** Use the Figma MCP to inspect the component. Extract:

Exact colors (must match design tokens — flag any deviati

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★