UI Craft — Design taste for AI coding agents

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

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 — 12 domains of opinionated rules about animation, layout, typography, color, accessibility, and more. 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.

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

Animate "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.

Review "Review this component" Audits for generic AI patterns, accessibility gaps, and missed details. Returns a structured table of issues with fixes.

Polish "Polish this dashboard" Finds the twenty small things — layered shadows, optical alignment, focus rings, monospace numbers — that turn "done" into "crafted."

12 domains. Opinionated rules for each.

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

Animation: Easing curves, spring physics, duration rules, prefers-reduced-motion, and when not to animate at all
Layout: Spacing systems, optical alignment, depth with layered shadows, visual hierarchy without decoration
Typography: text-wrap: balance, tabular-nums for data, font scale, measure, curly quotes, non-breaking spaces
Color: OKLCH for perceptual uniformity, design tokens, dark mode with color-scheme, APCA contrast
Accessibility: WAI-ARIA patterns, keyboard navigation, focus management, touch targets, screen reader semantics
Performance: Compositor-only animations, FLIP technique, will-change discipline, virtualization, CLS prevention
Modern CSS: View Transitions API, scroll-driven animations, container queries, :has(), @starting-style
Responsive: Fluid sizing with clamp, mobile-first, touch zones, safe areas, adaptive not just responsive
Sound: Web Audio API, feedback sounds, appropriateness matrix — when sound helps and when it annoys
UX Copy: Error messages that help, empty states that guide, CTAs that are specific, microcopy that respects
UI Review: Systematic critique methodology — visual audit, interaction audit, accessibility audit, anti-slop check
Orchestration: Multi-stage animation sequences, stagger timing, readable choreography code, entrance/exit coordination

Anti-slop built in

Every UI gets tested against a single question: "Would someone believe AI made this?" If yes, it starts over. The skill actively rejects:

Purple-cyan gradients Glassmorphism Identical card grids Bounce easing Glow effects Colored accent borders

One command. Better UI from the next prompt.

Install the skill, ask your agent to build something, and see the difference.

npx skills add educlopez/ui-craft

Free and open source. Works with any agent that supports skills.