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

# 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.)

Stitch Design Taste

Stitch Design Taste — Semantic Design System Skill

Overview

Prerequisites

The Goal

Analysis & Synthesis Instructions

1. Define the Atmosphere

2. Map the Color Palette

3. Establish Typography Rules

4. Define the Hero Section

5. Describe Component Stylings

6. Define Layout Principles

7. Define Responsive Rules

8. Encode Motion Philosophy

9. List Anti-Patterns (AI Tells)

Output Format (DESIGN.md Structure)

Best Practices

Tips for Success

Common Pitfalls to Avoid