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.