educlopez/ui-craft

Design engineering system for AI coding agents — ship UI with craft-level quality. Install as an agent skill.

What it solves

UI Craft addresses the "AI slop" problem in frontend development, where AI coding agents often produce generic, unpolished, or visually unappealing user interfaces. It provides AI agents with professional design knowledge, opinionated rules, and verification tools to ensure the resulting UI is production-grade and follows established design laws and usability heuristics.

How it works

UI Craft functions as a design engineering system that can be installed as a skill or via a CLI. It integrates into AI coding harnesses (like Cursor or Claude Code) to guide the agent through a structured "ladder" of design maturity:

  • Rung 0 (Ask): Basic installation allows the agent to produce better UI using existing prompts.
  • Rung 1 (Direct): Provides specific slash commands (e.g., /craft, /polish, /animate) for focused passes on specific surfaces.
  • Rung 2 (Persist): Establishes durable design context via briefs and tokens stored in the project.
  • Rung 3 (Enforce): Implements quality gates, review agents, and CI checks to prevent design regression.

The system uses a discovery phase to analyze existing project styles and employs "knobs" (Craft Level, Motion Intensity, Visual Density) to tune the output. It also includes a deterministic scoring system based on Nielsen's heuristics and classic design laws to critique UI objectively.

Who it’s for

It is designed for developers using AI coding agents who want to ship high-quality, designer-grade user interfaces without needing a professional designer for every iteration.

Highlights

  • Deterministic Critique: Generates a scoreable scorecard based on 10 usability heuristics and 6 design laws.
  • Cross-Harness Support: Compatible with Claude Code, Cursor, Codex, Gemini, and OpenCode.
  • Design Memory: Uses .ui-craft/ to persist design briefs and tokens across sessions.
  • Quality Gates: Includes MCP gates and ui-craft-detect for CI/CD integration to ensure UI doesn't regress.
  • Style Variants: Offers specialized presets for minimal, editorial, and dense-dashboard aesthetics.

Related

  • Project
    plugin87/ux-ui-agent-skills

    A comprehensive kit of instructions, design tokens, and automated verification gates that turns AI agents into senior UX/UI architects for producing accessible, production-ready interfaces.

  • Project
    addyosmani/agent-skills

    Agent Skills is a collection of 25 production-grade workflow skills that AI coding agents can install and follow. They encode senior engineering practices like spec-first development, test-driven development, and code review into structured, verifiable workflows, helping agents consistently deliver higher-quality code.

  • Project
    nateherkai/scroll-craft

    An agent skill and design framework for AI coding agents to build premium, scroll-driven websites that avoid generic AI design tropes through strict craft standards and automated verification.

  • Project
    superdesigndev/superdesign-skill

    An AI product design agent skill that gives coding agents design judgment to create high-quality UI, presentations, and graphics instead of generic layouts.

  • Project
    Appllama/appllama-skills

    A set of agent skills that enable AI agents to research top-grossing mobile apps and build high-fidelity, simulator-verified Expo and React Native screens.