Introducing UI Craft — Design Taste for AI Coding Agents

AI coding agents are fast. They can scaffold entire interfaces in seconds. But speed without taste produces the same generic output every time — purple-cyan gradients, glassmorphism with neon accents, bounce animations, identical card grids.

UI Craft changes that. It's a skill that injects design engineering knowledge directly into your AI agent, covering 12 domains of opinionated, craft-level rules derived from how teams at Stripe, Linear, and Vercel build interfaces.

Same Prompt. Same Model. Different Result.

The core idea is simple: your AI agent already has the capability to write great UI. It just doesn't know what "great" looks like. UI Craft fills that gap with structured design knowledge — not templates, not component libraries, but the reasoning behind good design decisions.

12 Domains of Design Craft

UI Craft covers every layer of interface quality:

1. Animation — Easing curves, spring physics, duration rules, prefers-reduced-motion
2. Layout — Spacing systems, optical alignment, layered shadows, visual hierarchy
3. Typography — text-wrap: balance, tabular-nums, font scale, curly quotes
4. Color — OKLCH, design tokens, dark mode, APCA contrast
5. Accessibility — WAI-ARIA, keyboard navigation, focus management, touch targets
6. Performance — Compositor-only animations, FLIP, will-change, CLS prevention
7. Modern CSS — View Transitions, scroll-driven animations, container queries, :has()
8. Responsive — Fluid sizing, mobile-first, touch zones, safe areas
9. Sound — Web Audio API, feedback sounds, appropriateness matrix
10. UX Copy — Error messages, empty states, CTAs, microcopy
11. UI Review — Systematic critique methodology, anti-slop detection
12. Orchestration — Multi-stage sequences, stagger timing, entrance/exit coordination

Four Operating Modes

Tell your agent what you need, and UI Craft picks the right mode:

• Build — Full layout, typography, color, spacing, accessibility, and responsive design in one pass
• Animate — Picks the correct easing, duration, and origin point for any motion
• Review — Audits for AI patterns, accessibility gaps, and missed details
• Polish — Finds 20+ small refinements that turn "done" into "crafted"

Anti-Slop Detection

UI Craft actively rejects clichéd AI design patterns. If the output looks like it was generated by AI — purple-cyan gradients, glassmorphism everywhere, elastic easing on everything — the skill catches it and course-corrects toward intentional, purposeful design.

Install in One Command

UI Craft works with Claude Code, Cursor, Windsurf, and any agent that supports the skills spec.

npx skills add educlopez/ui-craft

Check out the full documentation and before/after comparisons at skills.smoothui.dev.