taste-design
installsforks
How to install taste-design?
google-labs-code/stitch-skills/taste-design
$npx -y skills add google-labs-code/stitch-skills --skill taste-designtaste-design is an agent skill published from google-labs-code/stitch-skills, installable through the skills CLI.
SKILL.md
| 1 | # Stitch Design Taste — Semantic Design System Skill |
| 2 | |
| 3 | ## Overview |
| 4 | 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. |
| 5 | |
| 6 | 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. |
| 7 | |
| 8 | ## Prerequisites |
| 9 | - Access to Google Stitch via [labs.google.com/stitch](https://labs.google.com/stitch) |
| 10 | - Optionally: Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI |
| 11 | |
| 12 | ## The Goal |
| 13 | Generate a `DESIGN.md` file that encodes: |
| 14 | 1. **Visual atmosphere** — the mood, density, and design philosophy |
| 15 | 2. **Color calibration** — neutrals, accents, and banned patterns with hex codes |
| 16 | 3. **Typographic architecture** — font stacks, scale hierarchy, and anti-patterns |
| 17 | 4. **Component behaviors** — buttons, cards, inputs with interaction states |
| 18 | 5. **Layout principles** — grid systems, spacing philosophy, responsive strategy |
| 19 | 6. **Motion philosophy** — animation engine specs, spring physics, perpetual micro-interactions |
| 20 | 7. **Anti-patterns** — explicit list of banned AI design clichés |
| 21 | |
| 22 | ## Analysis & Synthesis Instructions |
| 23 | |
| 24 | ### 1. Define the Atmosphere |
| 25 | Evaluate the target project's intent. Use evocative adjectives from the taste spectrum: |
| 26 | - **Density:** "Art Gallery Airy" (1–3) → "Daily App Balanced" (4–7) → "Cockpit Dense" (8–10) |
| 27 | - **Variance:** "Predictable Symmetric" (1–3) → "Offset Asymmetric" (4–7) → "Artsy Chaotic" (8–10) |
| 28 | - **Motion:** "Static Restrained" (1–3) → "Fluid CSS" (4–7) → "Cinematic Choreography" (8–10) |
| 29 | |
| 30 | Default baseline: Creativity 9, Variance 8, Motion 6, Density 5. Adapt dynamically based on user's vibe description. |
| 31 | |
| 32 | ### 2. Map the Color Palette |
| 33 | For each color provide: **Descriptive Name** + **Hex Code** + **Functional Role**. |
| 34 | |
| 35 | **Mandatory constraints:** |
| 36 | - Maximum 1 accent color. Saturation below 80% |
| 37 | - The "AI Purple/Blue Neon" aesthetic is strictly BANNED — no purple button glows, no neon gradients |
| 38 | - Use absolute neutral bases (Zinc/Slate) with high-contrast singular accents |
| 39 | - Stick to one palette for the entire output — no warm/cool gray fluctuation |
| 40 | - Never use pure black (`#000000`) — use Off-Black, Zinc-950, or Charcoal |
| 41 | |
| 42 | ### 3. Establish Typography Rules |
| 43 | - **Display/Headlines:** Track-tight, controlled scale. Not screaming. Hierarchy through weight and color, not just massive size |
| 44 | - **Body:** Relaxed leading, max 65 characters per line |
| 45 | - **Font Selection:** `Inter` is BANNED for premium/creative contexts. Force unique character: `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi` |
| 46 | - **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 |
| 47 | - **Dashboard Constraint:** Use Sans-Serif pairings exclusively (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`) |
| 48 | - **High-Density Override:** When density exceeds 7, all numbers must use Monospace |
| 49 | |
| 50 | ### 4. Define the Hero Section |
| 51 | The Hero is the first impression and must be creative, striking, and never generic: |
| 52 | - **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 |
| 53 | - **No Overlapping:** Text must never overlap images or other text. Every element occupies its own clean spatial zone |
| 54 | - **No Filler Text:** "Scroll to explore", "Swipe down", scroll arrow icons, bouncing chevrons are BANNED. The content should pull users in naturally |
| 55 | - **Asymmetric Structure:** Centered Hero layouts BANNED when variance exceeds 4 |
| 56 | - **CTA Restraint:** Maximum one primary CTA. No secondary "Learn more" links |
| 57 | |
| 58 | ### 5. Describe Component Stylings |
| 59 | For each component type, describe shape, color, shadow depth, and interaction behavior: |
| 60 | - **Buttons:** Tactile push feedback on active state. No neon outer glows. No custom mouse cursors |
| 61 | - **Cards:** Use ONLY when elevation communicates hierarchy. Tint shadows to background hue. For high-density layouts, replace cards with border-top |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
