Taste Design Skill for Google Stitch: Write a DESIGN.md

taste-design makes Claude write a DESIGN.md for Google Stitch, with strict rules that keep generated screens from looking like generic AI output.

Installs: 20.6K; on skills.sh
Stars: 8.7K; on GitHub
Files: 1; besides SKILL.md
Updated: Aug 2026; last repo commit

The skill produces a DESIGN.md that Google Stitch can read when it generates screens. It covers atmosphere, color, typography, components, layout, responsive rules, motion and a list of banned patterns. The rules are opinionated: one accent color, no pure black, no Inter font, no purple neon, no three equal cards in a row, and no invented statistics.

SKILL.md sets default dials of Creativity 9, Variance 8, Motion 6 and Density 5, and adapts them to the vibe you describe. A sample file, resources/DESIGN.md, shows the finished format with the same dials.

The skill lists StitchMCP, Read and Write as its tools. The repo README says its skills need the Stitch tool server set up first.

Good for

Designers and developers who generate screens in Google Stitch
Teams that want one written design system to prompt Stitch with
Anyone who wants an opinionated, anti-generic UI style with banned patterns spelled out

Install taste-design

Claude Code

Copy this prompt.

Install the taste-design skill in Claude Code. Run this command:

npx skills add https://github.com/google-labs-code/stitch-skills --skill taste-design

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Overview
Prerequisites
The Goal
Analysis & Synthesis Instructions
1. Define the Atmosphere
2. Map the Color Palette
3. Establish Typography Rules
4. Define the Hero Section
5. Describe Component Stylings
6. Define Layout Principles
7. Define Responsive Rules
8. Encode Motion Philosophy
9. List Anti-Patterns (AI Tells)
Output Format (DESIGN.md Structure)
1. Visual Theme & Atmosphere
2. Color Palette & Roles

Key facts

Author: google-labs-code (GitHub: google-labs-code)
Repo: google-labs-code/stitch-skills
Installs on skills.sh: 20,573 as of 2026-11-02
GitHub stars (whole repo): 8,653 as of 2026-11-02
License: Apache-2.0
Last repo commit: 2026-08-17
Files in the skill folder: 2 files including SKILL.md
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Pick density, variance and motion levels
Scales from gallery-airy to cockpit-dense, predictable to chaotic, static to cinematic.
1. Define the atmosphere
Named colors with hex codes and roles
Maximum one accent below 80% saturation. No purple or blue neon, no pure black.
2. Map the color palette
Font stacks, scale and banned fonts
Bans Inter for premium contexts and generic serifs. Suggests Geist, Outfit, Cabinet Grotesk or Satoshi.
3. Establish typography
Creative hero with inline image typography
No overlapping, no "Scroll to explore", one primary call to action.
4. Define the hero
Buttons, cards, inputs, loaders, empty and error states
Shape, color, shadow and interaction for each.
5. Describe components
Grid-first layout, single column below 768px
Uses min-h-[100dvh] instead of h-screen, 44px touch targets and clamp() for type.
6 and 7. Layout and responsive rules
Spring physics, staggered reveals, transform and opacity only
Default spring of stiffness 100 and damping 20.
8. Motion philosophy
A "never do" list of AI design tells
Includes no emojis, no fabricated metrics, no AI copywriting clichés and no broken Unsplash links.
9. Anti-patterns
Output file with 7 numbered sections
Follows the template in SKILL.md, from Visual Theme to Anti-Patterns. Writes a file in your project.
Write · Write DESIGN.md

From the official docs

Permissions

Low risk

The skill lets Claude write a DESIGN.md file and call the Stitch tool server, which uses your own Stitch setup. Check what it sends and writes.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It writes a DESIGN.md in your project
The allowed tools are StitchMCP, Read and Write. Review the file before you use it. github.com
It calls Google Stitch through its tool server
SKILL.md lists StitchMCP in allowed-tools, so Claude can call the Stitch tool server, and says the DESIGN.md is for prompting Stitch. The README says credentials and environment variables come from the Stitch MCP setup guide, not from the skill. github.com

Technical details

Talks to	Google Stitch (through StitchMCP)
Scopes	Stitch tool server project files (Write)

Questions

What does the taste-design skill do?

It makes Claude write a DESIGN.md for Google Stitch, with specific colors, fonts, layout rules, motion rules and banned patterns, so Stitch produces less generic screens.

How do I install it in Claude Code or Codex?

Use the install box above. The repo README also documents plugin installs for Codex (a marketplace) and Claude Code (npx plugins add), and says its skills need the Stitch tool server configured first.

Do I need Google Stitch?

Yes for the full workflow. SKILL.md lists access to Stitch as a prerequisite and the Stitch tool server as optional for programmatic use. The README says the skills require it. You can still read the rules as a general style guide.

Does it need an API key?

The skill names none. The README points to Stitch's own tool server setup, which has its own credentials and environment variables.

Is it safe to install?

The folder holds SKILL.md and a sample DESIGN.md, and no scripts. It lets Claude write files and call the Stitch tool, so check the file it writes and what you send to Stitch.

Can I change the style?

Yes. The dials for creativity, density and motion adjust the output, and SKILL.md says to adapt them to your description. The sample DESIGN.md has the same dials.

Information

updated Nov 2, 2026

Repository: google-labs-code/stitch-skills
Folder: plugins/stitch-utilities/skills/taste-design

google-labs-code/stitch-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

taste-design SKILL.md · github.com
stitch-skills README · github.com
taste-design DESIGN.md sample · github.com