TasteCheck
Your AI-built UI stops looking AI-built. TasteCheck is a set of skills for coding agents. A short design interview and a deslop pass fix the generic look. A ship gate then checks the result and says SHIP or HOLD, with evidence.
Release inventory: v1.7.0 · 20 skills · 20 canonical commands · 1 alias · 21 command files · 8 gallery systems.
Quickstart
- Install:
git clone https://github.com/KyaniteLabs/tastecheck && ./tastecheck/install.sh
- Open your coding agent in your project.
- Run
/designsystem. Answer a few questions; it writes DESIGN-SYSTEM.md.
Skills are plain Markdown, so any agent that can read files can use them. Slash commands are for Claude Code.
The three commands to know
| Command | Use it when |
|---|
/designsystem | You are starting. It interviews you and sets the design direction. |
/deslop | You have UI that looks generic. It finds and removes the tells. |
/tastecheckpass | You want to ship. It checks the real page and returns SHIP or HOLD. |
Ship gate and evidence harness
There is no published audit CLI. After install, /tastecheckpass is the ship gate: an agent loads the real page and returns SHIP or HOLD with evidence.
At v1.7.0 the browser evidence driver is skills/tastecheck-pass/assets/cdp-qa.mjs, an eight-section harness: cold load, gate-audit.js, keyboard tab trace, 320px reflow, contrast samples, optional curate path, AX-tree summary, screenshots. Run it from a git checkout if you need that evidence bag. Node 22+ applies only to that driver (it uses Node's built-in WebSocket) and a local Chrome — not to install.sh or the skills, and not as a package floor.
The 20 skills
| Skill | What it does |
|---|
| design-system-interview | Interviews you, then writes a design direction (type, color, density, tokens). |
| tasteroll | Rolls and locks a design direction when the brief is open. |
| improve-existing-website | Audits an existing site and keeps its identity while fixing it. |
| color-system | OKLCH palettes, semantic tokens, contrast. |
| web-typography | Type systems, font loading, multilingual glyphs, hierarchy. |
| spacing-system | Rhythm, density, gaps, spacing scales. |
| theming | Light, dark, forced-colors, saved preference, no flash. |
| responsive-layout | Narrow containers, long content, zoom, reflow, overflow. |
| component-states | State matrices, keyboard behavior, ARIA. |
| form-ux |
How the gate works
/tastecheckpass loads the real rendered page and runs named checks: console errors, keyboard-only use, 320px and 400% zoom, tap targets, measured contrast, reduced motion, broken links and assets, leaked secrets, and template tells. It reports the verdict first, then one evidence line per check.
Three rules apply:
- A checkmark is not evidence. A check counts only if it ran and can cite what it saw (a selector, a URL, a number, a console line).
- It fails closed. A required check that fails, could not run, or has no evidence is HOLD.
n/a means the subject is absent, never "not tested".
There is a fast lane (one agent, minutes) and a deep lane (a hashed one-row-per-check ledger run by a deterministic script, with independent review on subjective rows). Subjective rows remain accountable human or agent judgment, not an objective guarantee. Details are in docs/VERIFICATION.md.
What we've measured, and what we haven't yet
Release status: PASS — current source-bound release receipts cover the asserted browser and accessibility checks.
Effectiveness status: BLOCKED — historical evidence did not clear its release threshold.
The gate has a labeled test corpus (evals/corpus/) and CI fails any change that makes its error counts worse. At v1.7.0, 17 cases: 12 true positives, 1 false negative, 4 true negatives, 0 false positives.
Read that number carefully. Only 2 of the 17 cases are visual-taste tells. The other 15 test gate integrity: forged or stale receipts, ledger tampering, leak detection. So this measures whether the gate can be fooled, not whether it has good design judgment. The one miss is a falsified but internally consistent observation, which cannot be caught offline.
There is also a separate visual corpus (evals/taste/, 36 pages: 20 generic AI-default, 16 deliberately designed). The browser tell detector flags 19 of the 20 generic pages and none of the 16 designed ones. It counts surface tells such as default fonts, indigo-violet gradients, identical card grids, stat bands and pill buttons. It does not judge composition or brand fit. Most pages were written or marked by us, so treat this as a regression floor, not proof of design quality. Its first run flagged 6 of our own gallery pages (they show a purple swatch as an example of what they reject); we fixed that and kept the before-and-after record in evals/taste/TASTE-CORPUS.md.
"Effectiveness BLOCKED" means we have not yet shown, with a controlled comparison, that using TasteCheck produces better interfaces. An earlier attempt did not clear its threshold, and we do not claim a result until one does. Also not measured: agreement between different models or reviewers.
npm test checks repository contracts, install, links and verification plumbing. It is engineering evidence, not an effectiveness claim.
Install
git clone https://github.com/KyaniteLabs/tastecheck && ./tastecheck/install.sh
That is the install path. The installer links skills into ~/.agents/skills/ and into any agent skill directories it detects. For Claude Code it can also link the 21 command files (20 commands plus the /darkmode alias for /theming) into ~/.claude/commands/. install.sh needs a POSIX shell. On Windows, use WSL or Git Bash.
Also: the gate has checks for video artifacts (reading time, authored motion, readability, audio presence).
Gallery
Eight browser-rendered design systems for the same product story. They show how far directions can differ; derive your own rather than copying one.
| System | Territory | Signature structure |
|---|
| Copper | dark, warm, geological | irregular tessellated bento with structural basalt columns |
| Swiss | light, austere, exact | exposed column grid carrying the content |
| Maximal | loud, kinetic | display word bleeding into a magenta block with sticker-wall collage |
| Concrete | raw, mechanical, monochrome | ruled spec sheet with a dense ledger table and hazard accent |
| Clay | warm, soft, humanist | alternating zig-zag card flow with organic pebble shapes |
| Dispatch | dark, operational, emerald | reverse-chronological release timeline |
| Verge | cool, clinical, measured | hypothesis-to-verdict evidence cards |
| Seed | warm, procedural, annotated | seeded specimen card with rolled dimensions |
Live: landing page, gallery.
FAQ
How is this different from a design prompt? It makes design decisions explicit before the agent builds, then checks the built page against them.
Does it replace a designer? No. Subjective checks stay human judgment.
Is it free? Yes, MIT.
License
MIT. See LICENSE. Contributions: CONTRIBUTING.md. Security reports: SECURITY.md.
GitHub (KyaniteLabs/tastecheck) is the home for code, issues and pull requests.
