design-style-guide

name	design-style-guide
description	Guide users to select a professional design style inspired by real-world brands, then apply it consistently across all subsequent frontend design work. Uses the DESIGN.md standard (from Google Stitch) to provide AI-ready design tokens, typography, color palettes, component patterns, and layout rules. Triggers when users want to pick a UI style, set up a design system, apply a brand-inspired look, or need consistent frontend styling guidance.
license	MIT

Design Style Guide Skill

This skill helps users select a professional design style inspired by real-world brand aesthetics and apply it consistently across all frontend design work. It leverages the DESIGN.md standard — a plain-text, Markdown-based design system document that AI coding agents can read directly.

Background

The DESIGN.md concept was introduced by Google Stitch as a structured Markdown file documenting design patterns observed on real websites. Think of it as the design counterpart to AGENTS.md: where AGENTS.md tells a coding agent how to build, DESIGN.md tells it how things should look and feel.

The awesome-design-md project (by VoltAgent, 44k+ stars) curates 66+ DESIGN.md files extracted from real production websites, each following a standardized 9-section format.

What Each DESIGN.md Contains

Every DESIGN.md follows a standardized structure with 9 sections:

1. Visual Theme & Atmosphere — Mood, density, design philosophy in prose
2. Color Palette & Roles — Semantic color names + hex values + functional roles
3. Typography Rules — Font families, full type hierarchy (role, size, weight, line-height, letter-spacing)
4. Component Stylings — Buttons (all states), cards, inputs, navigation with exact CSS values
5. Layout Principles — Spacing scale (base 8px), grid system, max container width, whitespace philosophy
6. Depth & Elevation — Shadow system, surface hierarchy with exact CSS box-shadow values
7. Do's and Don'ts — Explicit design guardrails and anti-patterns to avoid
8. Responsive Behavior — Named breakpoints, touch target minimums, collapsing strategies
9. Agent Prompt Guide — Quick color reference + copy-paste prompts for AI agents

Available Brand Styles (66+)

AI & LLM Platforms

• Claude — Warm parchment tones, terracotta accents, literary salon atmosphere
• Cursor — Dark editor-inspired, syntax-highlight accents
• ElevenLabs — Voice-focused, waveform-inspired design language
• Mistral — European tech minimalism, blue-orange palette
• Ollama — Terminal-native, developer-first aesthetic
• Replicate — API-focused, code-forward design
• RunwayML — Creative AI, cinematic dark theme
• xAI — Stark minimalism, monochrome with blue accent

Developer Tools

• Expo — React Native ecosystem, purple-blue gradient
• Lovable — Warm, approachable AI builder
• Raycast — macOS-native, spotlight-inspired
• Superhuman — Speed-focused, premium email aesthetic
• Vercel — Monochrome elegance, deployment-focused
• Warp — Modern terminal, gradient accents

Backend / DevOps

• ClickHouse — Data-focused, yellow-black branding
• HashiCorp — Enterprise infrastructure, black-white-accent
• MongoDB — Developer-friendly, green leaf branding
• PostHog — Playful analytics, hedgehog-inspired
• Sentry — Error-focused, purple diagnostic
• Supabase — Firebase alternative, green-dark theme

Productivity & SaaS

• Cal.com — Scheduling-focused, clean black-white
• Intercom — Conversational, blue-focused
• Linear — Issue tracking, purple-minimal
• Notion — Content workspace, warm neutrals
• Resend — Email API, developer-focused minimal
• Zapier — Automation, orange energy

Design & Creative

• Airtable — Colorful database, multi-hue palette
• Clay — Bold, artistic, gradient-heavy
• Figma — Design tool, vibrant multi-color
• Framer — Motion-focused, dark creative
• Miro — Collaborative whiteboard, yellow-blue
• Webflow — Visual builder, blue-gradient

Fintech & Crypto

• Binance — Gold-black trading aesthetic
• Coinbase — Trust-focused, blue minimal
• Kraken — Purple-dark, crypto exchange
• Revolut — Modern banking, dark premium
• Stripe — Signature purple gradients, weight-300 elegance
• Wise — Green transfer, friendly fintech

E-commerce & Media

• Airbnb — Travel warmth, coral-pink accent
• Apple — Ultra-clean, product-focused white space
• Nike — Bold athletic, black-white contrast
• Shopify — Commerce green, merchant-friendly
• Spotify — Music green on dark, vibrant
• Uber — Urban mobility, black-white sharp

Automotive

• BMW — Precision engineering, blue-white-silver
• Ferrari — Racing red, luxury performance
• Lamborghini — Gold-black, angular aggression
• Tesla — Electric minimal, tech-forward clean

...and more (IBM, NVIDIA, SpaceX, Pinterest, Meta, The Verge, WIRED, etc.)

Usage Workflow

Step 1: Present Style Options

When the user needs a design style, present the categories and brands above. Help them narrow down based on:

• Industry/context of their project
• Mood/atmosphere they want (minimal, bold, warm, dark, playful, premium)
• Target audience (developers, consumers, enterprise, creative)

Step 2: User Selects a Style

Once the user picks a brand style, install the DESIGN.md:

npx getdesign@latest add <brand-name>

This writes a DESIGN.md file to the project root with the complete design system.

Step 3: Read and Apply the DESIGN.md

After installation:

1. Read the DESIGN.md file to understand all design tokens
2. Extract key values: colors, fonts, spacing, shadows, component styles
3. Apply consistently across all subsequent frontend code generation

Step 4: Ongoing Consistency

For all subsequent frontend work in the project:

• Reference the DESIGN.md color palette by semantic name
• Use the typography hierarchy exactly as specified
• Follow the spacing scale and layout principles
• Respect the Do's and Don'ts guardrails
• Apply component styles (buttons, cards, inputs) per the spec

Integration with Other Skills

This skill works alongside:

• frontend-design: Use design-style-guide to SET the style, then frontend-design to IMPLEMENT distinctive UI with that style applied
• theme-factory: For slide decks and documents, theme-factory provides its own themes; this skill focuses on web/frontend design
• web-artifacts-builder: When building complex web artifacts, apply the selected DESIGN.md tokens

Custom Style Generation

If no existing brand matches the user's needs:

1. Ask the user to describe their desired mood, colors, and audience
2. Generate a custom DESIGN.md following the same 9-section format
3. Save it as DESIGN.md in the project root
4. Apply it the same way as any pre-built style

Key Principles

• Single source of truth: One DESIGN.md per project, read by all AI agents
• No tooling overhead: Pure Markdown, no build steps or token pipelines
• Production-grade values: Colors and typography extracted from real deployed websites
• Anti-drift guardrails: The Do's and Don'ts section prevents style inconsistency
• Semantic naming: Colors named by role (e.g., "Brand Accent," "Surface Card") not raw hex