Stitch Design Taste
Generate a Stitch-ready DESIGN.md so Google Stitch prompts produce premium, anti-generic screens with calibrated type, color, motion, and performance rules.
Overview
Stitch Design Taste is an agent skill most often used in Build (also Validate prototype) that writes DESIGN.md files enforcing premium, anti-generic UI rules for Google Stitch generation.
Install
npx skills add https://github.com/leonxlnx/taste-skill --skill stitch-design-tasteWhat is this skill?
- Outputs agent-friendly DESIGN.md as single source of truth for Stitch screen generation
- Encodes anti-slop standards: strict typography, calibrated neutrals and accents, banned generic patterns
- Specifies asymmetric layouts and perpetual micro-motion with hardware-accelerated performance guardrails
- Maps battle-tested frontend engineering directives into Stitch semantic design language
- Optional Stitch MCP integration for Cursor, Antigravity, or Gemini CLI workflows
- 5 encoded pillars in DESIGN.md goal list: atmosphere, color, typography, layout/motion, performance
Adoption & trust: 87.8k installs on skills.sh; 37.9k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Stitch outputs drift toward generic layouts and typography because you lack a single semantic design contract for every screen prompt.
Who is it for?
Builders on Google Stitch who want repeatable, high-agency UI generation via DESIGN.md and optional MCP automation.
Skip if: Teams not using Stitch, or projects that only need one-off CSS without a persistent design language file.
When should I use this skill?
You use Google Stitch and need a DESIGN.md that enforces premium typography, calibrated color, asymmetric layout, and micro-motion before generating screens.
What do I get? / Deliverables
You get a DESIGN.md Stitch treats as the source of truth—mood, colors, type, motion, and banned patterns—so new screens stay on-brand without re-explaining taste each time.
- DESIGN.md optimized for Stitch semantic interpretation
- Documented banned patterns, font stacks, and component behavior rules
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is Build because the deliverable is a semantic design file that drives screen generation and frontend consistency. Frontend captures typography architecture, color calibration, layout asymmetry, and component behaviors Stitch interprets as visual descriptions.
Where it fits
Draft DESIGN.md before generating first Stitch flows to prove the product does not look like a template dashboard.
Regenerate or extend DESIGN.md when adding settings, billing, or onboarding screens in Stitch.
Wire Stitch MCP so Cursor agents read the same DESIGN.md on every programmatic screen request.
How it compares
Semantic DESIGN.md generator for Stitch—not the same as hand-coded brutalist CSS skills or MCP servers that call external APIs without design doctrine.
Common Questions / FAQ
Who is stitch-design-taste for?
Solo builders and small teams using Google Stitch who need curated, non-generic design rules encoded for an AI screen generator.
When should I use stitch-design-taste?
In Validate when locking visual direction for a prototype, and in Build whenever you add Stitch screens—after you have Stitch access and before bulk-generating UI.
Is stitch-design-taste safe to install?
Check the Security Audits panel on this page; using Stitch and optional MCP may involve Google accounts and network access you should scope yourself.
SKILL.md
READMESKILL.md - Stitch Design Taste
# 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](https://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: - **Inline Image Typography:** Embed small, contextual photos or visuals directly between words o