Skip to content
Get packs

Enhance Prompt for Stitch

Turns vague UI ideas into detailed, structured prompts for Google Stitch design generation

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
3 files

What it does

When you describe an interface loosely, such as 'make me a login page', this skill rewrites your idea into a fuller prompt for Google's Stitch UI generator. It adds specific component names, mood words, colour values with hex codes, and a numbered page layout. If the project has a DESIGN.md file, it pulls the design system from it so screens stay consistent. The agent only reads and writes text; it does not generate the designs itself.

Great for

  • People who know what they want a screen to look like but struggle to describe it in design terms
  • Developers or product teams who want consistent results across several Stitch screens in one project
  • Users whose earlier Stitch prompts gave poor results and need a more structured version

Skip it if

  • Anyone expecting the skill to produce images or working UI code itself, since it only writes prompt text (the output is for use in Stitch)
  • Projects needing verified brand colours or accessibility checks, because the skill invents example hex values and palettes that must be reviewed by a human

Try asking

  • “Make me a login page for a fintech app with a clean, trustworthy look”
  • “Enhance this prompt for a dashboard: sales charts, sidebar, dark mode”
  • “Add a search bar to the header of my landing page as a targeted edit”
  • “Turn my rough idea for a recipe website into a structured Stitch prompt and save it to next-prompt.md”
Step-by-step guide: how to use Enhance Prompt for StitchInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    enhance-prompt.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip enhance-prompt.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip enhance-prompt.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the skill as much context as you can (platform, audience, brand colours) so it adds fewer invented details
  • Check every hex colour and font it proposes against your real brand before using the prompt
  • For multi-screen projects, create a DESIGN.md first so every generated page shares the same design system

What's inside

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

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.