Claude-Skill soll KI wie Senior-UX-Designer arbeiten lassen

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.

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:

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

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.

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 Enter fullscreen mode Exit fullscreen mode 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.

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.

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

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

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.