Stitch Taste Design Skill: DESIGN.md for Premium UI

What is the stitch taste design skill?

Taste-design is one skill inside the stitch-utilities plugin of Google's stitch-skills repository. Its only product is a DESIGN.md file, written in plain descriptive language plus exact values, that Google Stitch reads when it generates screens.

The skill is deliberately opinionated. Its own text says it is not a neutral template, and it translates a set of anti-slop frontend rules into the semantic wording Stitch interprets as visual descriptions.

What the generated DESIGN.md contains

• Visual atmosphere: mood, density, variance and motion intensity, scored on scales. The defaults are creativity 9, variance 8, motion 6 and density 5.
• Color palette: each color gets a descriptive name, a hex code and a functional role, with a maximum of one accent below 80 percent saturation.
• Typography: display, body and mono fonts, a 65 character line limit and a ban on Inter for premium or creative contexts.
• Component stylings, layout principles, motion philosophy and an explicit anti-pattern list, in a fixed seven section structure.

The bans that shape the output

• No purple or blue neon glows, no pure black such as #000000, and no warm and cool grays mixed in one design.
• No three equal cards in a row, and no centered hero once variance goes above 4.
• No invented statistics. The skill tells the agent to use labels like [metric] when real numbers are missing.
• No emojis, no custom cursors, no scroll arrows or bouncing chevrons and no broken Unsplash links.

Who the stitch taste design skill is for

Best for

• Designers and developers already generating screens in Google Stitch who want a stricter house style.
• Teams that want one DESIGN.md every new screen is prompted against.
• Anyone tired of default gradients, generic fonts and placeholder metrics.

Not for

• Projects that never touch Stitch. The output is a Stitch oriented brief, not a framework theme.
• Extracting a design system from an existing site. For that, see design-md, which analyzes Stitch projects instead.
• Turning a vague idea into a polished prompt. enhance-prompt covers that step.

Use it with UiChemy

A DESIGN.md steers Stitch but does not create a WordPress site. Once a page is built, UiChemy AI to WordPress can import it, routing AI builds through Figma, Composer or an agent with MCP before converting. Click Get Started on uichemy.com.

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

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

1. Set up Stitch access

   The skill targets Google Stitch, available at labs.google.com/stitch. The repo README lists the Stitch MCP server as a prerequisite for its skills, while this skill's own file calls the server optional for programmatic use.

2. Install the plugins

   For Claude Code, run the command above to install into the current project. For Cursor, the README uses the same command with --scope workspace --target cursor. For Codex, it documents a codex plugin marketplace add command.

3. Find the skill

   Taste-design ships in the stitch-utilities plugin, at plugins/stitch-utilities/skills/taste-design in the repository.

4. Ask for a DESIGN.md

   Use the README's example prompt: generate a premium DESIGN.md with strict typography and calibrated colors. Describe the vibe you want so the agent can adapt the baseline scales.

Check that it loaded

Ask the agent to generate a DESIGN.md for a sample project. The file should follow the seven section structure and include named colors with hex codes, a banned font list and an anti-pattern section.

Read the official instructions on GitHub

Key features

• Atmosphere scalesThe skill scores density from airy to cockpit dense, variance from symmetric to chaotic and motion from static to cinematic, then adapts the baseline to the vibe you describe.
• Named and hex-coded colorsEvery color is written as a descriptive name, a hex code and a role. Only one accent is allowed, saturation stays below 80 percent and pure black is replaced by off-black or charcoal.
• Typography rulesDisplay text is track-tight, body text keeps relaxed leading and a 65 character limit, and Inter is banned for premium work. Geist, Outfit, Cabinet Grotesk and Satoshi are the suggested replacements.
• Serif policyTimes New Roman, Georgia, Garamond and Palatino are banned. Distinctive serifs such as Fraunces or Instrument Serif are allowed for editorial work, and serif is always banned in dashboards.
• Hero section rulesHeadlines may carry small inline images at type height. Text must never overlap images, filler like scroll to explore is banned and one primary call to action is the limit.
• Layout and responsive rulesCSS Grid over flexbox percentage math, min-h-[100dvh] instead of h-screen, single column below 768px, clamp() headlines and 44px minimum tap targets.
• Spring motion defaultsInteractive elements use spring physics at stiffness 100 and damping 20. Lists reveal with staggered cascades, and only transform and opacity are animated.
• Component statesButtons get tactile press feedback and no outer glow. Loaders are skeletons matching the layout, empty states are composed, and errors appear inline below the field.
• Anti-pattern listThe DESIGN.md ends with explicit never-do rules: no emojis, no generic placeholder names, no fake round numbers and no hollow marketing verbs in the copy.

Frequently asked questions