| name | design-master |
| description | Unified design mega-skill for all artifact types: web pages, landing pages, dashboards, UI components, posters, graphics, and interactive artifacts. Combines best practices from frontend-design, ui-ux-pro-max, canvas-design, and web-artifacts-builder with a built-in quality gate. |
| group | design |
| triggers | ["дизайн","UI","компонент","страница","дашборд","постер","лендинг","визуал","сделай красиво"] |
| output | production-ready HTML/CSS/JS artifact or UI component |
| calls | [] |
Design Master — Unified Design Intelligence
This skill governs all design work. Use it whenever producing any visual artifact.
It detects the artifact type, applies the correct approach, and enforces quality standards
before delivery.
Trigger Conditions
Use this skill when the user asks to:
- Build a web page, landing page, or website section
- Create a dashboard, admin panel, or UI component
- Make a poster, visual, graphic, or presentation
- Build an interactive artifact or React component
- "Make it look good / beautiful / professional"
- Design anything — if it has visual output, this skill applies
Step 0: Context — Is there an existing UX/UI?
Before any other step — ask one question:
"Это новый проект или в нём уже есть существующий UX/UI?
Если есть — опиши коротко: что сейчас есть, что тебя не устраивает
концептуально (не визуально)?"
If project is new → proceed to Step 1 as normal.
If UX/UI already exists → do NOT go to Step 1 immediately.
First perform an audit and propose concepts:
0a. Audit the existing UX
Ask the user to describe (or look in the project):
- What is the current navigation paradigm? (sidebar / tabs / wizard / flat list)
- What is the user's mental model? (what they "do" in the app)
- What are the key user flows? (3–5 of them)
- What works poorly — not visually, but behaviorally?
0b. Propose 2–3 conceptually different directions
Each direction is a different UX paradigm, not a different color.
Example format:
Направление A: [Название]
Парадигма: [одно предложение о том, как пользователь взаимодействует]
Навигация: [как организована]
Ключевое отличие от текущего: [что меняется концептуально]
Направление B: [Название]
...
Направление C: [Название]
...
Mandatory structure of three directions:
- Direction A — Evolution: same paradigm, improved. Fixes known issues without changing the model.
- Direction B — Alternative: different navigation model or information organization principle.
- Direction C — Destructive: ask "what if we remove [the main entity of the current UX]?"
Examples: no sidebar → command palette; no cards → timeline; no tables → conversational UI.
Direction C must make the user either accept the challenge or consciously explain why not.
Wait for the user's choice. Only after they choose → proceed to Step 1.
Rules:
- "Make the same thing prettier" is not a valid direction if the user asked for a redesign from scratch.
- Direction C is mandatory. If the user rejects it — record the reason in one line before continuing.
Step 1: Artifact Type Detection
Before doing anything, identify the artifact type:
| Keywords / Context | Type | Approach |
|---|
| landing page, website, hero, about, pricing | Web / Landing | Bold aesthetic + CSS variables |
| dashboard, admin, monitor, KPI, table, stats | Dashboard / UI | Severity system + component library |
| poster, visual, graphic, infographic, art, illustration | Poster / Graphic | Philosophy-first + 90% visual |
| React, shadcn, interactive, component, app | Interactive | React 18 + Tailwind + shadcn/ui |
| Ambiguous | Default to Web / Landing approach | |
Step 1b: Style Direction — Ask Before Generating
If the user hasn't specified a style — show the menu and wait for a choice.
Never choose a style independently as a "safe default".
Web / Landing:
Какой характер у дизайна?
A Brutally minimal · B Editorial/magazine · C Retro-futuristic
D Organic/natural · E Luxury/refined · F Maximalist chaos
или опиши ключевое слово / референс
Dashboard / UI:
Тема:
A Dark & sharp (синевато-тёмный) · B Light & clean (белый, минимал)
C Vibrant (яркие акценты) · D Terminal (зелёный/чёрный)
Poster / Graphic:
Mood:
A High contrast · B Pastel/soft · C Psychedelic/glitch · D Geometric
If the user provided a reference or style — skip this step, use their description directly.
Step 2: Pre-Flight Design System (all types except Poster)
Before writing any code, generate the design system:
py ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system -p "Project Name"
Extract from user request:
- Product type: SaaS, dashboard, landing page, e-commerce, portfolio, etc.
- Industry: fintech, healthcare, gaming, beauty, etc.
- Style keywords: minimal, playful, dark mode, elegant, etc.
For multi-page projects, persist the design system:
py ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
If Python is unavailable — skip this step and apply the rules in Step 3 manually.
Step 3: Type-Specific Approach
A. Web / Landing Page
Aesthetic Direction — choose ONE and commit:
brutally minimal · maximalist chaos · retro-futuristic · organic/natural · luxury/refined
· editorial/magazine · brutalist/raw · art deco/geometric · industrial/utilitarian · soft/pastel
Rules:
- NEVER use Inter, Arial, Roboto, or system fonts as primary — pick a distinctive display font
- NEVER use purple gradients on white backgrounds
- NEVER produce cookie-cutter centered layouts — use asymmetry, diagonal flow, overlap
- Use CSS variables for ALL colors and spacing (never hardcoded hex in component code)
- One bold typographic statement per section (large display, tight tracking, dramatic weight)
- Backgrounds: gradient meshes, noise textures, geometric patterns, grain overlays — not solid white/grey
- Animations: staggered page load reveals, scroll-triggered entrances, hover states that surprise
- Animation timing: 150–300ms micro-interactions, transform/opacity only (never width/height)
Structure:
:root {
--bg: ...;
--surface: ...;
--text: ...;
--muted: ...;
--accent: ...;
--accent2: ...;
--r: ...;
}
B. Dashboard / Admin Panel / UI Components
Rules:
- Use the full severity color system consistently (see CSS below)
- Dark OR light theme — never unintentional mixing
- ALL icons: SVG only (Heroicons or Lucide) — zero emoji in UI
- KPI cards always have top-border severity indicator
- Every clickable element has
cursor-pointer
- Hover states: color/shadow transitions only, no layout shift
- Tables: left border by severity on rows
Dark theme CSS variables (copy verbatim):
:root {
--bg: #07090f;
--surface: #0d1117;
--s2: #131c27;
--s3: #18253a;
--border: #1e2d3d;
--border2: #2a3f57;
--text: #dce8f6;
--muted: #4e6278;
--muted2: #637b95;
--accent: #38bdf8;
--green: #34d399;
--crit: #f43f5e;
--high: #fb923c;
--med: #fbbf24;
--low: #60a5fa;
--r: 5px;
--r2: 8px;
}
Component vocabulary (from ui-component-library):
| Class | Component |
|---|
.kpi / .kpi-row | Stat cards with top color strip |
.s-ring (SVG) | Score ring: r=13, C=82, rotate(-90deg) |
.badge-SEVERITY | Severity pill (CRITICAL/HIGH/MEDIUM/LOW) |
.sig-col / .sig-row | Horizontal signal bars (width ∝ score%) |
.bchart / .brow | Bar chart: label + track + fill + stat |
.panel / .panel-hdr | Surface card with uppercase header |
.sec-hdr | Section header with right-extending decorative line |
For full component CSS + HTML, reference ~/.claude/skills/ui-component-library/SKILL.md.
C. Poster / Graphic / Visual
Rules:
- Philosophy first — write 4–6 sentences about the aesthetic vision BEFORE any code.
What emotion does it evoke? What composition principle guides it? What is the one idea?
- 90% visual, 10% text — text is a sparse visual element, not explanatory prose
- Output as self-contained HTML artifact (inline CSS, SVG, or Canvas API)
- Composition: asymmetric balance, golden ratio or rule of thirds, deliberate negative space
- Color: 2–3 colors maximum, one dominant, one accent, one neutral
- The work should feel as if it took countless hours — refinement over addition
- Embed subtle conceptual references — informed viewers intuit meaning, others see beauty
Template structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 800px; height: 600px; overflow: hidden; background: ...; }
</style>
</head>
<body>
</body>
</html>
D. Interactive Artifact (React / shadcn / Tailwind)
Stack: React 18 + TypeScript + Tailwind CSS 3 + shadcn/ui
Rules:
- NEVER: excessive centered layouts, purple gradients, uniform rounded corners, Inter font
- shadcn/ui components: Button, Card, Dialog, Select, Input, Badge, Tabs, etc.
- Self-contained single HTML file (bundle with Vite/Parcel if needed)
- For generative/parametric work: seed-based randomness for reproducibility
- Include interactive parameter controls (sliders, toggles) for generative artifacts
- P5.js for algorithmic/generative art — seed navigation (prev/next/random/jump)
Anti-patterns to avoid:
❌ <div className="flex flex-col items-center justify-center min-h-screen">
❌ gradient-to-r from-purple-500 to-blue-500
❌ rounded-full on every element
❌ font-family: Inter everywhere
D2. Library Palette — When to Use What
animate-ui (animated components, React + Tailwind + Motion)
Use when: wow-effects needed, animated backgrounds, live buttons, micro-interactions.
Install via Shadcn CLI:
npx shadcn@latest add "https://animate-ui.com/r/<component-name>"
Components by category:
| Category | Components |
|---|
| Buttons | button, copy-button, flip-button, liquid-button, ripple-button, icon-button, github-stars-button, theme-toggler-button |
| Backgrounds | bubble, fireworks, gradient, gravity-stars, hexagon, hole, stars |
| Animate UI | avatar-group, code, code-tabs, cursor, tabs, tooltip, github-stars-wheel |
| Radix UI | accordion, alert-dialog, checkbox, dialog, dropdown-menu, files, hover-card, popover, progress, radio-group, sheet, sidebar, switch, tabs, toggle, tooltip |
| Community | flip-card, motion-carousel, notification-list, pin-list, playful-todolist, radial-menu, radial-nav, share-button, user-presence-avatar |
Rules:
- Always check
prefers-reduced-motion — animate-ui doesn't do this automatically
- Liquid/Ripple buttons — only for primary CTA, not all buttons
- Gravity Stars / Fireworks backgrounds — only for hero sections, not under content
heroui (production UI library, 50+ components, npm)
Use when: production-ready component library needed with accessibility (React Aria), forms, tables, navigation.
Install:
npm install @heroui/react
npx heroui-cli@latest add <component-name>
Provider (required at root):
import { HeroUIProvider } from "@heroui/react";
export default function App() {
return <HeroUIProvider><YourApp /></HeroUIProvider>;
}
Components by category:
| Category | Components |
|---|
| Form | Input, Select, Checkbox, Radio, Switch, Textarea, Autocomplete, Slider, Calendar, DatePicker |
| Navigation | Navbar, Breadcrumbs, Tabs, Pagination, Link |
| Feedback | Alert, Badge, Spinner, Progress, Toast |
| Overlays | Modal, Popover, Dropdown, Tooltip, Drawer |
| Data | Table, Card, Avatar, Image, User, Chip |
import { Button } from "@heroui/react";
<Button color="primary" variant="shadow">Action</Button>
Rules:
- HeroUI has its own theme — don't mix with Tailwind custom colors without configuration
- For dark mode: add
dark class to <html> — HeroUI picks it up automatically
- Don't use together with shadcn/ui on the same components — style conflicts
Library selection for Interactive tasks:
Need animations / wow-effects / live backgrounds?
├── Yes → animate-ui (+ shadcn/ui for base components)
└── No → need full product UI with forms and tables?
├── Yes → heroui
└── No → shadcn/ui (default)
Universal Design Rules (All Types)
Typography
- Body: line-height 1.5–1.75, max 65–75 characters per line
- NEVER use emoji as icons — SVG icons only (Heroicons, Lucide, Simple Icons)
- Font pairing: distinctive display font + refined body font
- Minimum 16px body text on mobile
Accessibility (CRITICAL)
- Color contrast minimum 4.5:1 for normal text
- All interactive elements: visible focus ring
- Icon-only buttons:
aria-label required
- All images:
alt text
- Form inputs:
<label for=""> required
prefers-reduced-motion must be respected
Touch & Interaction (CRITICAL)
- Minimum 44×44px touch targets
cursor-pointer on ALL clickable elements- Button disabled during async operations
- Error messages appear near the problem
Layout
viewport-meta: width=device-width, initial-scale=1- No horizontal scroll at any breakpoint
- Responsive at: 375px / 768px / 1024px / 1440px
- Fixed navbars: add
top-4 left-4 right-4 spacing, account for height in content
Icons
- Icon set: Heroicons or Lucide — consistent across project
- Brand logos: verify from Simple Icons before using
- Fixed viewBox (24×24) with consistent sizing
Quality Gate — MANDATORY before delivery
Run this checklist internally before showing the result. If ANY item fails, fix it first.
DESIGN QUALITY GATE
═══════════════════════════════════════════════════════
[ ] 1. Typography distinctive?
→ Not Inter/Arial/Roboto without customization
→ Has a clear typographic personality
[ ] 2. Would a designer be impressed?
→ If answer is "probably not" — redesign the boldest element
→ One thing should be truly memorable
[ ] 3. No purple gradient on white?
→ If yes — replace with something intentional
[ ] 4. Color contrast ≥ 4.5:1?
→ Check primary text against its background
→ Check muted text too (often fails)
[ ] 5. Hover states without layout shift?
→ cursor-pointer on every clickable element
→ Transitions use color/opacity, not width/height
[ ] 6. Responsive at 375px, 768px, 1440px?
→ No horizontal scroll
→ Text readable without zooming
[ ] 7. SVG icons, zero emoji?
→ Search output for emoji characters
→ Replace all with SVG equivalents
═══════════════════════════════════════════════════════
ALL 7 MUST PASS. Do not deliver until they do.
Integration with Sub-Skills
| When | Delegate to |
|---|
| Need full design system generated via Python | ui-ux-pro-max (run search.py) |
| Building dark dashboard with components | ui-component-library (copy component CSS/HTML) |
| Need brand color extraction from PDF/PNG | extract-brand-palette |
| User explicitly requests detailed UX audit | ui-ux-pro-max (full checklist mode) |
| Need animated components / wow backgrounds | animate-ui (Shadcn CLI install) |
| Need production UI kit with 50+ components | heroui (npm install @heroui/react) |
Quick Decision Tree
User wants something visual?
├── Dashboard / data / KPI / admin?
│ └── → Approach B (Dashboard) + ui-component-library
├── Poster / graphic / visual art?
│ └── → Approach C (Philosophy-first)
├── React / interactive / generative?
│ └── → Approach D (React/shadcn)
└── Everything else (web, landing, page)?
└── → Approach A (Web/Landing) + pick bold aesthetic direction
Every path ends with: Quality Gate (all 7 checks).
Delivery
File structure
When creating a Web / Landing artifact — always save as <project-slug>/index.html,
not a flat file in the root directory. Create the folder first.
mkdir <project-slug> && write to <project-slug>/index.html
Preview (Windows + VS Code Remote SSH)
cd <project-slug> && py -m http.server 3000
Use py (Python Launcher) — not python or python3.
On Windows, python may resolve to the Microsoft Store stub (exit code 49).
VS Code Remote SSH: port 3000 appears in the Ports tab automatically →
click the globe icon or open http://localhost:3000 in your browser.
