How to Enhance Vague UI Prompts for Better Stitch Results

The enhance-prompt skill transforms ambiguous UI descriptions into structured, Stitch-ready prompts by injecting design system tokens, concrete component keywords, and explicit page hierarchy.

To consistently generate high-quality UI with Stitch, you need to enhance vague UI prompts with deterministic structure and domain-specific vocabulary. The enhance-prompt skill from the google-labs-code/stitch-skills repository automates this enhancement through a pipeline defined in plugins/stitch-utilities/skills/enhance-prompt/SKILL.md.

Understanding the Enhance-Prompt Skill Architecture

The skill operates as a deterministic pipeline within the stitch-utilities plugin. It analyzes raw input, augments missing context, and emits a standardized markdown format that Stitch interprets reliably.

Assessment Phase

The skill first inspects your prompt for six critical elements: platform, page type, structure, visual style, colors, and component keywords. According to the Element → Check for → If missing… matrix in SKILL.md【1†L33-L45】, the skill identifies gaps that would otherwise produce generic results.

If a DESIGN.md file exists in your project root, the skill reads it and injects the design system block—including palette, typography, and component styles—directly into the output. When DESIGN.md is absent, the skill appends a tip encouraging creation via the design-md skill【1†L46-L63】.

Enhancement Techniques for Vague UI Prompts

The skill applies four specific techniques to enrich ambiguous descriptions, all defined in the SKILL.md pipeline and supported by the references/KEYWORDS.md file.

Replace Vague Nouns with Concrete UI Keywords

Generic terms like "thing" or "box" are replaced with specific component terms sourced from KEYWORDS.md【2†L5-L78】. The skill maps ambiguous nouns to concrete UI patterns—transforming "make me a login page" into explicit references to form cards, input fields, and submit buttons.

Enrich Mood Adjectives with Structured Palettes

Subjective descriptors like "clean" or "modern" are expanded using the adjective sections in KEYWORDS.md【2†L49-L66】. The skill translates "clean" into operational directives such as "clean, minimal, with generous whitespace", giving Stitch measurable parameters for spacing and visual density.

Structure Content with Numbered Markdown Blocks

The skill reorganizes free-form descriptions into a numbered markdown hierarchy. This explicit Page Structure list【1†L92-L102】 defines component precedence and nesting, ensuring Stitch interprets layout relationships correctly rather than guessing element order.

Standardize Color Formatting for Design Tokens

When the skill detects color references, it reformats them as "Name (#hexcode) for functional role"【1†L104-L114】. This produces concrete tokens like "Deep Blue (#2563eb) for submit button" instead of vague "blue button" references, enabling precise style application.

Installing and Using the Enhance-Prompt Skill

The skill integrates into your CLI workflow through the stitch-utilities plugin.

Global Installation

Install the skill globally using npx so it persists across projects:

npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global

This registers the skill in your environment according to the installation instructions in README.md【3†L3-L8】.

CLI Invocation Examples

Invoke the skill by asking the Stitch agent to process your vague prompt:

# Enhance a basic page request

stitch-agent "Enhance my prompt 'make me a login page' for better Stitch results"

The agent returns a fully structured prompt:

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

For targeted edits, request enhancement of specific features:

stitch-agent "Enhance my prompt 'add a search bar' for better Stitch results"

This produces a constrained edit block【1†L78-L95】:

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.

Output Format Specification

The skill enforces a consistent markdown structure to eliminate ambiguity. Every enhanced prompt contains:

1. One-liner description – A concise summary of the UI intent
2. DESIGN SYSTEM (REQUIRED) block – Platform, theme, color tokens, and component styles【1†L18-L36】
3. Page Structure list – Numbered hierarchy of UI sections【1†L120-L135】

This format ensures Stitch receives complete context rather than partial descriptions.

Summary

• The enhance-prompt skill lives in plugins/stitch-utilities/skills/enhance-prompt/ and provides deterministic prompt enhancement.
• It assesses prompts for six critical elements and integrates DESIGN.md context when available.
• Vague terms are replaced using the KEYWORDS.md reference file, which maps ambiguous language to concrete UI components and adjective palettes.
• Colors are standardized to hexcode-bearing tokens with functional roles.
• Install globally via npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global and invoke through stitch-agent.

Frequently Asked Questions

What is the enhance-prompt skill in Stitch?

The enhance-prompt skill is a utility within the stitch-utilities plugin that transforms ambiguous natural language UI requests into structured, machine-readable prompts. It implements a deterministic pipeline defined in SKILL.md to assess, enrich, and format prompts for optimal Stitch generation results.

How does the enhance-prompt skill detect missing elements?

The skill uses an assessment matrix defined in SKILL.md【1†L33-L45】 that checks for platform specifications, page types, visual structure, style descriptors, color definitions, and component keywords. When elements are missing, the skill either infers them from project context or inserts placeholder guidance to ensure completeness.

Can I use enhance-prompt without a DESIGN.md file?

Yes. While the skill automatically injects design system tokens from DESIGN.md when present【1†L46-L63】, it functions without one by generating default design system blocks and appending a tip to create the file using the design-md skill. The enhancement pipeline proceeds regardless of file presence.

Where does the enhance-prompt skill get its UI vocabulary?

The skill sources concrete UI terminology from references/KEYWORDS.md【2†L5-L78】, which contains curated mappings of vague nouns to specific component names and adjective sections that expand mood words into measurable design attributes. This reference file ensures consistent, professional UI terminology across all enhanced prompts.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}