UI Craft Skill: Design Engineering System for AI Agents

What is the UI Craft skill?

UI Craft is a design engineering system for AI coding agents from educlopez. The repository describes it as shipping designer-grade UI by default: ask for a dashboard and get one you would put in production, not gradient cards and bounce animations.

It runs at four levels, which the README calls a ladder. Level 0 is Ask, where you just install it. Then Direct, Persist and Enforce add commands, saved design memory and deterministic checks.

What changes in your agent's output

• A discovery phase is required before any coding, so the agent learns the product before it designs.
• Anti-slop rules apply, including sentence case, a mostly neutral palette with one accent, varied border radius and real SVG icons.
• Knobs tune the result: CRAFT_LEVEL 7, MOTION_INTENSITY 5, VISUAL_DENSITY 5 and a DESIGN_VARIANCE that differs for dashboards, landings and portfolios.
• Reference files for motion, layout, typography, color, accessibility, forms and more are routed by a table.

Slash commands and gates

The README lists 25 slash commands. They include /ui-craft:start, craft, shape, redesign and animate, plus brief, tokens, critique, polish, audit, harden and finalize. /sddesign is the express lane.

The MCP server offers deterministic gates: check_anti_slop, tokens_lint, acceptance_bar and score_ui, with route_task and ux_coverage as well. Two review agents, design-reviewer and a11y-auditor, sit alongside.

Variants and scope

Separate skills lock the knobs for minimal, editorial and dense dashboard styles. Out of scope are code editors, native mobile, realtime collaboration UI and HTML email.

Who the UI Craft skill is for

Best for

• Teams that want one cross-agent design system covering Claude Code, Cursor, Codex, Gemini and OpenCode.
• Product UI and dashboards, where scored critique and an acceptance bar give a repeatable check.
• Related: web design guidelines.

Not for

• Native mobile apps, code editors, realtime collaboration interfaces and HTML email, all out of scope.
• A single quick tweak, where the discovery phase may feel heavy. Related: Polish.
• People who want zero setup beyond one file, since full power needs the CLI or plugin.

Use it with UiChemy

UI Craft produces front end code and design decisions. UiChemy then carries the result into WordPress, where AI to WordPress imports an AI build and Composer edits it in Elementor or Gutenberg. Click Get Started to begin.

How to install UI Craft Skill: Design Engineering System for AI Agents

curl -fsSL https://skills.smoothui.dev/install | bash

1. Run the installer

   Run curl -fsSL https://skills.smoothui.dev/install | bash. It downloads the ui-craft binary after verifying its checksum. A Windows PowerShell equivalent is in the README, plus Homebrew (brew install --cask educlopez/tap/ui-craft) and Scoop.

2. Wire up your agent

   Run ui-craft install. It detects Claude Code, Cursor, Codex, Gemini and OpenCode, lets you choose components, and writes them into that agent's native config.

3. Or use the Claude Code plugin

   Inside Claude Code run /plugin marketplace add educlopez/ui-craft, then /plugin install ui-craft. This bundles the skill, 25 commands, 2 review agents and the MCP gates.

4. Or clone it

   Run git clone https://github.com/educlopez/ui-craft.git ~/.skills/ui-craft and copy .agents/skills/ui-craft into your agent's skills folder. This installs the skill only.

Check that it loaded

Run /ui-craft:start in a project, or ask your agent for a dashboard. It should begin with discovery questions before writing any code.

Read the official instructions on GitHub

Key features

• Required discovery phaseThe agent must establish context before coding, which keeps the output specific to your product instead of generic.
• Four-rung ladderAsk, Direct, Persist and Enforce let you move from simply installing the skill to saving design memory and enforcing checks.
• Tunable knobsCRAFT_LEVEL defaults to 7, MOTION_INTENSITY to 5 and VISUAL_DENSITY to 5, and DESIGN_VARIANCE is 4 for dashboards, 7 for landings and 8 for portfolios.
• Top 12 rules and accent budgetRules include sentence case, 90 percent or more neutral with one accent, and 3 to 5 accent placements per above-the-fold viewport.
• Reference routing tableA table sends the agent to motion, layout, typography, color, accessibility, dashboard, dataviz, forms, ai-chat, components and metadata references as needed.
• 25 slash commandsCommands cover the full flow, from /ui-craft:start and craft to critique, audit, harden and finalize.
• MCP quality gatescheck_anti_slop, tokens_lint, acceptance_bar and score_ui run deterministic checks, with route_task and ux_coverage alongside.
• Review agentsdesign-reviewer and a11y-auditor give a second opinion on design quality and accessibility. See also accessibility fixes.
• Scored critiqueNielsen's 10 heuristics, 6 design laws and 5 persona walkthroughs produce a score from 0 to 100, backed by a 10-item acceptance bar.
• Stack detection and variantsThe skill detects your stack, and sibling skills lock knobs for minimal, editorial and dense dashboard styles.

Frequently asked questions