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:

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)