Skip to content
Aren the dogHi, I'm Aren!

Stop getting generic AI interfaces

brew install --cask educlopez/tap/ui-craft
Read the docsStar on GitHub

A design engineering system for AI coding agents — installed as a skill — that builds UIs with real design taste, not gradient cards and bounce animations.

31 references · 22 commands · 5 agent harnesses

Works in Claude Code, Codex, Cursor, Gemini, OpenCode

Landing page built with UI CraftLanding page built without UI Craft
API docs built with UI CraftAPI docs built without UI Craft
Dashboard built with UI CraftDashboard built without UI Craft
Sign in built with UI CraftSign in built without UI Craft

The system behind the taste.

Three layers do the work — a detector, a scored gate, and a loop that won't quit until it passes.

Anti-slop detection

Tested against 33 rules — gradient-glow buttons, ALL CAPS, bounce easing — caught before they ship.

Scored quality gate

An MCP gate scores every surface 0–100 across anti-slop, tokens and a11y. Below the bar, it blocks.

Convergence loop

/finalize --converge re-runs until the gate is green — it fixes, not just reports.

AI agents write code fast. They don't know what looks good.

Not a template kit — design engineering knowledge, applied before code is written.

design domains
31
anti-slop rules
33
slash commands
22
MCP gates
4

Say what you need. It picks the right mode.

No configuration. Just describe your task and the skill routes to the right approach.

01Build

Layout, typography, color, spacing, accessibility, and responsive — all handled in a single pass. Not one concern at a time.

Or call a specific lens.

Twenty-two slash commands, each a focused pass from one angle. Skip routing when you know what you want.

01Build

  • /start
  • /craft
  • /sddesign

02Review & ship

  • /heuristic
  • /audit
  • /critique
  • /polish
  • /harden
  • /unhappy

03Plan & transform

  • /shape
  • /animate
  • /adapt
  • /typeset
  • /colorize
  • /clarify
  • /extract

04Refine & remember

  • /distill
  • /delight
  • /brief
  • /tokens
  • /finalize
  • /remember

All 22, with examples and what each loads, in the docs →

And it doesn't stop at one pass.

/finalize, /tokens and /unhappy can converge — re-run until the quality gate is green, not just report once.

/finalize --converge
  • Pass 1star rating → removed
  • Pass 2ALL CAPS → sentence
  • Pass 3tinted glow → clean
  • Pass 40 · Converged ✓

The gate is binary — it loops until zero findings or the budget runs out.

Three dials. Agent adapts to your project.

UI Craft asks about these during Discovery. The answers change behavior, not just tone.

CRAFT_LEVEL7

Balanced — runs the standard polish pass.

MOTION_INTENSITY5

Entrances on scroll, hover on everything.

VISUAL_DENSITY5

Comfortable rhythm — room to breathe.

Drag the dials — the agent applies the same gates. How each one works in Getting started →

31 domains. Five clusters.

Not generic best practices. Specific, opinionated rules derived from observed mature SaaS patterns.

01Visual layer

Where pixels live. How they're arranged, typed, and colored.

  • Layout
  • Typography
  • Color
  • Modern CSS
  • Responsive

02Behavior

What the interface does under your hands — and under assistive tech.

  • Motion
  • Accessibility
  • Sound

03Surfaces

Real SaaS screens, not just marketing pages.

  • Dashboard
  • Forms
  • AI / chat
  • Data viz
  • Inspiration
  • Stack
  • Recipes ×3
  • Themes
  • Components

04Critique

How the skill looks at work — its own and yours — and says what's off.

  • Heuristics
  • Personas
  • State design
  • UI Review
  • UX Copy
  • Agents

05Decision spine

Durable anchors that survive across sessions — brief, tokens, finish bar, and principles that seed every project.

  • Brief
  • Tokens
  • Finish bar
  • Principles catalog
  • Spec
  • Loops
  • Design memory

Each domain expands into opinionated rules in the docs →

Works in every agent.

Claude Code reads the skill directly; every other harness gets a pre-built mirror with all 22 commands. Install once, run anywhere.

Claude Codenative skillCodexpre-built mirrorCursorpre-built mirrorGeminipre-built mirrorOpenCodepre-built mirror

Anti-slop built in

Every UI gets tested against a single question: "Would someone believe AI made this?" If yes, it starts over. Here's the kind of thing that fails the test.

Purple-cyan gradient. Glow. Bounce on hover.The skill rejects this on sight — and 15 more patterns — see them all in action → /anti-slop

Install once. Three ways to use it.

It's a skill, a set of commands, and a quality gate. Reach for the layer that fits the moment.

01Just askThe skill auto-triggers on any UI intent. No flag, no prefix — it reads your project and builds in one pass.
02Drive22 slash commands for focused passes — plus /craft and /sddesign pipelines for whole surfaces.
03VerifyFour MCP gates, two review agents, and a deterministic score you can fail a CI build on.

A menu, not just a flag.

Run ui-craft with no arguments and you get a guided hub, not a wall of flags.

Guided, not scripted. One full-screen hub for install, self-update, backups, and managed uninstall — arrow keys, no flags to memorize.
Global or per-project. Wire every harness at ~/ once, or scope it to one repo — same menu.
Reviews your PRs. The project installer wires a scan into CI — sticky summary comment, inline suggestions, a commit status. One prompt.

Taste you can put in CI.

Flip the sample. The same deterministic gate scores it and the agents flag it — same input, same result, no API key.

score_ui · MCP gate

UICraftScore

42FBlocked
design-reviewera11y-auditor
  • Focus ring missing on the CTAa11y+ focus-visible:ring-2 ring-offset-2
  • Purple-cyan gradient on the buttondesign+ solid accent token
  • ALL CAPS headline — reads as templatedesign+ sentence case, tracking-tight
  • Headline has no text-wrap balancedesign+ text-wrap: balance

Clean — 0 findings. Ships green.

One of four MCP gates, plus two review agents. See how they work →

Aren the dogHi, I'm Aren!

What changes after ui-craft install

Three concrete deltas your next prompt will ship.

  1. 01

    No more transition: all.

    The detector catches the lazy shorthand. The skill teaches the property-specific alternative — and why it matters for compositor perf.

  2. 02

    tabular-nums on every metric, price, and timestamp.

    Numbers that line up column-by-column. Craft you can see without squinting.

  3. 03

    Focus rings keyboard users can actually see.

    Accessibility isn't a polish pass. It's the floor.

Or install anyway →

brew install --cask educlopez/tap/ui-craft

Then run ui-craft install — all install paths →

Free & open source. Works across 5 agent harnesses.