ultimate.UIUX.design.skills

01 · What it does

The problem it solves

AI coding agents tend to produce the same generic interface: several competing accent colours, only the happy path, arbitrary spacing, and contrast that fails WCAG. This adds the missing operating procedure — 34 markdown reference files, an index that routes a task to the few files it actually needs, and a 138-item review checklist to run before calling work done. It covers two tracks on shared foundations: interfaces (screens, components, design systems) and fixed-canvas assets (decks, carousels, posters, print, email).

02 · Setup

Before you start

• ✓Claude Code, for the plugin install path
• ✓Or any agent that reads AGENTS.md — Cursor, Windsurf, Copilot — for the portable path
• ✓A headless browser (Playwright or Puppeteer) for the HTML→PNG and HTML→PDF paths
• ✓python-pptx, only if you want editable PowerPoint output

03 · Step by step

Getting it running

1. 01

   Just describe what you want

   The bundled skill auto-activates on design requests, so no command is required. It reads the index and decision framework first, then loads only the files that task needs.

2. 02

   Build a screen end to end

   Runs the full loop: hierarchy, layout archetype, tokens, components, all five states, motion, responsive, accessibility, then self-review. It matches your repo’s existing stack when there is one.

   $/ui-build a settings form with profile, security, and notifications
3. 03

   Generate tokens before building

   Derives a palette for light and dark, a type scale, spacing, radius, shadow and motion values from a short brief. Output includes a copy-paste :root block and a Tailwind v4 @theme block.

   $/design-system fintech, trustworthy, modern, brand #4F46E5
4. 04

   Audit interface code you already have

   Reads the actual file, URL or screenshot rather than guessing, and returns findings grouped Blocking / Should fix / Polish, each with the exact value to change.

   $/ui-review src/components/Dashboard.tsx
5. 05

   Produce fixed-canvas assets

   Deck, carousel and creative commands all lock the canvas — dimensions, aspect, DPI, bleed, colour space — before any design work starts.

   $/make-carousel "7 onboarding mistakes", Instagram
6. 06

   Use it without the plugin

   Copy AGENTS.md and the knowledge directory into your project root. Agents that read AGENTS.md pick up the design loop and pull references on demand.

7. 07

   Check output against the checklist

   The review checklist is the QA gate, and it is worth reading yourself — every item is pass/fail against the rendered result, not a matter of taste.

04 · What you get

Capabilities

05 · Before you rely on it

Limitations, honestly

Every tool has edges. These are the ones that will cost you time if nobody tells you first.

• !The plugin path needs Claude Code — the slash commands do not exist in Cursor, Windsurf or Copilot, which get the AGENTS.md path instead.
• !This changes what the agent reads, not what it is capable of. Nothing enforces the checklist, so results still vary by model and brief.
• !Nothing is installed for you on the production side — HTML→PNG assumes you already have Playwright or Puppeteer.
• !Print output still needs a real prepress step; CMYK conversion is described but not automated.
• !Copy-paste code is React plus TypeScript throughout. Vue, Svelte and Solid get named equivalents but no recipes.
• !Markdown plus two JSON manifests with no tests or CI, so a stale value is only caught when someone reads the file.