UI Craft is a specialized skill for AI coding agents that equips them with deep design engineering knowledge to build interfaces that prioritize craft and intention over generic, repetitive AI-generated patterns. Created by Eduardo Calvo, this tool acts as a bridge between an AI agent and the sophisticated design principles typically held by experienced frontend engineers. By integrating 28 distinct domains of design knowledge—ranging from typography and motion to accessibility and complex data visualization—the skill ensures that agents produce interfaces that look like they were intentionally crafted rather than automatically generated. It operates by analyzing project context during a discovery phase and then applying opinionated, domain-specific rules to every interface task, effectively eliminating common 'AI-slop' such as generic gradients, overuse of bounce animations, and improper accessibility handling.

Functionality within UI Craft is structured around a flexible routing system that enables agents to determine the correct design approach based on the specific intent of a user prompt. When a developer asks an agent to 'build a pricing page' or 'animate a modal,' the skill directs the agent to load only the relevant design references, such as layout rules, motion easing tokens, or accessibility contracts. This approach prevents performance overhead while ensuring that each component adheres to a high standard of quality. The tool includes 19 dedicated slash commands that allow users to trigger specific design lenses, such as auditing a component for accessibility, performing a UX critique, or applying a final 'polish' pass to ensure pixel-perfect execution.

Some of the key features are:

• Domain-Specific References: A comprehensive library of 28 domains including motion, typography, color, layout, and accessibility, providing grounded design rules.
• Anti-Slop Detection: Built-in logic that actively rejects common AI-generated design anti-patterns like generic gradient blobs or mismatched skeletons.
• Programmable Knobs: Fine-grained control over design behavior using CRAFT_LEVEL, MOTION_INTENSITY, and VISUAL_DENSITY to adapt the agent's output to the project's specific needs.
• Outcome Recipes: A one-shot pipeline for building complete surfaces like dashboards, landing pages, and auth screens with predefined acceptance bars.
• Slash Command System: 19 targeted commands for focused tasks like auditing, polishing, colorizing, and adapting interfaces for different devices.
• Three-Layer Token Spine: An architectural contract for design tokens encompassing primitive, semantic, and component-specific levels for consistent theming.
• Harness Portability: Pre-built mirrors for major coding agents including Claude Code, Cursor, Gemini, and Codex, ensuring a consistent experience across different platforms.

To operate UI Craft, a developer adds the skill to their agent harness via npm. Upon initialization, the skill conducts a discovery phase to identify existing project design decisions, such as Tailwind configurations or font stacks. Users then proceed through their normal development workflow, with the skill automatically triggering on UI-related tasks. Developers can further refine the agent's behavior by adjusting the three main control knobs or by invoking specific slash commands when a focused design intervention is required. This integration creates a persistent design language that evolves with the project across sessions.

Some common use cases include:

• Rapid Interface Development: Generating production-ready pricing, auth, or dashboard surfaces that follow established SaaS design patterns from the start.
• Automated Design Audits: Using the audit and critique commands to catch accessibility gaps, hierarchy issues, or performance bottlenecks in AI-generated code.
• Establishing Design Systems: Using the token and brief commands to anchor a project's design identity and constraints across multiple coding sessions.
• Motion Refinement: Ensuring that UI animations are performant and adhere to proper easing curves and motion budgets instead of using generic bounce effects.
• Responsive Adaptation: Automatically applying best practices for mobile and desktop layout transitions to ensure a cohesive experience across different viewports.