# How to Enhance Vague UI Prompts for Better Stitch Results

> Learn to enhance vague UI prompts for better Stitch results with the enhance-prompt skill. Transform ambiguous descriptions into structured, Stitch-ready prompts using design tokens and clear component keywords.

- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-12

---

**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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/SKILL.md)【1†L33-L45】, the skill identifies gaps that would otherwise produce generic results.

If a [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/SKILL.md) pipeline and supported by the [`references/KEYWORDS.md`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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:

```bash
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`](https://github.com/google-labs-code/stitch-skills/blob/main/README.md)【3†L3-L8】.

### CLI Invocation Examples

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

```bash

# 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:

```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

```

For targeted edits, request enhancement of specific features:

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

```

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

```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.

```

## 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`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) context when available.
- Vague terms are replaced using the **[`KEYWORDS.md`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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.