Stitch Design Taste Skill: DESIGN.md for Google Stitch

What is the stitch-design-taste skill?

Stitch-design-taste is the install name of the stitch-skill folder in the leonxlnx/taste-skill repository. The folder holds a SKILL.md and a DESIGN.md. The SKILL.md turns the repository's anti-slop frontend rules into the descriptive language that Google Stitch reads when it generates screens.

Its output is a document, not a site. The skill produces a DESIGN.md that acts as the single source of truth for prompting Stitch. The prerequisites list access to Google Stitch and, optionally, the Stitch MCP server for Cursor, Antigravity or Gemini CLI.

What the generated DESIGN.md contains

• Visual theme and atmosphere, scored on density, variance and motion, with a default baseline of 8, 6 and 4.
• A color palette where every color has a descriptive name, a hex code and a functional role.
• Typography rules, component stylings, layout principles and a motion philosophy.
• An explicit list of banned AI design clichés.

Who the stitch-design-taste skill is for

Best for

• People who generate screens in Google Stitch and want a repeatable design brief instead of re-prompting each time.
• Teams that want a written design system to hand to Stitch before it generates anything.
• Anyone who needs the same rules spelled out in plain language with hex values attached.

Not for

• Writing React or HTML directly. For code output, use design-taste-frontend from the same repository.
• Work that does not involve Stitch. The skill is built around Stitch's design language.
• Component-level library rules. the shadcn skill covers that job.

Use it with UiChemy

This skill ends at a design brief and Stitch screens. UiChemy only comes in once you have a finished design or an AI build to move into WordPress: Figma to WordPress takes a Figma file, and AI to WordPress imports an AI-built site. Click Get Started on uichemy.com.

How to install Stitch Design Taste Skill: DESIGN.md for Google Stitch

git clone https://github.com/leonxlnx/taste-skill.git

1. Clone the repository

   Run git clone https://github.com/leonxlnx/taste-skill.git.

2. Copy the skill folder

   Copy skills/stitch-skill into the folder where your agent loads skills. It contains SKILL.md and DESIGN.md. The frontmatter name is stitch-design-taste.

3. Open Google Stitch

   The skill's prerequisites list access to Google Stitch. The Stitch MCP server is optional for Cursor, Antigravity or Gemini CLI.

4. Ask for a DESIGN.md

   Describe your project and ask the agent to generate a DESIGN.md. Then use that file as the brief when you prompt Stitch.

Check that it loaded

Ask for a DESIGN.md for a small product. The file should have seven numbered sections, every color should carry a name, a hex code and a role, and the anti-patterns section should list banned items.

Read the official instructions on GitHub

Key features

• Atmosphere scalesDensity runs from Art Gallery Airy to Cockpit Dense, variance from Predictable Symmetric to Artsy Chaotic, and motion from Static Restrained to Cinematic Choreography. The default is variance 8, motion 6, density 4.
• Calibrated colorOne accent at most, with saturation below 80 percent. The AI purple or blue neon look is banned, and pure black #000000 is replaced by off-black, Zinc-950 or charcoal.
• Typography rulesInter is banned for premium contexts in favor of Geist, Outfit, Cabinet Grotesk or Satoshi. Serif is banned in dashboards, and elsewhere only Fraunces, Gambarino, Editorial New or Instrument Serif are allowed.
• Hero section rulesInline image typography, no overlapping text and images, no filler such as scroll arrows, no centered hero when variance exceeds 4, and one primary call to action.
• Component stylingButtons give tactile push feedback, cards appear only when elevation signals hierarchy, forms put labels above inputs, and loaders are skeletons that match layout.
• Layout and responsive rulesThe three equal cards row is banned. Full-height sections use min-h-[100dvh], layouts go single-column below 768px, and touch targets are at least 44px.
• Motion philosophySpring physics with stiffness 100 and damping 20, staggered list reveals, perpetual micro-interactions, and animation limited to transform and opacity.
• Anti-pattern listNo emojis, no custom cursors, no neon glows, no fake round numbers like 99.99%, no generic names such as John Doe, and picsum.photos or SVG avatars instead of broken stock links.
• Fixed output structureThe DESIGN.md has seven numbered sections, from Visual Theme and Atmosphere to Anti-Patterns, with exact values such as hex codes and rem sizes in parentheses.

Frequently asked questions