The twin craft to tech/architecture. Architecture designs systems; design designs interfaces. Same category of opinion-heavy craft skill, different surface. This sub-hub covers the full frontend-design stack — from tokens at the foundation to AI-assisted design-to-code at the top.
Nine sub-skills grouped into three bands — foundations, interface craft, and design-to-code. Each card maps to a canonical leaf at design/*. All nine leaves are live.
Tokens, theming, dark/light modes, the "how do you stay consistent" layer. Where every design decision gets encoded once so it cascades everywhere.
Tailwind, Panda, UnoCSS, vanilla-extract. The CSS-in-JS trade-off space and the honest reasons to pick one over the others for a given project shape.
Variable fonts, fluid type, pairing, responsive scale. The invisible half of design that breaks the whole interface when it's wrong.
WCAG patterns, ARIA, screen reader testing, keyboard navigation. Not a layer you add at the end — built in from the first commit or almost impossible to retrofit.
shadcn/ui, Radix, Headless UI, Aceternity, Magic UI, Radix Primitives. How to pick one, how to stay consistent once you have, when to hand-roll instead.
Framer Motion, GSAP, CSS animations, View Transitions API. Motion that decorates is noise — motion that communicates state change earns its place.
Dev mode, tokens export, plugin ecosystem, Figma-to-code. The bridge between the design file and the production component — and the places it still leaks.
v0, Lovable, Framer AI, design-to-code generators. Great at first drafts, wrong at consistency — and why the human with the tokens file is still the last step.
Google Labs Code's file-format spec for handing your design system to a coding agent. YAML tokens up top, markdown rationale below, lintable in CI. Alpha format, big idea.
Open-source, Apache-2.0, local-first answer to Anthropic's Claude Design. Daemon turns whichever coding-agent CLI is on PATH into a design engine — 19 Skills, 71 Design Systems, BYOK fallback. POPIA-friendly, load-shedding-resilient, ZAR-friendly.
Five principles that show up in every sub-skill. If a leaf contradicts one of these, the leaf is wrong. Encoded in the canonical design/SKILL.md so every agent loading this sub-tree inherits the same frame.
Every design decision cascades better when it's encoded as a token first. Never hardcode colours, spacing, or type scales into components — the refactor cost is paid with interest later.
Built in from the first commit or almost impossible to retrofit. Start with semantic HTML and a keyboard-first walkthrough before anything else.
Animations that decorate are noise. Animations that communicate state change — entering, leaving, loading, error — earn their place. Everything else is cargo cult.
v0 and its peers are great at first drafts and wrong at consistency. A human with a tokens file, a component inventory, and a review checklist is still the last step.
Every decision — component, token, interaction — should be made once, tested once, and reused. The same compounding principle that drives the rest of the 2nth tree.
Design is the twin of architecture in the tech tree. It touches every leaf that ships a surface — which in practice is most of them. It leans on Cloudflare for the runtime and feeds back into the shared engineering tree for anything that becomes a reusable pattern.