How to Use the Prompt Enhancement Pipeline in Stitch: A Complete Guide to UI/UX Keywords

The prompt enhancement pipeline is a four-step workflow in the enhance-prompt skill that transforms vague UI descriptions into structured, design-system-ready prompts by assessing input, injecting DESIGN.md context, applying curated UI/UX keywords, and formatting output for deterministic generation.

The google-labs-code/stitch-skills repository includes a powerful enhance-prompt skill that standardizes how developers communicate UI requirements to Stitch. By understanding the prompt enhancement pipeline and mastering the UI/UX keyword vocabulary, you can convert ambiguous concepts like "make a login page" into precise, implementable specifications that respect your project's design system.

What Is the Prompt Enhancement Pipeline?

The prompt enhancement pipeline is the core workflow defined in plugins/stitch-utilities/skills/enhance-prompt/SKILL.md. It processes raw, vague UI ideas through a sequence of transformations to produce a fully-specified, Stitch-ready prompt. According to the source code, this pipeline ensures that every essential design dimension—platform, page type, structure, visual style, colors, and component keywords—is explicitly defined before generation begins.

The Four Steps of the Prompt Enhancement Pipeline

Step 1: Assess the Input

The pipeline first checks the original prompt for missing elements such as platform (web, mobile), page type, structure, visual style, colors, and component keywords. This assessment guarantees that every essential design dimension is covered before feeding the prompt to Stitch.

Step 2: Check for DESIGN.md

The skill looks for a DESIGN.md file in the current project. If present, its design-system block—including palette, typography, and component styles—is injected into the output. If absent, the pipeline adds a tip prompting you to create one via plugins/stitch-utilities/skills/design-md/SKILL.md. This ensures design-system consistency across multi-page projects.

Step 3: Apply Enhancements

This step performs four distinct transformations:

• Add UI/UX Keywords – Replaces vague terms with concrete component names (e.g., "menu at the top" becomes "navigation bar with logo and menu items").
• Amplify the Vibe – Injects descriptive adjectives (e.g., "modern" becomes "clean, minimal, with generous whitespace").
• Structure the Page – Builds a numbered "Page Structure" section that defines the layout hierarchy.
• Format Colors Properly – Uses the Name (#hexcode) for role syntax to ensure color consistency.

Step 4: Format the Output

The pipeline assembles the enhanced prompt in a canonical order: one-line purpose → DESIGN SYSTEM (REQUIRED) block → Page Structure → optional tip. This predictable layout allows downstream skills (e.g., stitch-loop) to parse the output reliably.

How to Use UI/UX Keywords in Your Prompts

The UI/UX Keywords are a curated vocabulary defined in plugins/stitch-utilities/skills/enhance-prompt/references/KEYWORDS.md. The reference list groups terms into categories such as Navigation, Forms, Calls to Action, Feedback, Layout, plus adjective palettes (Minimal, Professional, Playful) and color-role terminology.

To use these keywords effectively:

1. Identify vague terms in your original prompt (e.g., "button", "list of items", "page").
2. Pick the matching keyword from the appropriate category. For example:
   • "button" → primary call-to-action button (Buttons category).
   • "list of items" → card grid layout or vertical list with thumbnails (Content Containers).
3. Insert the keyword during Step 3A of the pipeline. The skill automatically performs this replacement, but you can also supply the keyword directly for tighter control.
4. Combine with adjectives from the Adjective Palettes section to convey the desired visual mood (e.g., "clean, minimal" for a Minimal palette).

Practical Examples

Below are two minimal examples that illustrate the pipeline in action. All interactions assume you are invoking the enhance-prompt skill from the Stitch CLI or UI.

# Example 1 – Vague Input → Structured Prompt

User input:
> make me a login page

# After the pipeline:

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

# Example 2 – Adding a UI Element Using UI/UX Keywords

User input:
> add a search bar

# After the pipeline:

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

Summary

• The prompt enhancement pipeline in plugins/stitch-utilities/skills/enhance-prompt/SKILL.md transforms vague UI ideas into structured prompts through four sequential steps: Assess Input, Check for DESIGN.md, Apply Enhancements, and Format Output.
• UI/UX Keywords are stored in plugins/stitch-utilities/skills/enhance-prompt/references/KEYWORDS.md and provide a curated vocabulary for Navigation, Forms, Calls to Action, Feedback, Layout, and visual adjectives.
• The pipeline automatically replaces generic terms with specific keywords (e.g., "button" → "primary call-to-action button") and injects design system context from DESIGN.md when available.
• Output follows a canonical structure that downstream skills can parse reliably, ensuring consistent generation across multi-page projects.

Frequently Asked Questions

What happens if my project doesn't have a DESIGN.md file?

If the pipeline does not find a DESIGN.md file in the current project, it adds a tip to the output prompting you to create one. You can generate this file using the design-md skill located at plugins/stitch-utilities/skills/design-md/SKILL.md. The pipeline will continue to enhance your prompt using default values, but adding a DESIGN.md ensures consistency across multiple pages.

How do I choose the right UI/UX keyword for my component?

Consult the KEYWORDS.md file at plugins/stitch-utilities/skills/enhance-prompt/references/KEYWORDS.md. Match your vague concept to the appropriate category: use Navigation for menus, Forms for inputs, Calls to Action for buttons, and Content Containers for lists. Replace generic terms like "button" with specific variants like "primary call-to-action button" to give Stitch precise implementation instructions.

Can I manually trigger the prompt enhancement pipeline without the Stitch CLI?

The examples in plugins/stitch-utilities/skills/enhance-prompt/README.md assume invocation through the Stitch CLI or UI. While the underlying logic resides in the skill definition at SKILL.md, the pipeline is designed to run as part of the Stitch ecosystem. You cannot run the pipeline as a standalone script, but you can reference the keyword taxonomy manually when writing prompts to achieve similar precision.

How does the pipeline handle color specifications?

During Step 3 (Apply Enhancements), the pipeline reformats color descriptions into the standardized Name (#hexcode) for role syntax. For example, "blue for buttons" becomes "Deep Blue (#2563eb) for submit button and links." This formatting ensures that Stitch interprets color roles consistently, especially when combined with a DESIGN.md file that defines the complete palette.

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