Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
Permissions
Just instructions. No commands, network, or file access.
Files
SKILL.md
taste-design
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
allowed-tools
StitchMCP, Read, Write
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.
Default baseline: Creativity 9, Variance 8, Motion 6, Density 5. 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 or letters in the headline. Images sit inline at type-height, rounded, acting as visual punctuation. This is the signature creative technique
No Overlapping: Text must never overlap images or other text. Every element occupies its own clean spatial zone
No Filler Text: "Scroll to explore", "Swipe down", scroll arrow icons, bouncing chevrons are BANNED. The content should pull users in naturally
Asymmetric Structure: Centered Hero layouts BANNED when variance exceeds 4
CTA Restraint: Maximum one primary CTA. No secondary "Learn more" links
5. 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
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
9. List Anti-Patterns (AI Tells)
Encode these as explicit "NEVER DO" rules in the DESIGN.md:
No emojis anywhere
No Inter font
No generic serif fonts (Times New Roman, Georgia, Garamond) — distinctive modern serifs only if needed
No pure black (#000000)
No neon/outer glow shadows
No oversaturated accents
No excessive gradient text on large headers
No custom mouse cursors
No overlapping elements — clean spatial separation always
No 3-column equal card layouts
No generic names ("John Doe", "Acme", "Nexus")
No fake round numbers (99.99%, 50%)
No fabricated data or statistics — never generate metrics, performance numbers, uptime percentages, response times, or any data that the user did not explicitly provide. "99.98% UPTIME SLA", "124ms AVG. RESPONSE", "18.5k DEPLOY CYCLES" are invented AI filler. If real data is not available, use clear placeholder labels like [metric] instead of making up numbers
No fake system/metric sections — "SYSTEM PERFORMANCE METRICS", "KEY STATISTICS", "BY THE NUMBERS" dashboard cards filled with invented data are BANNED
No LABEL // YEAR formatting — "SYSTEM // 2024", "METRICS // 2025" is a lazy AI convention, not real design typography
No AI copywriting clichés ("Elevate", "Seamless", "Unleash", "Next-Gen")
No filler UI text: "Scroll to explore", "Swipe down", scroll arrows, bouncing chevrons
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
