Build reusable components, design tokens and guidelines for consistent interfaces.
From one brand color to a handoff-ready design system: the primary expands into full color families, joined by font, size and weight scales, a spacing system, radii and shadow tiers — computed by recorded rules, so identical inputs give identical output, never mood-board improvisation. Component architecture docs, responsive breakpoint and fluid type math, and variable exports (CSS, SCSS and friends) for developer handoff come along, with contrast checks threaded throughout.
Everything lands as reviewable workspace documents: token tables, component specs, responsive rules, handoff notes. The trigger phrasing is plain — 'generate a palette', '8pt grid', 'export CSS variables', 'prepare handoff' — all route here.
It builds systems and specs so an interface gains a reusable language instead of one beautiful throwaway screen.
Examples describe the request and the shape of the expected deliverable; they are not completed run results.
Brand #C9463D, playful style: emit the full token table — light/dark palettes and semantic colors — annotating each text-on-surface pair with its AA result.
A re-computable token document plus CSS/SCSS output, every contrast ratio shown as a number.
Write the form-component family architecture doc on the existing tokens: naming, slots, state matrix and anti-patterns, ready for engineers to build from.
Workspace component-architecture and handoff docs referencing the same token names.
iOS · Android
iOS
Android
MIT
MIT (root LICENSE)
The pinned skill subtree and shipped references were audited; full applicable license and per-file adaptation/asset notes are preserved under references/licenses/ and references/PROVENANCE.md.
Publication commit 25e07dbeeb, audited source 84c524b6fb; catalog digest iOS 46196ba57ed7… · Android 16de89d019e2….
Version records ship with the signed catalog; the target and released versions are shown below.
