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

| 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, iridescent | | Terminal / Hacker | Monospace, information-dense, command palette | JetBrains Mono, Geist Mono | Dark + semantic (green/red/yellow) | | Kinetic Typography | Scroll-driven text animation, split reveals | Instrument Serif, Clash Display | Mono/limited palette, type-focused |

---

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 & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: wigtn
• Source: wigtn/wigtn-plugins
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.