Make any LLM produce UI that looks designed, not generated.
The problem with AI-generated UI isn't that it's wrong — it's that it's lifeless. Flat backgrounds, timid typography, cramped spacing, generic buttons that say "Submit." It looks like a template because it was built like a checklist instead of crafted like a product.
Design Engineer fixes that. It's a skill file that teaches any LLM — from 0.4B parameter models to frontier — to produce premium-grade visual interfaces with atmosphere, depth, and craft.
Quick Start · What's Inside · How It Works · Before & After · Reference Library
Same prompt. Same LLM. The only difference is Design Engineer.
"Build a dark-themed landing page for an AI writing assistant called InkFlow"
"Make this contact form look professional"
What changed?
| Without | With Design Engineer |
|---|---|
Flat #000 background |
Ambient radial gradient glow + grain texture |
| 36px Arial headline | 56px Plus Jakarta Sans with gradient fade |
| "Get Started" in a flat 4px-radius box | "Start writing free →" in a 14px gradient pill |
Flat #1a1a1a cards |
Glass cards with backdrop-filter blur |
| 32px section padding | 80-128px breathing room |
| No hover/focus states | Every element reacts to interaction |
| "Submit" button | "Send message →" gradient CTA |
| Placeholder-only inputs | Labeled inputs with brand focus glow |
git clone https://github.com/warpirate/design-engineer.git ~/.claude/plugins/design-engineerThen just ask Claude to build any UI — the skill auto-triggers.
Copy the contents of SKILL.md into your system prompt. That's it. The Quick Start template inside gives any model a production-ready starting point.
Add SKILL.md to your project's rules or context files. The skill activates automatically when a design task is detected.
design-engineer/
├── SKILL.md # The core skill — 993 lines of design intelligence
├── references/
│ ├── typography.md # Font selection by mood, type scale, pairing rules
│ ├── cta-buttons.md # CTA anatomy, copy formula, placement science
│ ├── color-systems.md # Full palette from 1 color, dark/light tokens, gradients
│ ├── layouts.md # Flexbox, Grid, sidebar, split hero, holy grail
│ ├── components.md # Modal, toast, tabs, accordion, dropdown, skeleton, 15+ more
│ ├── animations.md # Easing curves, scroll reveals, micro-interactions
│ ├── responsive.md # Breakpoints, clamp(), mobile nav, touch targets
│ ├── accessibility.md # WCAG AA guide, focus, ARIA, screen readers
│ └── starter-templates.md # Copy-paste HTML: dashboard, form, pricing, auth, 404
├── evals/
│ └── evals.json # 7 test scenarios to verify skill effectiveness
└── README.md
4,100+ lines of design knowledge. Zero dependencies. Works with any LLM.
The Quick Start template in SKILL.md is a complete, production-ready HTML page with every premium pattern baked into its CSS — ambient gradients, glass cards, confident typography, proper spacing, hover/focus states, responsive breakpoints, accessibility. A basic model just fills in the content and ships something stunning.
The 6-phase workflow guides the model through understanding the task, setting measurable design metrics, making creative direction decisions, building a skeleton, adding craft, and verifying against the metrics. Reference files provide deeper patterns when the model can read files.
Full creative direction with font-by-mood selection, color atmosphere building, metric-driven engineering, and verification checklists. The reference library gives encyclopedic knowledge across 9 design domains.
Three laws:
- Understand before you build. Answer what, who, mood, constraints — then move.
- Create atmosphere, not just layout. Ambient gradients, glass surfaces, grain texture, generous space.
- Verify with your eyes, not just your checklist. Metrics in Phase 2, verification in Phase 6.
Key principles encoded:
- Ambient radial gradient backgrounds (never flat color — the #1 AI tell)
- Glass cards with backdrop-filter on dark, elevated shadows on light
- 56px gradient CTAs with glow-on-hover and press feedback
- Font selection by mood (6 categories), not defaulting to Inter
- 60px hero headlines with -0.03em tracking (not the timid 36px AI default)
- 80-128px section padding (double what AI usually does)
- Every interactive element has hover + focus + active states
prefers-reduced-motionalways respected- WCAG AA contrast on every text element
| Reference | What it teaches |
|---|---|
| typography.md | 6 mood categories, premium type scale, font pairing rules, Google Fonts loading |
| cta-buttons.md | Size science (30% radius rule), copy formula ([Verb] + [Value]), placement rules |
| color-systems.md | Derive full palette from 1 hex, dark/light tokens, semantic colors, 60-30-10 rule |
| layouts.md | Auto-responsive grid, sidebar+content, split hero, holy grail, z-index scale |
| components.md | 15+ components: modal, toast, tabs, accordion, dropdown, tooltip, skeleton, toggle, stat card, empty state, alert, pagination, avatar group, breadcrumb, progress bar |
| animations.md | Easing functions, entrance animations, scroll-triggered reveals, loading states, performance tips |
| responsive.md | Breakpoint strategy, fluid clamp(), mobile hamburger nav with drawer, touch targets, responsive tables |
| accessibility.md | WCAG AA guide, keyboard navigation, ARIA patterns, skip links, form accessibility, testing checklist |
| starter-templates.md | 5 complete HTML pages: dashboard, contact form, pricing, auth/login, 404 — dark + light variants |
Works with any LLM that accepts a system prompt or context file:
| Platform | How to use |
|---|---|
| Claude Code | Install as plugin (auto-triggers) |
| ChatGPT | Paste SKILL.md into custom instructions or system prompt |
| Cursor | Add to .cursor/rules/ or project context |
| Windsurf | Add to cascade rules |
| Codex | Include in system prompt |
| Open-source models | Include SKILL.md in context window |
| API usage | Send as system message |
MIT — use it, fork it, ship with it.
If this made your AI output look like it was designed by a human, consider starring the repo.