design.how
Design systems, skills and visuals for coding agents, from design.how.
Install
npx skills@latest add https://design.howOr from GitHub, which installs the same six skills:
npx skills@latest add arla6ka/design.howOne skill, with build-design-system beside it for the shared glossary, taste file and scripts: npx skills@latest add arla6ka/design.how --skill build-design-system --skill ui-review. A design system's skill without its code: npx skills@latest add arla6ka/design.how/systems/quartz.
It works with any coding agent that reads skills. In Claude Code you can also run /plugin marketplace add arla6ka/design.how, then /plugin install design-system-skills@design-how. To install by hand, copy the folders in skills/ into your agent's skills folder, such as .agents/skills/.
Design systems
Each one installs with shadcn and brings its own skill, so your agent builds with its components and follows its rules.
Glaze
Glassy and compact, for AI products, with glass only on what you press.
npx shadcn@latest add https://design.how/r/glaze/theme.jsonComponents and source and docs.
Lime
!Lime: a banking app's home screen with a balance, one glowing Add button and a savings goal
Warm and light, for consumer apps, with one glowing action.
npx shadcn@latest add https://design.how/r/lime/theme.jsonComponents and source and docs.
Quartz
!Quartz: a helpdesk for AI agents with a chart of the last 24 hours of conversations
Cold and calm, for AI agents and developer tools, with colour only for what a thing is and what went wrong.
npx shadcn@latest add https://design.how/r/quartz/theme.jsonComponents and source and docs.
Sodium
Sharp and mono, for infrastructure and data tools, with one yellow action per view.
npx shadcn@latest add https://design.how/r/sodium/theme.jsonComponents and source and docs.
Skills
These turn the UI your app already ships into a design system your agent can use, add a check that catches new drift, and move every screen onto it when you ask.
- design-system-boss. Start here. Say what's wrong in plain words, and it reads the repo, picks a playbook and runs the other skills in order. It ends with the system, one flow moved onto it and a CI check, then offers the full migration with its size.
- build-design-system. Builds tokens, one canonical component per family, docs and checks from the app you have, and proves them on one real flow.
- migrate-design-system. Moves every screen onto the system with parallel workers, each checked against its before screenshot. Start with audit mode, which writes only its own notes under
.design-system/and commits nothing. - token-mapping. Maps hex codes and pixel values to your tokens by purpose, so an 8px radius never stands in for an 8px gap. It never edits.
- component-docs. Writes a component's docs from its code and two real uses in your product, with the rules right next to the examples.
- ui-review. Reviews a screen or flow, including the states a screenshot misses, and ranks what's actually broken.
build-design-system, which the other skills build on, so install it next to any skill you add on its own. Replace the taste file with your own.
Ten scripts do what prose can't. build-design-system has check-system.mjs, oklch.mjs, capture.mjs, capture-guard.mjs, pixdiff.mjs and find-chromium.mjs. migrate-design-system has land.mjs, legacy.mjs, bodies-check.mjs and parity.mjs. Each has --help and --self-test, and the three that drive a browser need Playwright and a Chromium. node evals/run.mjs --lint checks the skills themselves, including that no word the glossary avoids creeps back, and --triggers asks a host which skill each prompt starts, or none. Each case in evals/incidents/ only proves its rule is written down in the skill it names, not that an agent follows it. --case prints one to run by hand.
Vault
Visuals an agent can build into a page: moving type, shader fields and small interface pieces. Each one is its own skill, with a brief of what makes the effect, the FIXED steps, the VARIABLE values and a React and TypeScript template. Install one by name:
npx skills add https://design.how/vault/warp-typeEvery visual pauses off screen and on a hidden tab, draws one still frame under reduced motion, caps the pixel ratio at 2 and cleans up when it unmounts. Each skill's scripts/check.mjs checks that your copy still does. Type falls back to system faces, and a visual built on photos or clips ships placeholders at the paths it reads, for you to replace with your own. The source and a README for each are in vault/.
| Visual | What it does | Install |
|-|-|-|
| Stack type | One line of capitals stacked nine deep on a drum, every letter draining to the one solid row on its own beat while the outlined echoes scramble. | npx skills add https://design.how/vault/stack-type |
| Roll type | Three short phrases taking turns, every word rolling up out of sight through glass as the next phrase rolls in under it. | npx skills add https://design.how/vault/roll-type |
| Warp type | Six short sentences, half a second each, where the verb bends its own letters. | npx skills add https://design.how/vault/warp-type |
| Flip type | One bold word that keeps becoming the next, each letter falling to a new row through a few random glyphs. | npx skills add https://design.how/vault/flip-type |
| Cloud type | A line of white type that blows in as cloud, sharpens letter by letter, then lifts away as cloud again. | npx skills add https://design.how/vault/cloud-type |
| Eclipse grid | Eighty rings sliding off the discs they hide, each on its own beat; the pointer is the lamp. | npx skills add https://design.how/vault/eclipse-grid |
| Shutter type | Two lines of type through a rolling shutter: whatever moves tears into bands, whatever is still stays whole. | npx skills add https://design.how/vault/shutter-type |
| Pop type | Motion drops in letter by letter, squashes as it lands, swells like a balloon and pops. | npx skills add https://design.how/vault/pop-type |
| Misprint type | HOLD ON, two prints that never register; press and hold to pull them together. | npx skills add https://design.how/vault/misprint-type |
| Verb type | Five words, each acting out its own verb in its own colours, cut hard. | npx skills add https://design.how/vault/verb-type |
| Ripple grid | A lattice of soft blobs that blooms into rings, twists and settles back to a grid. | npx skills add https://design.how/vault/ripple-grid |
| Flood type | A two-line word that falls in, floods the frame and tumbles out. | npx skills add https://design.how/vault/flood-type |
| Phase table | A four by six table of closed harmonic curves, lit as steel wire, breathing on one shared phase. | npx skills add https://design.how/vault/phase-table |
| Swing type | Huge letters swinging past a fixed window, turning edge-on so the word never assembles. | npx skills add https://design.how/vault/swing-type |
| Spray burst | A screenprint that reprints itself every three seconds, every edge a boiling spray of dots. | npx skills add https://design.how/vault/spray-burst |
| Rush type | A word rests, then blasts toward you and tears into streaks of coloured light before the next one lands. | npx skills add https://design.how/vault/rush-type |
| Ink flood | A pen writes a fat scribble, the scribble floods the frame, and its ink becomes the ground the next one is written on. | npx skills add https://design.how/vault/ink-flood |
| Bond type | Two words in a pixel face that unfold into a molecule, pixel bonds joining each letter to the next. | npx skills add https://design.how/vault/bond-type |
| Dash cascade | Three-letter words built from fat scanline dashes, unfurling out of a dotted line and folding back. | npx skills add https://design.how/vault/dash-cascade |
| Wild type | A design word types itself in, goes wild through one warp field, collapses home and un-types. | npx skills add https://design.how/vault/wild-type |
| Loud burst | A sentence types itself in, one word heats up and bursts into coloured darts, and the line is thrown off the sides. | npx skills add https://design.how/vault/loud-burst |
| Stamp type | Four lines on highlight bars hop in, park and scatter, each leaving blocks of flat colour behind. | npx skills add https://design.how/vault/stamp-type |
| Reality split | A selected word splits into letter objects, scatters, is inspected letter by letter at huge scale, and pops back whole. | npx skills add https://design.how/vault/reality-split |
| Checker conveyor | Nine rows of checker cells whip sideways one after another, and each pulse carries in the next scene. | npx skills add https://design.how/vault/checker-conveyor |
| Glass type | Black serif type moving through one glass lens with a ripple in it, in three scenes that take turns. | npx skills add https://design.how/vault/glass-type |
| Sunset slam | A word squashes, slams forward into an extruded retro logo trailing a fan of dawn colour, cools to a sticker and unwinds. | npx skills add https://design.how/vault/sunset-slam |
| Orbit | Twenty-six labelled cursors ride an invisible sphere around a thin breathing ring, and the sphere can be thrown. | npx skills add https://design.how/vault/orbit |
| Word carousel | Four words on a three-slot conveyor that slams one slot left every half second, with a fourth hidden tiny behind the big one. | npx skills add https://design.how/vault/word-carousel |
| Slide stack | Five dark blocks slide between two stops a beat out of step, and the orange behind them is traced from where they are. | npx skills add https://design.how/vault/slide-stack |
| Spike type | A word knocked out of a pale ground, its edge chewed ragged and bristling with hundreds of hand-drawn spikes. | npx skills add https://design.how/vault/spike-type |
| Dot globe | Three rounded-cube solids tiled with rounded squares, rocking together, a bright symbol painted on them and handed along the row. | npx skills add https://design.how/vault/dot-globe |
| Pixel threshold | A word printed into a flat colour poster in hard pixel blocks, collapsing and resolving into the next word. | npx skills add https://design.how/vault/pixel-threshold |
| Code trail | A staircase of code fragments on clashing coloured bars that trails the pointer. | npx skills add https://design.how/vault/code-trail |
| Holo | An identity card that tilts in 3D while a holographic foil slides over it and the picture flips its colours. | npx skills add https://design.how/vault/holo |
| Glitch word | A word in a bright badge that tears into shoved bands in short bursts. | npx skills add https://design.how/vault/glitch-word |
| Datamosh | Columns of saturated colour that fall, snap open through the middle and squeeze shut, like a broken video decode. | npx skills add https://design.how/vault/datamosh |
| AI lights | One body that becomes four agent UI components in turn, each announced by a pulse of light around its rim. | npx skills add https://design.how/vault/ai-lights |
| Pixel brushes | A brush is one small shape stamped along a path, and five numbers turn it into a crisp line or a loose spray. | npx skills add https://design.how/vault/pixel-brushes |
| Voice wave | A ribbon of light that moves like a voice and splits into colour where it bends, and can listen to yours. | npx skills add https://design.how/vault/voice-wave |
| Fade motion | A pixel word trailing into light, its fade built from two hundred overlapping copies. | npx skills add https://design.how/vault/fade-motion |
| Dot cut | A dense grid of touching circles with a letter or a pattern cut out of it as negative space. | npx skills add https://design.how/vault/dot-cut |
| Liquid UI | Cards that fuse where they meet, the corner between them curving inward like poured liquid. | npx skills add https://design.how/vault/liquid-ui |
| Kinetic typography | One heavy letter cut into a grid of tiles, each slipping on its own wave, so the letter ripples like cloth. | npx skills add https://design.how/vault/kinetic-typography |
| Liquid metal | One word as flowing polished metal on black, its reflection streaming as the pointer moves. | npx skills add https://design.how/vault/liquid-metal |
| Folder embroidery | Three embroidered word patches stitched onto cloth, with a glint on hover and a press that springs back. | npx skills add https://design.how/vault/folder-embroidery |
| Smooth corners | A glossy button whose corners are a superellipse that flows into the edge with no kink. | npx skills add https://design.how/vault/squircle |
| Badge trail | Tiny coloured badges of design terms that slam in behind the pointer and flick away. | npx skills add https://design.how/vault/badge-trail |
| Blur glow | A crisp rounded word in a soft gradient-mapped glow on light paper, dissolving into the next word and colour. | npx skills add https://design.how/vault/blur-glow |
| Text reveal | Two small serif text blocks that un-blur into focus through a cloudy mask, corner by corner, then clear and return. | npx skills add https://design.how/vault/text-reveal |
| Ransom note | Short phrases spelled in mismatched paper scraps that rise in one by one, hold and lift away. | npx skills add https://design.how/vault/ransom-note |
| Brick reveal | A picture restyled as toy bricks, voxels and a cartoon that peels back to the plain picture behind the pointer. | npx skills add https://design.how/vault/brick-reveal |
| Chromatic glow | A word that glows on a coloured wall and splits into warm and cool copies at its edges. | npx skills add https://design.how/vault/chroma-glow |
| Realistic emboss | Words and shapes pressed hard into tinted plaster, with the light catching every edge. | npx skills add https://design.how/vault/emboss |
| Blur reveal | Coloured panels in turn, each short line dissolving in out of a blur and drifting into focus. | npx skills add https://design.how/vault/blur-reveal |
| Word stickers | Die-cut word stickers that pop in one by one, peel up when grabbed and fling with momentum. | npx skills add https://design.how/vault/word-stickers |
| Design tiles | A short sentence as words on bold colour fields, packed into one bar, each field stepped to its letters. | npx skills add https://design.how/vault/design-tiles |
| Image sphere | A cloud of photos on an invisible sphere that drifts, spins on a drag and opens one on a click. | npx skills add https://design.how/vault/image-sphere |
| Crystal cluster | A gold-outlined crystal cluster floating in a flickering gold beam of light. | npx skills add https://design.how/vault/crystal-cluster |
| Cursors | Three labelled collaborator cursors orbit a frosted-glass word and scatter from your pointer. | npx skills add https://design.how/vault/cursors |
| Typer | A line that types itself in, each letter flickering through pills and highlights before it lands. | npx skills add https://design.how/vault/typer |
| Image galaxy | Small photographs drifting through a perspective field, growing as they fall and wrapping forever. | npx skills add https://design.how/vault/image-galaxy |
| Colour depth | Buttons that look like real objects, glossy or lit from inside, from gradients and inset shadows alone. | npx skills add https://design.how/vault/color-depth |
| Pixel cycle | One character at a time, breaking into big blocks and resolving sharp, then swapped for the next. | npx skills add https://design.how/vault/pixel-cycle |
| Ghosty reveal | Photographs that bleed in and out of view through a soft, cloudy mask, like forming out of fog. | npx skills add https://design.how/vault/ghosty-reveal |
| Symbols effect | A live halftone that rebuilds a clip from small tinted symbols, one per brightness band. | npx skills add https://design.how/vault/sandbox |
| Pixel scan | A diagonal band assembles a word out of a spray of tiny blocks, then a pool of blocks follows the pointer. | npx skills add https://design.how/vault/pixel-scan |
| Peak gradient | A soft rainbow glow of blurred columns that rises from the floor, tallest in the middle. | npx skills add https://design.how/vault/peak-gradient |
| Pixel fire | A 16 by 16 pixel-art fire on a block, where the pointer moves the real pixels and a tap blows it out. | npx skills add https://design.how/vault/pixel-fire |
| Vector editor | A design tool's selected-layer look for the web: a blue frame, corner handles, a size badge and a live bezier rig. | npx skills add https://design.how/vault/vector-editor |
| Tile field | A word made of tiny tiles, lit by a slow colour wave and a soft pointer light that leaves a wake. | npx skills add https://design.how/vault/tile-field |
| Hover video button | Pill buttons that swap themselves for a short clip of their label puffing up into glossy letters. | npx skills add https://design.how/vault/hover-video |
Why
Agents copy whatever is in the repo. If it has three buttons, forty grays and a token file half the code ignores, every new screen picks a different one. So each piece here hands the agent something it can check instead of a guess. A design system is a finished set of components and rules to build with. The skills screenshot every route before the first edit, map values to tokens by what they do and add checks that fail when a screen drifts, and every commit goes to a run branch, never your default branch. A visual is the one idea behind an effect with the numbers that make it work, and a check that it keeps the page fast.
MIT licensed.