Stitch Design Taste — Semantic Design System Skill

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:

• Visual atmosphere — the mood, density, and design philosophy

• Color calibration — neutrals, accents, and banned patterns with hex codes

• Typographic architecture — font stacks, scale hierarchy, and anti-patterns

• Component behaviors — buttons, cards, inputs with interaction states

• Layout principles — grid systems, spacing philosophy, responsive strategy

• Motion philosophy — animation engine specs, spring physics, perpetual micro-interactions

• 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

• Dashboard Constraint: Serif fonts are strictly BANNED for Dashboard/Software UIs. 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. Describe Component Stylings

For each component type, describe shape, color, shadow depth, and interaction behavior:

• Buttons: Tactile push feedback on active state. No neon outer glows. No custom mouse cursors

• Cards: Use ONLY when elevation communicates hierarchy. Tint shadows to background hue. For high-density layouts, replace cards with border-top dividers or negative space

• Inputs/Forms: Label above input, helper text optional, error text below. Standard gap spacing

• Loading States: Skeletal loaders matching layout dimensions — no generic circular spinners

• Empty States: Composed compositions indicating how to populate data

• Error States: Clear, inline error reporting

5. Define Layout Principles

• Centered Hero sections are BANNED when variance exceeds 4 — force Split Screen, Left-Aligned, or Asymmetric Whitespace

• The generic "3 equal cards horizontally" feature row is BANNED — use 2-column Zig-Zag, asymmetric grid, or horizontal scroll

• CSS Grid over Flexbox math — never use calc() percentage hacks

• Contain layouts using max-width constraints (e.g., 1400px centered)

• Full-height sections must use min-h-[100dvh] — never h-screen (iOS Safari catastrophic jump)

6. Encode Motion Philosophy

• Spring Physics default: stiffness: 100, damping: 20 — premium, weighty feel. No linear easing

• Perpetual Micro-Interactions: Every active component should have an infinite loop state (Pulse, Typewriter, Float, Shimmer)

• Staggered Orchestration: Never mount lists instantly — use cascade delays for waterfall reveals

• Performance: Animate exclusively via transform and opacity . Never animate top , left , width , height . Grain/noise filters on fixed pseudo-elements only

7. List Anti-Patterns (AI Tells)

Encode these as explicit "NEVER DO" rules in the DESIGN.md:

• No emojis anywhere

• No Inter font

• No pure black (#000000 )

• No neon/outer glow shadows

• No oversaturated accents

• No excessive gradient text on large headers

• No custom mouse cursors

• No 3-column equal card layouts

• No generic names ("John Doe", "Acme", "Nexus")

• No fake round numbers (99.99% , 50% )

• No AI copywriting clichés ("Elevate", "Seamless", "Unleash", "Next-Gen")

• No broken Unsplash links — use picsum.photos or SVG avatars

• No centered Hero sections (for high-variance projects)

Output Format (DESIGN.md Structure)

Design System: [Project Title]

1. Visual Theme & Atmosphere

(Evocative description of the mood, density, variance, and motion intensity. Example: "A restrained, gallery-airy interface with confident asymmetric layouts and fluid spring-physics motion. The atmosphere is clinical yet warm — like a well-lit architecture studio.")

2. Color Palette & Roles

• Canvas White (#F9FAFB) — Primary background surface
• Pure Surface (#FFFFFF) — Card and container fill
• Charcoal Ink (#18181B) — Primary text, Zinc-950 depth
• Muted Steel (#71717A) — Secondary text, descriptions, metadata
• Whisper Border (rgba(226,232,240,0.5)) — Card borders, 1px structural lines
• [Accent Name] (#XXXXXX) — Single accent for CTAs, active states, focus rings (Max 1 accent. Saturation < 80%. No purple/neon.)

3. Typography Rules

• Display: [Font Name] — Track-tight, controlled scale, weight-driven hierarchy
• Body: [Font Name] — Relaxed leading, 65ch max-width, neutral secondary color
• Mono: [Font Name] — For code, metadata, timestamps, high-density numbers
• Banned: Inter, generic system fonts for premium contexts. Serif fonts banned in dashboards.

4. Component Stylings

• Buttons: Flat, no outer glow. Tactile -1px translate on active. Accent fill for primary, ghost/outline for secondary.
• Cards: Generously rounded corners (2.5rem). Diffused whisper shadow. Used only when elevation serves hierarchy. High-density: replace with border-top dividers.
• Inputs: Label above, error below. Focus ring in accent color. No floating labels.
• Loaders: Skeletal shimmer matching exact layout dimensions. No circular spinners.
• Empty States: Composed, illustrated compositions — not just "No data" text.

5. Layout Principles

(Grid-first responsive architecture. Asymmetric splits for Hero sections. Strict single-column collapse below 768px. Max-width containment. No flexbox percentage math. Generous internal padding.)

6. Motion & Interaction

(Spring physics for all interactive elements. Staggered cascade reveals. Perpetual micro-loops on active dashboard components. Hardware-accelerated transforms only. Isolated Client Components for CPU-heavy animations.)

7. Anti-Patterns (Banned)

(Explicit list of forbidden patterns: no emojis, no Inter, no pure black, no neon glows, no 3-column equal grids, no AI copywriting clichés, no generic placeholder names, no broken image links.)

Best Practices

• Be Descriptive: "Deep Charcoal Ink (#18181B)" — not just "dark text"

• Be Functional: Explain what each element is used for

• Be Consistent: Same terminology throughout the document

• Be Precise: Include exact hex codes, rem values, pixel values in parentheses

• Be Opinionated: This is not a neutral template — it enforces a specific, premium aesthetic

Tips for Success

• Start with the atmosphere — understand the vibe before detailing tokens

• Look for patterns — identify consistent spacing, sizing, and styling

• Think semantically — name colors by purpose, not just appearance

• Consider hierarchy — document how visual weight communicates importance

• Encode the bans — anti-patterns are as important as the rules themselves

Common Pitfalls to Avoid

• Using technical jargon without translation ("rounded-xl" instead of "generously rounded corners")

• Omitting hex codes or using only descriptive names

• Forgetting functional roles of design elements

• Being too vague in atmosphere descriptions

• Ignoring the anti-pattern list — these are what make the output premium

• Defaulting to generic "safe" designs instead of enforcing the curated aesthetic