Frontend Design Skill
Overview
This orchestrator skill composes five design dimensions with tech-specific implementations to create distinctive, production-grade frontends that avoid generic AI design patterns.
The 5 Dimensions:
- Typography – Typeface selection, font pairings, weights, sizing, and hierarchy
- Color & Theme – Emotional intent, color systems, and unexpected accents
- Motion – Orchestrated animations, easing, and interaction choreography
- Spatial Composition – Layout, spacing systems, and asymmetrical design
- Backgrounds & Details – Subtle textures, gradients, and visual rewards
Tech Implementations (choose one):
- React with Vite and Framer Motion
- Vue (Options API or Composition API)
- Svelte with custom animations
- HTML/CSS/SCSS fundamentals
- Design system integrations (Tailwind, shadcn/ui, Radix, Material)
Quick Navigation
"I need to create..." - "I want to focus on..."
Typography dimension
→ See ./sub-skills/typography.md
Color & theme system
→ See ./sub-skills/color-theme.md
Motion & animations
→ See ./sub-skills/motion.md
Spatial layout & composition
→ See ./sub-skills/spatial.md
Backgrounds & visual details
→ See ./sub-skills/backgrounds.md
Design thinking checklist
→ See ./sub-skills/design-thinking.md
8-Phase Workflow
- Design Thinking – Answer purpose, tone, constraints, differentiation
- Typography – Select typefaces, weights, sizes, hierarchy
- Color & Theme – Define emotional intent, color system, accents
- Motion – Plan animations, easing, interaction sequences
- Spatial Composition – Design layouts, spacing scales, asymmetry
- Backgrounds & Details – Add subtle textures, gradients, micro-details
- Implementation – Follow your tech-specific sub-skill
- Validation – Design review, accessibility, performance, mobile
Anti-Patterns (Reject These)
Typography
- ❌ Inter, Roboto, Open Sans, Lato, system fonts
- ❌ Mid-range weights only (400, 500, 600)
- ❌ Incremental size scaling (48px → 40px → 32px)
Color
- ❌ Material Design trinity (Blue, Red, Green)
- ❌ Pure grays without personality (#999, #CCC)
- ❌ Oversaturated neon accents
Layout
- ❌ Everything centered (predictable, boring)
- ❌ Uniform padding everywhere
- ❌ "Default SaaS dashboard" aesthetic
Motion
- ❌ Linear timing on everything
- ❌ No animation at all
- ❌ Slow, sluggish transitions (2s+)
Sub-Skills Reference
| Sub-Skill | Purpose |
|-----------|---------|
| typography | Font selection, pairings, hierarchy, sizing |
| color-theme | Color systems, emotional intent, accents |
| motion | Animations, easing, orchestration, scroll triggers |
| spatial | Layout systems, asymmetry, spacing scales |
| backgrounds | Gradients, textures, micro-details, patterns |
| design-thinking | Pre-design checklist and strategic thinking |
Framework Sub-Skills Reference
| Framework | Create New | Fix Existing |
|-----------|-----------|--------------|
| React + Vite | frontend-design-react | frontend-design-fix-react |
| Vue | frontend-design-vue | frontend-design-fix-vue |
| Svelte | frontend-design-svelte | frontend-design-fix-svelte |
| HTML/CSS | frontend-design-html | frontend-design-fix-html |
When to Use This Skill
✅ Building a distinctive frontend that doesn't look AI-generated ✅ Need guidance on typography, color, motion, and layout composition ✅ Want to avoid generic design patterns and clichés ✅ Implementing a design system with intentional principles ✅ Creating multi-page apps with consistent design language
Getting Started
- Pick your framework (React, Vue, Svelte, or HTML)
- Complete the design thinking checklist (
./sub-skills/design-thinking.md) - Follow the 8-phase workflow (this document)
- Apply each dimension using the corresponding sub-skill
- Validate against the anti-patterns checklist