KT

kyanitelabs/tastecheck

Developer tools
11 stars Quality 59 Trend 38MIT

Frontend taste + ship-gate toolkit for AI coding agents — evidence-backed UI quality. v1.7.0 (measured FP/FN corpus, decision cards, gestalt-first).

Overview

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. 1. Install: git clone https://github.com/KyaniteLabs/tastecheck && ./tastecheck/install.sh 2. Open your coding agent in your project. 3. 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. 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.

README

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

  1. Install: git clone https://github.com/KyaniteLabs/tastecheck && ./tastecheck/install.sh
  2. Open your coding agent in your project.
  3. 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 Labels, autocomplete, validation, errors, mobile input.
empty-states Empty, loading, error, offline, first-run, layout stability.
micro-motion Purposeful feedback, reduced motion, no hidden content.
data-viz Honest, accessible, themed charts and tables.
art-direction Imagery, icons, hero images, OG cards, generic AI imagery.
a11y-pass WCAG 2.2 AA: keyboard, screen readers, contrast, focus, target size.
cognitive-a11y Readability and predictability for ADHD, autism, dyslexia.
i18n-ready Locale expansion, RTL, logical properties, formats.
deslop-ui Removes AI-generated UI tells: purple gradients, pill CTAs, default type, card-grid sameness.
humanize-copy Removes LLM tells from landing, docs, UI and release copy.
tastecheck-pass The ship gate: SHIP or HOLD with evidence for each check.

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).

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.

View the full README on GitHub

Recommended Tools

Try a different keyword or remove a filter.

Install

npx skillfish add kyanitelabs/tastecheck
New to MCP? Start with the mcpskill.org guide →