educlopez/ui-craft
Design engineering system for AI coding agents — ship UI with craft-level quality. Install as an agent skill.
What it solves
AI coding agents often produce generic, low-quality user interfaces (referred to as "AI slop") that lack professional design taste and usability. UI Craft provides AI agents with a system of opinionated design rules, verification tools, and a structured workflow to ensure the resulting UI is production-ready and designer-grade.
How it works
UI Craft integrates as a skill or CLI tool into AI coding harnesses (like Claude Code, Cursor, or Gemini). It uses a "ladder" of four rungs to scale the level of design control:
- Rung 0 (Ask): The agent uses design knowledge to improve results based on simple prompts.
- Rung 1 (Direct): Users use specific slash commands (e.g.,
/craft,/polish,/animate) to trigger focused design passes. - Rung 2 (Persist): Durable design context, such as briefs and tokens, is stored in
.ui-craft/to maintain consistency across sessions. - Rung 3 (Enforce): Quality gates, MCP servers, and CI detectors ensure the UI does not regress and meets a 10-item acceptance bar.
It also features a discovery phase to analyze existing project styles and "knobs" to adjust craft level, motion intensity, and visual density.
Who it’s for
Developers using AI coding agents who want to ship high-fidelity, professional UIs without needing to be expert designers themselves.
Highlights
- Scoreable Critiques: Produces a defensible scorecard based on Nielsen's 10 usability heuristics and 6 classic design laws.
- Stack-Agnostic: Works across various frameworks and AI harnesses.
- Comprehensive Command Set: 25 specialized slash commands for everything from wireframing (
/shape) to production hardening (/harden). - Integrated Quality Gates: Includes MCP gates and review agents to prevent "AI slop" from reaching production.
Related
- Project
- Project
- Project
- Project