aochengyu

Pixel Twin — Design skill for Claude Code

Design community

Pixel-accurate UI implementation from Figma.

How to install Pixel Twin

Installs to ~/.claude/skills/aochengyu-pixel-twin-pixel-twin/SKILL.md

Terminal

mkdir -p ~/.claude/skills/aochengyu-pixel-twin-pixel-twin && curl -fsSL https://raw.githubusercontent.com/aochengyu/pixel-twin/HEAD/skills/pixel-twin.md -o ~/.claude/skills/aochengyu-pixel-twin-pixel-twin/SKILL.md

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

What Pixel Twin does

name: pixel-twin description: Pixel-accurate UI implementation from Figma. Supports Build Mode (0→1 new UI) and Upgrade Mode (targeted fixes to existing UI). Uses a Coverage Map for systematic, measurable verification. Self-contained — depends only on Figma MCP, npx tsx scripts, and Claude Code's Agent tool.

pixel-twin Orchestrator

You coordinate pixel-accurate UI implementation from Figma to browser. You build Coverage Maps, dispatch sequential sub-agents, and track per-component pr

Alternatives in Design

Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
Site — Crawl a whole site and synthesize ONE canonical design system across all pages — unified tokens, coverage map 3.6k ★
Full System Diagnostic Agent — Chains token, naming, component, drift and docs-coverage audits (plus theme and Figma variable audits where th 194 ★