Skip to content
Get packs

Guide · Agent skill

How to use the Taste Design for Stitch agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The taste-design skill is an agent skill that teaches an AI agent to write a DESIGN.md file, a plain-language design brief with specific colours, fonts, layout and motion rules. You hand that file to Google Stitch, an AI screen generator, so the screens it produces follow a curated, less generic visual style. This guide explains what the skill does, how to install it, how to ask for it, and where its defaults may not suit your project.

Taste Design for Stitchgoogle-labs-code/stitch-skills · Apache-2.0

Quick start

  1. 1Download and unzip. Download the skill ZIP from this page and unzip it so SKILL.md sits in a taste-design folder.
  2. 2Place the folder. Move it into ~/.claude/skills/ for personal use, or into .claude/skills/ in your project. You can also upload it under Settings → Capabilities → Skills in the Claude apps.
  3. 3Get Stitch access. Make sure you can open Google Stitch at labs.google.com/stitch.
  4. 4Describe your project. Ask the agent in plain language for a DESIGN.md, naming the product, audience and tone.
  5. 5Review the dials. Check the creativity, density, variance and motion settings in the generated file and adjust them to fit your project.
  6. 6Generate screens in Stitch. Give the DESIGN.md to Stitch as the brief when you prompt for a new screen, and reuse it across screens.

What is an agent skill and what does taste-design do?

An agent skill is a folder containing a SKILL.md file with instructions that an AI agent reads when a task matches the skill's description. taste-design is one such skill. Its job is to produce a DESIGN.md file, which the source describes as the single source of truth for prompting Stitch to generate new screens.

The generated file encodes visual atmosphere, colour calibration, typographic architecture, component behaviours, layout principles, motion philosophy and a list of anti-patterns. The skill's stated aim is to enforce premium, anti-generic UI standards.

  • Sets a visual mood and dials for creativity, density, variance and motion.
  • Specifies at most one accent colour, with hex codes and functional roles.
  • Bans Inter and generic serif fonts, and suggests alternatives such as Geist, Outfit, Satoshi and Fraunces.
  • Describes asymmetric hero layouts, mobile single-column collapse and 44px minimum tap targets.
  • Defines spring-based motion (stiffness 100, damping 20) and animates only transform and opacity.

Install the taste-design skill from the ZIP

Download the ZIP for the skill from this page and unzip it. The skill folder contains SKILL.md and a resources/DESIGN.md reference file.

For a personal setup, unzip it into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. Either way, the skill folder should contain SKILL.md.

In the Claude apps you can instead upload the skill under Settings → Capabilities → Skills.

  • Personal install: ~/.claude/skills/
  • Project install: .claude/skills/ inside your project
  • Claude apps: Settings → Capabilities → Skills

Set up Google Stitch access

The skill assumes you can use Google Stitch at labs.google.com/stitch. You will paste or attach the generated DESIGN.md into Stitch when you start a new screen.

The Stitch MCP Server is optional. It offers programmatic integration with Cursor, Antigravity or Gemini CLI. Skip it if you only work in the Stitch web interface.

  • Required: access to Google Stitch (labs.google.com/stitch)
  • Optional: Stitch MCP Server for Cursor, Antigravity or Gemini CLI

Trigger the skill with a natural request

You do not need a special command. Describe what you want in plain language and say you want a design file for Stitch. The agent matches your request to the skill's description and uses it.

The skill adapts its defaults to your description of the project's vibe. If you say a product should feel calm and editorial, the dials shift accordingly. Name the product, audience and tone so the agent has something concrete to work from.

  • "Use the taste-design skill to write a DESIGN.md for a calm, editorial reading app for architects."
  • "Create a DESIGN.md for a dense analytics dashboard for finance teams, with monospace numbers."
  • "Write a DESIGN.md for a portfolio site for a photographer, bold and asymmetric."

Use the DESIGN.md with Google Stitch

Once the agent has written DESIGN.md, give that file to Stitch as the design brief when you prompt it to generate a new screen. Reuse the same file across screens so the output stays consistent.

Review the file before you use it. The dials and bans are defaults, and you should change any that conflict with your project.

  • Keep one DESIGN.md per product so every generated screen follows the same rules.
  • Check colours and fonts against your brand before generating screens.

Safety and what the skill needs

The skill's listed requirements are the Stitch access described above and the agent tools StitchMCP, Read and Write. According to its listing, it does not run scripts and does not use the network.

The output is design guidance, not production code. It does not give you a tested component library, so your developers still need to build and test the interface.

  • Runs scripts: no
  • Uses network: no
  • Agent tools: StitchMCP, Read, Write

What people use it for

  • Giving a team one reusable design brief that keeps Stitch screens visually consistent.
  • Starting a new landing page with an asymmetric hero and a single accent colour.
  • Creating a dense, monospace-number dashboard brief for a data-heavy product.
  • Generating a restrained, static-motion brief for a documentation or reading site.

Frequently asked questions

Is the taste-design skill free to use?

The skill is published under the Apache-2.0 licence, as listed on this page. You still need access to Google Stitch to generate screens, and this page does not state Stitch pricing.

What do I need to use taste-design?

You need access to Google Stitch at labs.google.com/stitch and an agent that can use the StitchMCP, Read and Write tools. The Stitch MCP Server is optional and is for Cursor, Antigravity or Gemini CLI.

Where do I install the taste-design skill?

Unzip the downloaded ZIP into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings → Capabilities → Skills.

Why does the generated design ban the Inter font?

The skill treats Inter as banned for premium or creative contexts and suggests distinctive alternatives such as Geist, Outfit, Cabinet Grotesk or Satoshi. You can change this in the DESIGN.md if your brand requires a different font.

Can I use taste-design with an existing brand system?

It is not a good fit as-is. The skill imposes its own opinionated defaults, such as banning Inter and centred heroes, which may conflict with brand guidelines. Edit the generated DESIGN.md to match your brand, or pick another approach.

Does taste-design generate production code?

No. The output is design guidance in a DESIGN.md file, not production code or a tested component library.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use taste-design if you work in Google Stitch and want a reusable, distinctive design brief that many generated screens can follow. Skip it if you need to match an established brand system or expect a finished, tested component library, since its defaults are opinionated and its output is guidance rather than code.

Download the skill