/design-system-reference

name: design-system-reference
description: Style guides and implementation rules for frontend design. Works with design-discovery agent which handles context gathering and VS-based style recommendations. Contains detailed style guides, anti-patterns, and implementation checklists.
allowed-tools: Read, Write, Edit, Glob

Design Implementation Guide

Overview

This skill provides **style guides and implementation rules** for frontend design.

**For design discovery and style selection**, use the `design-discovery` agent which:

• Gathers context through step-by-step questions
• Uses VS (Verbalized Sampling) technique to recommend styles with suitability percentages
• Applies AIDA methodology for landing pages

This skill is automatically loaded after the agent completes discovery.

---

How to Use

With Discovery Agent (Recommended)

1. User requests frontend design 2. `design-discovery` agent conducts context gathering 3. Agent presents VS-based style recommendations 4. After style selection, agent loads this skill for implementation

Direct Usage (Quick Mode)

If user already knows their style, skip discovery:

"Build me a landing page with Bento Grid style, dark theme, minimal animations"

In this case, directly read the relevant style guide and implement.

---

Style Selection & Guidelines

Based on user responses, select the appropriate style and read the corresponding guide.

Read both the style guide and the relevant common modules before implementing.

Available Style Guides

Use the `Read` tool to read the corresponding style file:

• Editorial → `styles/editorial.md`
• Brutalist → `styles/brutalist.md`
• Neobrutalism → `styles/neobrutalism.md`
• Glassmorphism → `styles/glassmorphism.md`
• Liquid Glass → `styles/liquid-glass.md`
• Swiss Minimal → `styles/swiss-minimal.md`
• Minimalism → `styles/minimalism.md`
• Neomorphism → `styles/neomorphism.md`
• Claymorphism → `styles/claymorphism.md`
• Skeuomorphism → `styles/skeuomorphism.md`
• Bento Grid → `styles/bento-grid.md`
• Dark Mode First → `styles/dark-mode-first.md`
• Minimal Corporate → `styles/minimal-corporate.md`
• Retro Pixel → `styles/retro-pixel.md`
• Organic Shapes → `styles/organic-shapes.md`
• Maximalist → `styles/maximalist.md`
• 3D Immersive → `styles/3d-immersive.md`
• Aurora / Gradient Mesh → `styles/aurora-gradient.md`
• Terminal / Hacker → `styles/terminal-hacker.md`
• Kinetic Typography → `styles/kinetic-typography.md`

Common Modules (선택에 따라 참조)

• Colors → `common/colors.md` (color systems, palettes, dark mode)
• Animations → `common/animations.md` (motion principles, Tailwind animations)
• Spacing → `common/spacing.md` (density systems, responsive spacing)

Do NOT proceed to implementation without reading: 1. The chosen style guide 2. Relevant common modules based on user's detail choices

---

Phase 3: Implementation

Universal Principles

❌ AI Slop 안티패턴 (피하기)

• Default fonts like Inter, Roboto, Arial, system-ui
• Purple gradient + white background combos
• Applying rounded-xl to everything
• Meaningless shadow spam
• Repetitive identical card components
• Using only Tailwind defaults
• Generic hero sections with stock images
• Overusing blur effects
• Inconsistent spacing

✅ 지향

• Make intentional design decisions with clear reasoning
• Choose distinctive fonts that match the style (use Google Fonts)
• Create intentional color palettes (manage with CSS variables)
• Establish clear typography hierarchy (3-4 levels max)
• Use meaningful spacing scale (4px base: 4, 8, 12, 16, 24, 32, 48, 64)
• Apply details and finishing touches that match the chosen style
• Ensure contrast ratios meet WCAG AA (4.5:1 for text)
• Test responsive behavior at key breakpoints

---

Style Quick Reference

| Style | Key Characteristics | Example Fonts | Color Traits | |-------|-------------------|---------------|--------------| | Editorial | Large type, intentional whitespace, asymmetry | Playfair Display, Cormorant | Monotone, single accent | | Brutalist | Raw, thick borders, rule-breaking | Monument Extended, Archivo Black | High contrast, primary colors | | **Neobrutalism** | Thick borders, hard shadows, playful colors | Space Grotesk, Clash Display | Vivid pastels, cheerful | | Glassmorphism | Blur, transparency, soft light | SF Pro, Plus Jakarta Sans | Pastel + white | | **Liquid Glass** | Dynamic refraction, specular highlights, alive | SF Pro, Geist, Inter | Environment-adaptive tints | | Swiss Minimal | Grid, typography-focused, refined | Helvetica Neue, Suisse Int'l | B&W + single accent | | **Minimalism** | Extreme whitespace, near-monochrome, zen | Inter, Instrument Sans | Near-absence of color | | Organic | Curves, blobs, natural flow | Fraunces, DM Serif | Earth tones, warm neutrals | | **Neomorphism** | Soft 3D, inset shadows, tactile | Inter, Outfit | Muted, low contrast | | **Claymorphism** | Puffy clay surfaces, inner highlights, pastel | Nunito, Quicksand, Fredoka | Warm pastels, candy tones | | **Skeuomorphism** | Real-world textures, realistic depth, physical | Playfair Display, Lora | Leather/wood/metal warm tones | | **Bento Grid** | Modular cards, varied sizes, Apple-like | SF Pro, Geist | Neutral + vibrant accents | | **Dark Mode First** | Dark backgrounds, neon accents, glow | JetBrains Mono, Fira Code | Dark + neon | | **Minimal Corporate** | Clean, trustworthy, professional | DM Sans, Satoshi | Blue/gray, conservative | | **Retro Pixel** | CRT effects, terminal aesthetics, pixelated | Press Start 2P, VT323 | Green/amber on black | | **Organic Shapes** | Blobs, curves, natural flow | Fraunces, Nunito | Earth tones, warm naturals | | **Maximalist** | Bold type, intense colors, layered | Clash Display, Syne | Saturated, multi-color | | **3D Immersive** | CSS 3D transforms, parallax, depth | Space Grotesk, Geist | Dark + gradient depth | | **Aurora / Gradient Mesh** | Mesh gradients, color fields, ambient glow | Geist, Inter, Satoshi | Multi-stop gradients,