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-motionfallback
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.skillfrom 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.
Top comments (1)
This is a fascinating approach. What stood out to me is the idea of treating AI as a UX thinking partner rather than a simple UI generator. The gap between "looks good" and "solves the user's problem" is often where design quality is decided. Thanks for sharing both the concept and the implementation details!