Official agent skill

Stitch Prompt Enhancer

by google-labs-code in google-labs-code/stitch-skills

Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.

OfficialApache-2.0Auto-check passedFrontend & Design

Install Stitch Prompt Enhancer

skills CLI
$ npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install google-labs-code/stitch-skills enhance-prompt --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/stitch-utilities/skills/enhance-prompt .claude/skills/enhance-prompt && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
enhance-prompt
GitHub stars
8.4k
Used in
6 other repos
Token cost
~1.7k tokens
SKILL.md length
534 words
Files
3 (incl. references)
Skills in repo
7
Repo updated
First seen
Licence
Apache-2.0

At a glance

Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.

  • Works in 4 steps: Assess the Input → Check for DESIGN.md → Apply Enhancements → …
  • Polishing a rough UI idea before sending it to Stitch
  • SKILL.md covers Prerequisites, When to Use This Skill, Enhancement Pipeline and Output Options, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Given a rough UI idea, the skill checks what is missing: platform, page type, a logical structure of sections or components, visual style descriptors, specific colors, and proper UI component terminology, filling gaps by inference or by asking. It then checks the current project for a DESIGN.md file; when one exists, it reads out the color palette, typography and component styles and folds them into a required design-system section of the output, and when none exists it appends a tip suggesting a separate design-md skill to create one for consistency across screens.

The enhancement step replaces vague phrases with specific component names, for example turning menu at the top into a navigation bar with logo and menu items, or list of items into a card grid layout or a vertical list with thumbnails, using a bundled keywords reference. The skill also points to Stitch's own official prompting guide as a source of current best practices that may supersede its own patterns.

When your agent uses it

  • Polishing a rough UI idea before sending it to Stitch
  • Fixing a Stitch prompt that produced poor results
  • Adding a project's design system to a UI generation prompt automatically

Example prompts

  • “Enhance this prompt: a dashboard with some charts and a sidebar.”
  • “Turn 'landing page with a button' into a proper Stitch prompt.”
  • “Improve this prompt using our DESIGN.md design system.”

Requirements

  • Pre-approved tools (allowed-tools): Read, Write

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Assess the Input
  2. Check for DESIGN.md
  3. Apply Enhancements
  4. Format the Output

What it can do on your machine

Read from SKILL.md and the folder at commit 0337446. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • stitch.withgoogle.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Stitch Prompt Enhancer loads about 1.7k tokens when it runs, and up to ~2.3k if it reads all its reference files. Until then it costs about 52 tokens; SKILL.md has 534 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~52
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from google-labs-code/stitch-skills at commit 0337446, republished under its Apache-2.0 licence (© google-labs-code). 534 words, ~1,655 tokens.

Download SKILL.mdSave it as .claude/skills/enhance-prompt/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
enhance-prompt
description
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
allowed-tools
Read, Write

Enhance Prompt for Stitch

You are a Stitch Prompt Engineer. Your job is to transform rough or vague UI generation ideas into polished, optimized prompts that produce better results from Stitch.

Prerequisites

Before enhancing prompts, consult the official Stitch documentation for the latest best practices:

This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.

When to Use This Skill

Activate when a user wants to:

  • Polish a UI prompt before sending to Stitch
  • Improve a prompt that produced poor results
  • Add design system consistency to a simple idea
  • Structure a vague concept into an actionable prompt

Enhancement Pipeline

Follow these steps to enhance any prompt:

Step 1: Assess the Input

Evaluate what's missing from the user's prompt:

ElementCheck forIf missing...
Platform"web", "mobile", "desktop"Add based on context or ask
Page type"landing page", "dashboard", "form"Infer from description
StructureNumbered sections/componentsCreate logical page structure
Visual styleAdjectives, mood, vibeAdd appropriate descriptors
ColorsSpecific values or rolesAdd design system or suggest
ComponentsUI-specific termsTranslate to proper keywords
Step 2: Check for DESIGN.md

Look for a DESIGN.md file in the current project:

If DESIGN.md exists:

  1. Read the file to extract the design system block
  2. Include the color palette, typography, and component styles
  3. Format as a "DESIGN SYSTEM (REQUIRED)" section in the output

If DESIGN.md does not exist:

  1. Add this note at the end of the enhanced prompt:
---
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
file using the `design-md` skill. This ensures all generated pages share the 
same visual language.
Step 3: Apply Enhancements

Transform the input using these techniques:

A. Add UI/UX Keywords

Replace vague terms with specific component names:

VagueEnhanced
"menu at the top""navigation bar with logo and menu items"
"button""primary call-to-action button"
"list of items""card grid layout" or "vertical list with thumbnails"
"form""form with labeled input fields and submit button"
"picture area""hero section with full-width image"
Show full SKILL.md (222 more words)Show less
B. Amplify the Vibe

Add descriptive adjectives to set the mood:

BasicEnhanced
"modern""clean, minimal, with generous whitespace"
"professional""sophisticated, trustworthy, with subtle shadows"
"fun""vibrant, playful, with rounded corners and bold colors"
"dark mode""dark theme with high-contrast accents on deep backgrounds"
C. Structure the Page

Organize content into numbered sections:

markdown
**Page Structure:**
1. **Header:** Navigation with logo and menu items
2. **Hero Section:** Headline, subtext, and primary CTA
3. **Content Area:** [Describe the main content]
4. **Footer:** Links, social icons, copyright
D. Format Colors Properly

When colors are mentioned, format them as:

Descriptive Name (#hexcode) for functional role

Examples:

  • "Deep Ocean Blue (#1a365d) for primary buttons and links"
  • "Warm Cream (#faf5f0) for page background"
  • "Soft Gray (#6b7280) for secondary text"
Step 4: Format the Output

Structure the enhanced prompt in this order:

markdown
[One-line description of the page purpose and vibe]

**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Theme: [Light/Dark], [style descriptors]
- Background: [Color description] (#hex)
- Primary Accent: [Color description] (#hex) for [role]
- Text Primary: [Color description] (#hex)
- [Additional design tokens...]

**Page Structure:**
1. **[Section]:** [Description]
2. **[Section]:** [Description]
...

Output Options

Default: Return the enhanced prompt as text for the user to copy.

Optional file output: If the user requests, write to a file:

  • next-prompt.md — for use with the stitch-loop skill
  • Custom filename specified by user

Examples

Example 1: Vague Input → Structured Prompt

User input:

"make me a login page"

Enhanced output:

markdown
A clean, trustworthy login page with a centered form and subtle branding.

**DESIGN SYSTEM (REQUIRED):**
- Platform: Web, Desktop-first
- Theme: Light, minimal, professional
- Background: Clean White (#ffffff)
- Surface: Soft Gray (#f9fafb) for form card
- Primary Accent: Deep Blue (#2563eb) for submit button and links
- Text Primary: Near Black (#111827) for headings
- Text Secondary: Medium Gray (#6b7280) for labels
- Buttons: Subtly rounded (8px), full-width on form
- Cards: Gently rounded (12px), soft shadow for elevation

**Page Structure:**
1. **Header:** Minimal logo, centered
2. **Login Card:** Centered form with email, password fields, "Forgot password?" link
3. **Submit Button:** Primary blue "Sign In" button
4. **Footer:** "Don't have an account? Sign up" link

---
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
file using the `design-md` skill.
Example 2: Feature Request → Targeted Edit

User input:

"add a search bar"

Enhanced output:

markdown
Add a search bar to the header navigation.

**Specific changes:**
- Location: Header, right side before user avatar
- Style: Pill-shaped input with subtle gray background (#f3f4f6)
- Icon: Magnifying glass icon on the left, inside the input
- Placeholder: "Search..." in light gray (#9ca3af)
- Behavior: Expands on focus with subtle shadow
- Width: 240px default, 320px on focus

**Context:** This is a targeted edit. Make only this change while preserving all existing elements.

Tips for Best Results

  1. Be specific early — Vague inputs need more enhancement
  2. Match the user's intent — Don't over-design if they want simple
  3. Keep it structured — Numbered sections help Stitch understand hierarchy
  4. Include the design system — Consistency is key for multi-page projects
  5. One change at a time for edits — Don't bundle unrelated changes

© google-labs-code, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in plugins/stitch-utilities/skills/enhance-prompt of google-labs-code/stitch-skills.

  • SKILL.md
  • README.md
  • references/KEYWORDS.md

Open the folder on GitHubat commit 0337446

Used in 6 other repositories

We found 20 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 6 other GitHub owners. This page covers the copy in google-labs-code/stitch-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Stitch Prompt Enhancer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Stitch Prompt Enhancer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Stitch Prompt Enhancer this skillgoogle-labs-code/stitch-skills8.4k6 repos~1.7kAutomated safety check: PassApache-2.0
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Design Dnazanwei/design-dna1.9k1 repos~2.1kAutomated safety check: PassMIT
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Improve UI Audit and Plansibelick/ui-skills9.4k—~2kAutomated safety check: PassMIT
DaisyUI Component Librarysaadeghi/daisyui43k—~1.3kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed
  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed
  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes
  • Audits one product surface against its own design evidence and writes self-contained implementation plans for another agent, without touching product source.

    9.4k GitHub stars~2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Official daisyUI skill for Tailwind CSS projects, routing to install, usage, configuration, color and per-component guides before writing any HTML or JSX with its classes.

    43k GitHub stars~1.3k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed
  • Ss Learn

    bitjaru/styleseed

    Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…

    970 GitHub stars~1.3k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

More from google-labs-code/stitch-skills

  • Stitch to Remotion Walkthrough Videos

    google-labs-code/stitch-skills

    Official

    Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.

    8.4k GitHub starsUsed in 6 repos~3.2k tokens
    Auto-check: notes
  • Integrating shadcn/ui Components

    google-labs-code/stitch-skills

    Official

    Guides finding, installing, customizing and wiring up shadcn/ui components in a project, with MCP tools for the component catalog and registries.

    8.4k GitHub starsUsed in 4 repos~2.3k tokens
    Auto-check: notes
  • Stitch Taste Design System

    google-labs-code/stitch-skills

    Official

    Generates a DESIGN.md design-language file for Google Stitch that encodes color, typography, layout, component behavior and motion rules to avoid generic AI-looking UI.

    8.4k GitHub starsUsed in 15 repos~3.1k tokens
    Auto-check passed
  • Stitch Build Loop

    google-labs-code/stitch-skills

    Official

    Builds a website page by page with Stitch in an autonomous loop, passing a baton file from one iteration to the next that names the next page and prompt.

    8.4k GitHub starsUsed in 5 repos~2.6k tokens
    Auto-check: notes
  • Stitch to React and Vite Dashboard

    google-labs-code/stitch-skills

    Official

    Turns Stitch screens into a React, Vite and TypeScript dashboard with TanStack Query data fetching, DESIGN.md tokens as CSS variables and optional read-only Web3 data.

    8.4k GitHub stars~914 tokensUpdated 1 mo ago
    Auto-check: notes
  • Site Md

    google-labs-code/stitch-skills

    Official

    Analyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop

    8.4k GitHub stars~783 tokensUpdated 1 mo ago
    Auto-check passed

Questions about Stitch Prompt Enhancer

What does Stitch Prompt Enhancer do?

Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one. Given a rough UI idea, the skill checks what is missing: platform, page type, a logical structure of sections or components, visual style descriptors, specific colors, and proper UI component terminology, filling gaps by inference or by asking.md file; when one exists, it reads out the color palette, typography and component styles and folds them into a required design-system section of the output, and when none exists it appends a tip suggesting a separate design-md skill to create one for consistency across screens.

When should I use Stitch Prompt Enhancer?

Stitch Prompt Enhancer fits situations like: polishing a rough UI idea before sending it to Stitch; fixing a Stitch prompt that produced poor results; adding a project's design system to a UI generation prompt automatically.

How do I install Stitch Prompt Enhancer in Claude Code?

Run `npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a claude-code`. Or copy the skill folder (plugins/stitch-utilities/skills/enhance-prompt in google-labs-code/stitch-skills) into .claude/skills/enhance-prompt in your project. Claude Code loads it when a task matches its description.

How do I install Stitch Prompt Enhancer in Codex?

Run `npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a codex`. Or copy the skill folder (plugins/stitch-utilities/skills/enhance-prompt in google-labs-code/stitch-skills) into .agents/skills/enhance-prompt in your project. Codex loads it when a task matches its description.

Can I use Stitch Prompt Enhancer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add google-labs-code/stitch-skills --skill enhance-prompt -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/enhance-prompt, .gemini/skills/enhance-prompt, .github/skills/enhance-prompt and .opencode/skills/enhance-prompt in your project.

What does Stitch Prompt Enhancer need to run?

SKILL.md names no scripts, command-line tools or credentials: Stitch Prompt Enhancer is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write.

Does Stitch Prompt Enhancer access the network?

SKILL.md names 1 domain. As links in the text: stitch.withgoogle.com. This is read from the text; nothing was executed.

Is Stitch Prompt Enhancer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Stitch Prompt Enhancer use?

Stitch Prompt Enhancer is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Stitch Prompt Enhancer use?

About 1.7k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 672 tokens, read only when the agent opens those files.

What are the alternatives to Stitch Prompt Enhancer?

Skills that share tags, products or a category with Stitch Prompt Enhancer: UI Styling (Ohh-889/skyroc, 795 stars), Design Dna (zanwei/design-dna, 1.9k stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars) and Improve UI Audit and Plans (ibelick/ui-skills, 9.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Stitch Prompt Enhancer?

google-labs-code (a GitHub organization, an official publisher) maintains it in google-labs-code/stitch-skills, which has 8,431 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on August 17, 2026.

Source: google-labs-code/stitch-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.