← ClaudeAtlas

stitch-design-tastelisted

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.
wedabro/bro-skills · ★ 1 · Web & Frontend · score 72
Install: claude install-skill wedabro/bro-skills
# 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** — explici