Latest Articles
Google Stitch tutorials, case studies and the latest news
Google Stitch AI UI Design Guide
Learn AI UI design with Google Stitch: prompt structure, style selection, web app layouts, reusable examples, and a design-to-code handoff checklist.
Google Stitch Web App Design Guide
Design web apps with Google Stitch: page structures, dashboard and landing layouts, responsive components, prompt examples, and a design-to-code workflow.
Google Stitch + OpenCode Guide: Install Skills Manually and Configure MCP
A step-by-step guide to installing Stitch Skills in OpenCode: copy skill folders, fix the naming traps (stitch:: prefix and kebab-case validation), register the Stitch MCP server in opencode.json, plus a Claude Code / Cursor comparison.
Popular Tutorials
Master Stitch prompts from beginner to advanced
Stitch Prompts
Real prompt templates from the style library, ready to copy
Design a Linear-inspired interface. - Dark-mode-native: #08090a marketing background, #0f1011 panel background, #191a1b elevated surfaces; - Inter Variable with "cv01", "ss03" globally — geometric alternates for a cleaner aesthetic; - Signature weight 510 (between regular and medium) for most UI text; - Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px); - Brand indigo-violet: #5e6ad2 (bg) / #7170ff (accent) / #828fff (hover) — the only chromatic color in the system. Colors: #010102, #08090a, #0f1011, #191a1b with #010102 accent. Typography: (.
Design a Notion-inspired interface. - NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px); - Warm neutral palette: grays carry yellow-brown undertones (#f6f5f4 warm white, #31302e warm dark); - Near-black text via rgba(0,0,0,0.95) -- not pure black, creating micro-warmth; - Ultra-thin borders: 1px solid rgba(0,0,0,0.1) throughout -- whisper-weight division; - Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth. Colors: #000000f2, #ffffff, #0075de, #213183 with #0075de accent. Typography: NotionInter.
Design a Mintlify-inspired interface. - Inter with tight negative tracking at display sizes (-0.8px to -1.28px) — compressed yet readable; - Geist Mono for code labels: uppercase, 12px, tracked-out, the terminal voice; - Brand green (#18E299) used sparingly — CTAs, hover states, focus rings, and accent touches; - Atmospheric gradient hero with cloud-like green-white wash; - Ultra-round corners: 16px for containers, 24px for featured cards, full-round (9999px) for buttons and pills. Colors: #0d0d0d, #ffffff, #18E299, #d4fae8 with #18E299 accent. Typography: Inter.