implement-design

Installation
SKILL.md

implement-design

Implement UI from an external design — a Claude Design share, mockup, screenshot, or pasted JSX — using @szum-tech/design-system components instead of reinventing primitives the DS already ships.

Why inventory-first

Translating a design straight to code, a model defaults to raw HTML (<button>, <div className="rounded border">) — that's what dominates its training data. The result bypasses the DS, drifts from brand tokens, and rots every time DS conventions change. The fix: list every primitive and map each to a DS component before writing any JSX. Thirty seconds that save hours.

Protocol

Do the steps in order. Don't skip Step 1 even for a "simple" design — the inventory is what catches the silent reinvention.

Installs
2
GitHub Stars
1
First Seen
Jun 10, 2026
implement-design — janszewczyk/claude-plugins