UI Design — Styles + Composition + Implementation
Complete design intelligence: searchable database (styles, colors, typography) + visual composition theory + stack-specific implementation.
Quick Start
# Generate complete design system for a project
python3 skills/ui-design/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"
# Search specific domains
python3 skills/ui-design/scripts/search.py "glassmorphism dark" --domain style
python3 skills/ui-design/scripts/search.py "elegant luxury" --domain typography
# Stack-specific guidelines
python3 skills/ui-design/scripts/search.py "responsive form" --stack html-tailwind
Part 1: Design System Generator
Workflow
- Analyze Requirements — Product type, style keywords, industry, stack
- Generate Design System —
--design-system flag for comprehensive recommendations
- Supplement with Searches — Domain-specific deep dives
- Apply Stack Guidelines — Implementation best practices
Available Domains
| Domain |
Use For |
product |
SaaS, e-commerce, portfolio, healthcare |
style |
glassmorphism, minimalism, brutalism |
typography |
Font pairings by mood |
color |
Palettes by product type |
landing |
Page structure, CTA strategies |
chart |
Data visualization |
ux |
Best practices, anti-patterns |
Available Stacks
html-tailwind (default), react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
Persist Design System
# Save as Master + page overrides
python3 skills/ui-design/scripts/search.py "fintech dashboard" --design-system --persist -p "FinApp"
Creates:
design-system/MASTER.md — Global source of truthdesign-system/pages/ — Page-specific overrides
Part 2: Visual Composition
Core Principles
1. Visual Hierarchy
Guide attention to important elements first.
| Technique |
How |
| Scale |
Larger = more important |
| Contrast |
High contrast draws eye |
| Position |
Top/center noticed first |
| Typography |
Size + weight create levels |
Example hierarchy:
1. Hero heading (48px, bold)
2. Subheading (24px, medium)
3. Body (16px, regular)
4. CTA button (accent color)
2. Balance
Equally distributed visual weight (not necessarily symmetrical).
- Symmetrical — Formal, stable (login forms, corporate)
- Asymmetrical — Dynamic, engaging (modern web apps)
- Radial — Center focus (loading spinners, logos)
3. Visual Weight
Factors: size, color (warm > cool), saturation, position, isolation, texture.
Heavy (draw attention): Light (supporting):
- Large hero images - Body text
- Bright CTA buttons - Low-contrast backgrounds
- Isolated floating cards - Grouped items
4. Gestalt Principles
| Principle |
Application |
| Proximity |
Group related fields |
| Similarity |
Consistent button styles |
| Closure |
Minimal icons, implied shapes |
| Continuity |
Timelines, breadcrumbs |
| Figure/Ground |
Modal overlays, card elevation |
5. Typography Scale
Display: 60-96px (hero)
H1: 48px (page title)
H2: 36px (section)
H3: 24px (subsection)
Body: 16-18px
Small: 14px (captions)
- Line length: 50-75 characters
- Line height: 1.5-1.75 (body), 1.1-1.3 (headings)
- Max 2-3 font families
6. Color Strategy
- Dominant (60%) — Primary color
- Secondary (30%) — Supporting
- Accent (10%) — CTAs, highlights
Contrast: WCAG AA minimum 4.5:1 for text.
7. Spacing Rhythm
Use consistent scale: 4, 8, 16, 24, 32, 48, 64px (multiples of 8).
Part 3: Pre-Delivery Checklist
Visual Quality
Hierarchy
Balance
Accessibility
Responsive
Anti-Patterns
| ❌ Don't |
✅ Do |
| Make everything bold/large |
Use de-emphasis for hierarchy |
| 4+ font families |
Max 2-3, vary weight instead |
| Random spacing |
Consistent 8px scale |
| Center everything |
Use asymmetry for interest |
| Borders everywhere |
Shadows, backgrounds, space |
| Emojis as icons |
SVG icon library |
Common Rules
Icons & Logos
- Use SVG icons (Heroicons, Lucide, Simple Icons)
- Research official brand logos
- Consistent icon sizing (24x24 viewBox)
Interaction
cursor-pointer on all clickable elements- Hover feedback (color, shadow, border change)
- Smooth transitions (
transition-colors duration-200)
Light/Dark Mode
- Light mode:
bg-white/80+, text slate-900, muted slate-600
- Dark mode: higher opacity, lower contrast
- Test both modes before delivery
Layout
- Floating navbar:
top-4 left-4 right-4 spacing
- Account for fixed header height
- Consistent
max-w-6xl or max-w-7xl
Related Skills
| Skill |
When to Use |
ui-patterns |
Research first — see real dropdowns, accordions, inputs from Collect UI, Component Gallery, Mobbin |
frontend-design |
Execute with distinctive aesthetics, avoid generic AI look |
shadcn-ui |
Get accessible component foundations to customize |
Recommended workflow: ui-patterns (research) → ui-design (principles) → frontend-design (execution)
Resources
1---2name: ui-design3description: Complete UI/UX design system: 50+ styles, 97 palettes, 57 font pairings, composition principles, visual hierarchy, Gestalt, accessibility. Use for: design, build, review, fix UI. Covers React, Next.js, Vue, Svelte, SwiftUI, Flutter, Tailwind, shadcn/ui.4---56# UI Design — Styles + Composition + Implementation78Complete design intelligence: searchable database (styles, colors, typography) + visual composition theory + stack-specific implementation.910## Quick Start1112```bash13# Generate complete design system for a project14python3 skills/ui-design/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"1516# Search specific domains17python3 skills/ui-design/scripts/search.py "glassmorphism dark" --domain style18python3 skills/ui-design/scripts/search.py "elegant luxury" --domain typography1920# Stack-specific guidelines21python3 skills/ui-design/scripts/search.py "responsive form" --stack html-tailwind22```2324---2526## Part 1: Design System Generator2728### Workflow29301. **Analyze Requirements** — Product type, style keywords, industry, stack312. **Generate Design System** — `--design-system` flag for comprehensive recommendations323. **Supplement with Searches** — Domain-specific deep dives334. **Apply Stack Guidelines** — Implementation best practices3435### Available Domains3637| Domain | Use For |38|--------|---------|39| `product` | SaaS, e-commerce, portfolio, healthcare |40| `style` | glassmorphism, minimalism, brutalism |41| `typography` | Font pairings by mood |42| `color` | Palettes by product type |43| `landing` | Page structure, CTA strategies |44| `chart` | Data visualization |45| `ux` | Best practices, anti-patterns |4647### Available Stacks4849`html-tailwind` (default), `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`5051### Persist Design System5253```bash54# Save as Master + page overrides55python3 skills/ui-design/scripts/search.py "fintech dashboard" --design-system --persist -p "FinApp"56```5758Creates:59- `design-system/MASTER.md` — Global source of truth60- `design-system/pages/` — Page-specific overrides6162---6364## Part 2: Visual Composition6566### Core Principles6768#### 1. Visual Hierarchy6970Guide attention to important elements first.7172| Technique | How |73|-----------|-----|74| Scale | Larger = more important |75| Contrast | High contrast draws eye |76| Position | Top/center noticed first |77| Typography | Size + weight create levels |7879**Example hierarchy:**80```811. Hero heading (48px, bold)822. Subheading (24px, medium)833. Body (16px, regular)844. CTA button (accent color)85```8687#### 2. Balance8889Equally distributed visual weight (not necessarily symmetrical).9091- **Symmetrical** — Formal, stable (login forms, corporate)92- **Asymmetrical** — Dynamic, engaging (modern web apps)93- **Radial** — Center focus (loading spinners, logos)9495#### 3. Visual Weight9697Factors: size, color (warm > cool), saturation, position, isolation, texture.9899```100Heavy (draw attention): Light (supporting):101- Large hero images - Body text102- Bright CTA buttons - Low-contrast backgrounds103- Isolated floating cards - Grouped items104```105106#### 4. Gestalt Principles107108| Principle | Application |109|-----------|-------------|110| Proximity | Group related fields |111| Similarity | Consistent button styles |112| Closure | Minimal icons, implied shapes |113| Continuity | Timelines, breadcrumbs |114| Figure/Ground | Modal overlays, card elevation |115116#### 5. Typography Scale117118```119Display: 60-96px (hero)120H1: 48px (page title)121H2: 36px (section)122H3: 24px (subsection)123Body: 16-18px124Small: 14px (captions)125```126127- Line length: 50-75 characters128- Line height: 1.5-1.75 (body), 1.1-1.3 (headings)129- Max 2-3 font families130131#### 6. Color Strategy132133- **Dominant** (60%) — Primary color134- **Secondary** (30%) — Supporting135- **Accent** (10%) — CTAs, highlights136137Contrast: WCAG AA minimum 4.5:1 for text.138139#### 7. Spacing Rhythm140141Use consistent scale: 4, 8, 16, 24, 32, 48, 64px (multiples of 8).142143---144145## Part 3: Pre-Delivery Checklist146147### Visual Quality148- [ ] No emojis as icons (use SVG: Heroicons, Lucide)149- [ ] Consistent icon set150- [ ] Hover states don't cause layout shift151- [ ] Transitions 150-300ms152153### Hierarchy154- [ ] Obvious where to look first155- [ ] Sizes reflect importance156- [ ] Clear typography levels157158### Balance159- [ ] Layout feels stable160- [ ] Visual weights distributed161- [ ] Works at all screen sizes162163### Accessibility164- [ ] 4.5:1 contrast ratio minimum165- [ ] Visible focus states166- [ ] Alt text on images167- [ ] `prefers-reduced-motion` respected168169### Responsive170- [ ] Test 375px, 768px, 1024px, 1440px171- [ ] No horizontal scroll on mobile172- [ ] Touch targets 44x44px minimum173174---175176## Anti-Patterns177178| ❌ Don't | ✅ Do |179|---------|------|180| Make everything bold/large | Use de-emphasis for hierarchy |181| 4+ font families | Max 2-3, vary weight instead |182| Random spacing | Consistent 8px scale |183| Center everything | Use asymmetry for interest |184| Borders everywhere | Shadows, backgrounds, space |185| Emojis as icons | SVG icon library |186187---188189## Common Rules190191### Icons & Logos192- Use SVG icons (Heroicons, Lucide, Simple Icons)193- Research official brand logos194- Consistent icon sizing (24x24 viewBox)195196### Interaction197- `cursor-pointer` on all clickable elements198- Hover feedback (color, shadow, border change)199- Smooth transitions (`transition-colors duration-200`)200201### Light/Dark Mode202- Light mode: `bg-white/80+`, text `slate-900`, muted `slate-600`203- Dark mode: higher opacity, lower contrast204- Test both modes before delivery205206### Layout207- Floating navbar: `top-4 left-4 right-4` spacing208- Account for fixed header height209- Consistent `max-w-6xl` or `max-w-7xl`210211---212213## Related Skills214215| Skill | When to Use |216|-------|-------------|217| **`ui-patterns`** | Research first — see real dropdowns, accordions, inputs from Collect UI, Component Gallery, Mobbin |218| **`frontend-design`** | Execute with distinctive aesthetics, avoid generic AI look |219| **`shadcn-ui`** | Get accessible component foundations to customize |220221**Recommended workflow**: `ui-patterns` (research) → `ui-design` (principles) → `frontend-design` (execution)222223---224225## Resources226227- [Refactoring UI](https://www.refactoringui.com/)228- [Designing Interfaces](https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/)229- [Butterick's Practical Typography](https://practicaltypography.com/)230- [Laws of UX](https://lawsofux.com/)
snqb