Skip to the usage guide
enhance-promptby Google Labs

Enhance Prompt Skill.

A Claude Code and Codex skill for UI design: rewrites vague UI ideas into polished, Stitch-optimized prompts.

  • Web & UI
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/enhance-prompt/SKILL.mdSKILL.md
--- 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. --- ## Prerequisites ## When to Use This Skill ## Enhancement Pipeline ## Output Options ## Examples ## Tips for Best Results
Front matter and section headings read from the upstream file on 2026-09-14 · 6,618 characters in full

01 What it does

What the enhance-prompt Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill turns rough UI ideas into prompts shaped for Stitch generation. Working as a Stitch Prompt Engineer, it audits the input for missing platform, page type, structure, visual style, colors and components, then rewrites vague wording into specific component names, amplifies mood adjectives, groups content into numbered sections and formats every color as a name, hex code and functional role.

When the project has a DESIGN.md, its palette, typography and component styles are folded into a DESIGN SYSTEM (REQUIRED) block; when it does not, a tip points to the design-md skill. Output is copyable text by default, or a file such as next-prompt.md for stitch-loop.

What it produces

  • An enhanced prompt that opens with a one-line description of the page purpose and vibe, followed by the design system block and the numbered page structure.
  • An optional next-prompt.md file, written for use with the stitch-loop skill.
  • An optional file under a custom name chosen by the user.
See the example prompt ↗

How It Works

  1. 01
    Audit the Raw Input

    The skill checks the user's prompt against six elements: platform, page type, structure, visual style, colors and components.

  2. 02
    Pull in the Design System

    It looks for a DESIGN.md in the current project and reads the design system block so the palette, typography and component styles can be reused in the new prompt.

  3. 03
    Apply the Enhancement Techniques

    Vague terms become named components, adjectives get amplified into a mood, content is organized into numbered sections, and colors are written with a descriptive name, hex value and role.

  4. 04
    Format the Output in a Fixed Order

    The result opens with a one-line description of page purpose and vibe, then a DESIGN SYSTEM (REQUIRED) block, then a numbered Page Structure.

02 Find your fit

When to Use the enhance-prompt Skill

Use the enhance-prompt skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Polishing a UI prompt before it is sent to Stitch.
  • Reworking a prompt that already produced poor generation results.
  • Adding design system consistency to a simple idea.
  • Turning a vague concept into an actionable, structured prompt.

Know the Boundaries

  • Bundling several unrelated changes into one edit request is actively discouraged; edits should be handled one change at a time.
  • Over-designing is an anti-pattern: when the user wants something simple, the enhancement should stay matched to that intent.

What to Provide

  • The rough idea or existing promptA vague UI generation idea or a prompt that underperformed is the starting material the skill rewrites.
  • The project's DESIGN.md, if one existsIt is read from the current project so its palette, typography and component styles can be carried into the new prompt.

03 Inside the skill

Rules the enhance-prompt Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Check the Stitch Guide First

    Before enhancing anything, consult the official Stitch prompting documentation, because its recommendations can override the patterns baked into this skill.

  2. Reframe DESIGN.md as a Required Block

    When a DESIGN.md exists, its contents are not quoted as-is; they are reformatted into a section headed DESIGN SYSTEM (REQUIRED) in the output.

  3. Cover the Missing DESIGN.md Case

    If no DESIGN.md is present, the enhanced prompt ends with a note pointing the user to the design-md skill for consistent multi-screen designs.

  4. Write Colors in One Fixed Pattern

    Every color is expressed as descriptive name, hex code in parentheses and the functional role it plays, never as a bare swatch or vague adjective.

  5. Number the Page Sections

    Page content is grouped into numbered sections so Stitch reads the hierarchy, rather than left as a paragraph of prose.

  6. Default to Text Output

    Unless the user asks otherwise, return the enhanced prompt as text to copy; writing a file is opt-in.

  7. Preserve the Rest on Targeted Edits

    When the request is an edit rather than a new page, the prompt must state that only the described change is made and all existing elements stay.

04 Put it to work

Install enhance-prompt in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add enhance-prompt to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill enhance-prompt

Generic skills CLI form for plugins/stitch-utilities/skills/enhance-prompt/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Adapt this prompt with your own content and constraints, then run it in Claude Code or Codex.

Example prompt
make me a login page

Source: SKILL.md example (verbatim).

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • The prompt contains a DESIGN SYSTEM (REQUIRED) block listing platform, theme, background, primary accent and text primary in that order.
  • Every color reads as a descriptive name, hex code and functional role.
  • Page content appears as numbered sections such as a header with navigation, rather than loose description.
  • No vague component words survive; a request for a button becomes a primary call-to-action button.
  • The design system block is present at all, since consistency is what makes multi-page output hold together.
  • For a targeted edit, the prompt pinpoints location, style, placeholder, behavior and width instead of describing the whole page again.

In OpenDesign enhance-prompt is bundled: Plugins → Skills, pick it in the top bar.

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Skill file
plugins/stitch-utilities/skills/enhance-prompt/SKILL.md Content checksum recorded at verification; commit 0337446
License
Apache-2.0 From LICENSE.
Repository stars
8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for enhance-prompt.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. PrerequisitesConsult the official Stitch prompting guide before enhancing, since it may supersede these patterns.
  2. When to Use This SkillFour triggers: polish a prompt, fix a weak result, add design consistency, structure a vague concept.
  3. Enhancement PipelineFour steps: assess gaps, check DESIGN.md, apply keyword, vibe, structure and color techniques, then format.
  4. Output OptionsText for copying by default; optionally write next-prompt.md or a user-named file.
  5. ExamplesA vague login page request and a targeted add-a-search-bar edit, both with full enhanced output.
  6. Tips for Best ResultsFive reminders covering specificity, user intent, numbered structure, design system inclusion and single-change edits.
The Skill's Own 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.”

Front-matter description from SKILL.md. The full file is about 6,618 characters. Read the full file on GitHub.

06 Before you install

Questions About the enhance-prompt Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Do I need a DESIGN.md before I can use this skill?

No. The skill simply looks for one in the current project. If there is none, the enhanced prompt ends with a tip suggesting you create one with the design-md skill so all generated pages share the same visual language.

What does the finished prompt actually look like?

A one-line description of the page purpose and vibe, a DESIGN SYSTEM (REQUIRED) block with platform, theme, background and accent tokens, then a numbered Page Structure. The structure section lists each area such as header, hero and footer.

Does it save the prompt anywhere or just show it?

By default it returns the enhanced prompt as text for you to copy. If you ask for a file, it can write next-prompt.md for the stitch-loop skill, or a filename you specify.

Which tools does this skill need?

It declares Read and Write as its allowed tools, which covers reading a DESIGN.md and writing an optional prompt file.

Enhance Prompt

Run enhance-prompt on a Real UI Design Task.

The enhance-prompt skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill enhance-prompt