Skip to content
Aren the dog Hi, I'm Aren!

Stop getting generic AI interfaces

A skill for AI coding agents that teaches them to build UIs with real design taste — not gradient cards and bounce animations.

Read the docs →

npx skills add educlopez/ui-craft
Star

Same prompt. Same model. Different result.

Left is an AI agent without the skill. Right is the same agent with UI Craft. Drag to compare.

Without With UI Craft
Hero built with UI Craft Hero built without UI Craft
Features built with UI Craft Features built without UI Craft
Dashboard built with UI Craft Dashboard built without UI Craft
Sign in built with UI Craft Sign in built without UI Craft

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

Without design knowledge, every AI-generated interface ends up with the same gradient cards, bounce animations, and glassmorphism. Functional — but instantly recognizable as AI output.

UI Craft is not a template library or a component kit. It's design engineering knowledge — 20 domains of opinionated rules about motion, layout, typography, color, accessibility, dashboards, real-world SaaS patterns, and stack integration (Motion / GSAP / Three.js). The kind of knowledge that takes years to develop as a frontend engineer.

Say what you need. It picks the right mode.

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

01Build "Build a pricing page" Layout, typography, color, spacing, accessibility, and responsive — all handled in a single pass. Not one concern at a time.
02Animate "Add an entrance to this modal" Picks the right easing, duration, and origin. Knows that modals need ease-out at 200ms, not bounce at 500ms.
03Review "Review this component" Audits for generic AI patterns, accessibility gaps, and missed details. Returns a structured table of issues with fixes.
04Polish "Polish this dashboard" Finds the twenty small things — layered shadows, optical alignment, focus rings, monospace numbers — that turn "done" into "crafted."

Or call a specific lens.

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

01/ui-craft:audit "audit this component" a11y, performance, responsive — prioritized findings table.
02/ui-craft:critique "critique this page" Hierarchy, clarity, anti-slop. No code changes.
03/ui-craft:polish "polish this dashboard" Compound details — tabular-nums, layered shadows, signature detail.
04/ui-craft:animate "animate this modal" Motion budget, decision ladder, reduced-motion.
05/ui-craft:distill "distill this hero" Cut every section that doesn't earn its space.
06/ui-craft:adapt "adapt this for mobile" Touch targets, safe areas, container queries.
07/ui-craft:typeset "typeset this page" Fonts, scale, tracking, micro-typography.

Full reference for all 15 commands in the docs →

Three dials. Agent adapts to your project.

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

01CRAFT_LEVEL default 7 / 10 3 ships fast. 9 is pixel-perfect. Gates the Polish Pass.
02MOTION_INTENSITY default 5 / 10 1 is hover-only. 10 is scroll-linked with page transitions.
03VISUAL_DENSITY default 5 / 10 1 is whitespace-heavy editorial. 10 is dashboard-dense.

How each knob gates behavior in Getting started →

20 domains. Four clusters.

Not generic best practices. Specific, opinionated rules derived from how Stripe, Linear, and Vercel actually build their interfaces.

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
  • Performance
  • Sound

03Surfaces

Real SaaS screens, not just marketing pages.

  • Dashboard
  • Forms
  • AI / chat
  • Data viz
  • Inspiration
  • Stack

04Critique

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

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

Each domain expands into opinionated rules in the docs →

Works in every agent.

Claude Code reads the skill + commands directly. Codex, Cursor, Gemini, OpenCode, and the generic agent-skills spec each get a pre-built mirror — with every slash command materialized as its own invokable skill. Install once, run anywhere.

Claude Code Codex Cursor Gemini OpenCode

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
Aren the dog Hi, I'm Aren!

What changes after npx skills add

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 →

npx skills add educlopez/ui-craft

Free and open source. Works across 5 agent harnesses.