I built a Claude skill that makes AI design like a senior UX designer

Zeeshan ur Rehman — Tue, 13 Oct 2026 21:11:14 +0000

Ask any AI to "design a dashboard" and you get the same thing every time. A KPI row, a line chart, a table. Logistics, HR, healthcare, fintech: they all look identical. And the moment you look closer, there's no loading state, no empty state, no error state. It renders. It doesn't work.

I've spent 14 years designing enterprise SaaS for aviation, logistics, and HR products. So I wrote down how I actually design, and turned it into a Claude skill.

It's free, open source, and MIT licensed: your-ui-ux-designer on GitHub

A logistics shipment dashboard, generated with the skill in HTML.

The core rule: render, don't describe

Most AI output describes good design. "The table should have a loading state." "Buttons should have focus styles."

The skill treats a described state as not delivered. If a rule names an output, that output must appear in the result. So every screen ships with:

Default, Loading, Empty, and Error states, as real rendered views
Focus rings and working interactions
Four responsive breakpoints
A prefers-reduced-motion fallback

The same dashboard in its Loading, Empty, and Error states. Built in, not added later.

What it does

It asks before it designs. At the start of a session, it asks 5 questions once: your design system (or it creates one), industry, output target, style, and dark mode. Then it commits.

11 distinct styles. Minimal, Material 3, Bento Grid, Glassmorphism, Liquid Glass, Spatial, Aurora, Neo-Brutalism, plus Neumorphism, Claymorphism, and Skeuomorphic for the narrow cases where they fit. It also warns you when a style is wrong for the context, like Claymorphism for enterprise B2B.

Enterprise navigation. Gmail-style dual nav, a fixed icon rail plus a collapsible secondary panel, that reflows correctly to a mobile top bar and bottom bar.

Bring your own design system. Share tokens, a link, or an image. It adopts them and fills in what's missing.

Multiple output targets. HTML, Figma, Claude Design, or a written spec.

Built-in validation. Before delivering, it checks that charts actually paint, controls actually work, and contrast actually passes.

Same skill, different industry: a fintech landing page with a live dashboard, in HTML.

How it's built

A lean core file, plus reference files that load only when needed. That keeps it fast and stops it from dropping rules on big tasks.

ui-ux-designer/
├── SKILL.md          core spine
└── references/
    ├── styles.md     11 style definitions
    ├── patterns.md   navigation, tables, dropdowns
    ├── mobile.md     touch / gesture / mobile spec
    └── figma.md      Figma auto-layout & variants

Does it work?

I tested it on 30 cases across aviation, transport, and HRM, scored on a 10-point rubric covering screen logic, style fidelity, contrast, grid, states, interaction, and responsiveness.

Overall: 86.7 / 100 on Sonnet 4.6
HTML on Opus 4.8: 93.0 / 100
Figma on Opus 4.8: 88.0 / 100

One lesson from testing: model choice matters. Routing HTML and Figma work to Opus fixed the responsiveness gap. And low reasoning effort drops states, so don't run it on low.

Install in 3 steps

Download ui-ux-designer.skill from the repo or its Releases page
In Claude: Settings → Capabilities → Skills → Upload skill
Select the file. It installs automatically.

It triggers on any UI/UX request, or call it directly with /ui-ux-designer. Works in Claude Chat, Claude Code, and Claude Cowork.

Try it

Paste this after installing:

Design a mobile app screen for a field-service technician: a job list with status, and a job detail view. Output as HTML.

What I learned building it

AI is fast, but it's confidently incomplete. The value isn't in getting AI to generate a screen. It's in encoding the checks a senior designer runs without thinking: what happens when this table is empty? What does a technician see when the network fails? Where does this nav go on a phone?

That's what this skill tries to capture.

If you try it and it gets something wrong, open an issue with the prompt and a screenshot. And if it's useful, a ⭐ on GitHub helps other people find it.

AI builds. I decide.

DEV Community: Zeeshan ur Rehman