Stitch Design Taste — Semantic Design System Skill

When to Use

• Use when the user wants a Google Stitch-compatible DESIGN.md or semantic design system for AI screen generation.
• Use when translating premium frontend taste rules into Stitch-friendly visual descriptions, color roles, typography specs, and component behavior.
• Use when the design system must prevent generic AI UI patterns before screens are generated.

Limitations

• This skill produces semantic design-system guidance for Stitch; it does not guarantee Stitch will render every constraint exactly.
• Generated DESIGN.md files still require review against the actual product brief, brand constraints, accessibility needs, and screen content.
• Motion sections document implementation intent for later coding agents because Stitch itself may generate static screens.

Overview

This skill generates DESIGN.md files optimized for Google Stitch screen generation. It translates the battle-tested anti-slop frontend engineering directives into Stitch's native semantic design language — descriptive, natural-language rules paired with precise values that Stitch's AI agent can interpret to produce premium, non-generic interfaces.

The generated DESIGN.md serves as the single source of truth for prompting Stitch to generate new screens that align with a curated, high-agency design language. Stitch interprets design through "Visual Descriptions" supported by specific color values, typography specs, and component behaviors.

Prerequisites

• Access to Google Stitch via labs.google.com/stitch
• Optionally: Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI

The Goal

Generate a DESIGN.md file that encodes:

1. Visual atmosphere — the mood, density, and design philosophy
2. Color calibration — neutrals, accents, and banned patterns with hex codes
3. Typographic architecture — font stacks, scale hierarchy, and anti-patterns
4. Component behaviors — buttons, cards, inputs with interaction states
5. Layout principles — grid systems, spacing philosophy, responsive strategy
6. Motion philosophy — animation engine specs, spring physics, perpetual micro-interactions
7. Anti-patterns — explicit list of banned AI design clichés

Analysis & Synthesis Instructions

1. Define the Atmosphere

Evaluate the target project's intent. Use evocative adjectives from the taste spectrum:

• Density: "Art Gallery Airy" (1–3) → "Daily App Balanced" (4–7) → "Cockpit Dense" (8–10)
• Variance: "Predictable Symmetric" (1–3) → "Offset Asymmetric" (4–7) → "Artsy Chaotic" (8–10)
• Motion: "Static Restrained" (1–3) → "Fluid CSS" (4–7) → "Cinematic Choreography" (8–10)

Default baseline: Variance 8, Motion 6, Density 4. Adapt dynamically based on user's vibe description.

2. Map the Color Palette

For each color provide: Descriptive Name + Hex Code + Functional Role.

Mandatory constraints:

• Maximum 1 accent color. Saturation below 80%
• The "AI Purple/Blue Neon" aesthetic is strictly BANNED — no purple button glows, no neon gradients
• Use absolute neutral bases (Zinc/Slate) with high-contrast singular accents
• Stick to one palette for the entire output — no warm/cool gray fluctuation
• Never use pure black (#000000) — use Off-Black, Zinc-950, or Charcoal

3. Establish Typography Rules

• Display/Headlines: Track-tight, controlled scale. Not screaming. Hierarchy through weight and color, not just massive size
• Body: Relaxed leading, max 65 characters per line
• Font Selection: Inter is BANNED for premium/creative contexts. Force unique character: Geist, Outfit, Cabinet Grotesk, or Satoshi
• Serif Ban: Generic serif fonts (Times New Roman, Georgia, Garamond, Palatino) are BANNED. If serif is needed for editorial/creative contexts, use only distinctive modern serifs: Fraunces, Gambarino, Editorial New, or Instrument Serif. Serif is always BANNED in dashboards or software UIs
• Dashboard Constraint: Use Sans-Serif pairings exclusively (Geist + Geist Mono or Satoshi + JetBrains Mono)
• High-Density Override: When density exceeds 7, all numbers must use Monospace

4. Define the Hero Section

The Hero is the first impression and must be creative, striking, and never generic:

…