stitch-design-taste

Generates DESIGN.md design system files for Google Stitch screen generation.

Updated May 11, 2026
One-click install
npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill stitch-design-taste-cloudofgeorge
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-design-taste
Source: https://github.com/cloudofgeorge/AI-hands-Engineer/tree/main/skills/design/stitch-design-taste
Command: npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill stitch-design-taste-cloudofgeorge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic, with default fonts, purple gradients, and clichéd layouts. This Skill produces a structured DESIGN.md file that encodes a curated, opinionated design language so Google Stitch generates premium, non-generic screens. ## Core Features & Use Cases - Semantic Design System Generation: Creates DESIGN.md files covering atmosphere, color palettes with hex codes, typography rules, component stylings, layout principles, motion specs, and explicit anti-patterns. - Configurable Taste Dials: Adjusts creativity, density, variance, and motion levels to match each project's vibe before generating the design system. - Anti-Slop Enforcement: Bans AI design clichés such as Inter font, pure black, neon glows, 3-column card rows, centered heroes, and filler UI text. - Use Case: Before prompting Stitch to build a SaaS dashboard, generate a DESIGN.md that locks in Geist typography, a single emerald accent, asymmetric bento layouts, and spring-physics motion intent so every generated screen stays consistent. ## Quick Start Generate a DESIGN.md design system for my project using the stitch-design-taste skill with creativity 8 and an electric blue accent.

Frequently Asked Questions about stitch-design-taste

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a design system for Google Stitch?

Generate a DESIGN.md file that describes visual atmosphere, color roles with hex codes, typography stacks, component behaviors, layout principles, and motion intent in natural language. Stitch interprets these semantic descriptions to produce consistent screens.

What should a DESIGN.md file contain for AI screen generation?

Include visual theme and atmosphere, a calibrated color palette with functional roles, typography rules with banned fonts, component stylings, hero and layout principles, responsive rules, motion philosophy, and an explicit anti-patterns list.

Can I use the generated DESIGN.md with Cursor or other coding agents?

Yes. The DESIGN.md works with Stitch directly and with the Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI. The motion section documents intent so coding agents implement animations correctly.

Why does AI-generated UI look generic and how do I fix it?

Generic output comes from default fonts like Inter, purple neon gradients, 3-column card grids, and centered heroes. Fix it by encoding explicit bans and opinionated rules in a design system file before generating screens.

Does this design system support responsive mobile layouts?

Yes. The rules mandate mobile-first collapse below 768px, no horizontal overflow, clamp-based typography scaling, 44px minimum touch targets, and verification at 375px, 768px, and 1440px viewports.