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.

⚠️ IMPORTANT: You MUST read both the style guide AND 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 (Always Read Based on User Choices)

• 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

❌ Never Do This (AI Slop Prevention)

• 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

✅ Always Do This

• 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...

Source: wigtn/wigtn-plugins-with-claude-code — distributed by TomeVault.