Design System Reference

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

Example Scenarios

Scenario 1: Fashion Brand Landing Page

Target: Women 20-30 interested in fashion
Mood: Editorial/Magazine
Colors: Monochrome
Gradients: None
Animation: Moderate
Border Radius: Sharp
Spacing: Spacious

→ Apply Editorial style
→ Large serif headlines, generous whitespace, monotone, image overlap
→ Smooth scroll animations, no gradients, sharp edges

Scenario 2: SaaS Dashboard

Target: Business users 30-40
Mood: Minimal Corporate
Colors: Cool (blue-based)
Gradients: Subtle
Animation: Minimal
Border Radius: Slight
Spacing: Balanced

→ Apply Minimal Corporate style
→ Sans-serif, clear grid, functional design
→ Subtle hover states, light gradients for depth

Scenario 3: Developer Tool

Target: Developers 25-40
Mood: Dark Mode First
Colors: Dark with neon accents
Gradients: Subtle
Animation: Moderate
Border Radius: Slight
Spacing: Compact

→ Apply Dark Mode First style
→ Monospace fonts, syntax highlighting colors
→ Glow effects on interactive elements

Scenario 4: Portfolio Site

Target: Creative professionals
Mood: Bento Grid
Colors: Vibrant
Gradients: Mesh
Animation: Rich
Border Radius: Rounded
Spacing: Spacious

→ Apply Bento Grid style
→ Modular layout, varied card sizes
→ Complex animations, mesh gradient backgrounds

Final Checklist

Before completing the design, verify:

• Does it reflect the key characteristics of the chosen style?
• Is it free from generic AI-generated aesthetics?
• Is the typography distinctive with clear hierarchy?
• Is the color palette intentional and consistent?
• Do animations match the specified level (none/minimal/moderate/rich)?
• Is the border radius consistent throughout?
• Does spacing match the specified density?
• Are gradients used (or not used) as specified?
• Does it support the specified theme mode (light/dark/both)?
• Is there something memorable that users will remember?

Response Format

When presenting design choices to users, summarize the configuration:

## Design Configuration Summary

| Setting | Choice |
|---------|--------|
| Style | Swiss Minimal |
| Colors | Monochrome (Black + Blue accent) |
| Gradients | None |
| Animation | Minimal |
| Border Radius | Sharp (0px) |
| Spacing | Spacious |
| Theme | Light + Dark mode |

Proceeding with implementation...