design-system · example outputs

Eight systems, eight surfaces, eight self-contained proofs

Each case is a showcase artifact produced by the design-system skill for a different surface class: terminal, CLI, mobile app, four game genres, and print. Every page is a single HTML file, obeys its own system, and renders its whole-use scenes on the target canvas — not a component sampler.

The gallery never injects a theme into the cases; a surface's system is isolated, and only vocabulary is shared. Game and document cases load webfonts from Google Fonts to demonstrate their type registers, and fall back to system faces offline; everything else is inline. Open a case directly to see its own controls, token tables, and verification probes.
Install the skill
npx skills add kimmywork/skills --skill design-system
TUI + Web

orbit — agent console

Host-owned palette, ANSI roles, monochrome high-contrast path, and a live isolation check that a web theme never moves a TUI pixel.

advisory contrastglyph tablesurface isolation
Open case
CLI

relay — deployment CLI

stdout/stderr grammar, exit codes as interface, runtime color and width, and whole transcripts including failure and pipe sessions.

NO_COLOR / CIwidth slider--json contract
Open case
Mobile app

pulse — health app

Six whole-screen scenes, independent light and dark schemes, 48dp targets, dynamic type to 2.0×, and probes that run on the page.

360×760 framesoverlays in contextlive probes
Open case
Game UI · sci-fi

drift — action game HUD

Safe-zone containment, controller-first prompts, redundant status encoding, grayscale and colorblind proofs, motion and flash limits, handheld in both orientations.

Chakra Petch · IBM Plex Sansreduce motion / flashportrait + landscape
Open case
Game UI · fantasy RPG
EMBERHOLD

emberhold — fantasy RPG

Parchment panels and gold rules over a three-register type system, dialogue as real prose at a proper measure, inventory rarity that survives grayscale, quest and combat states.

Cinzel · Alegreya Sans · Spectraldialogue measurerarity by frame
Open case
Game UI · anime gacha

asteria — anime gacha

Landscape 16:9 throughout: bright world screens, dark panels for inventory, achievements, and summons, a live English/日本語 toggle, and rarity that survives grayscale.

Kaisei Decol · Zen Maru · Zen KakuEN / JP toggleworld · character · inventory · achievements · gacha
Open case
Game UI · casual puzzle

sugarfall — casual puzzle

Shape-coded pieces that stay readable in grayscale, bounded juice with a reduced-motion build, big one-thumb targets, and failure states that never pressure a purchase.

Luckiest Guy · Baloo 2 · Nunito Sansshape-coded boardno dark patterns
Open case
Print

fieldstation — poster and report

Fixed canvas at true proportion, shared typographic grid, grayscale hierarchy proof, and color tokens with print values.

A2 / A4grid overlayCMYK preview
Open case