# How the Prompt Enhancement Pipeline Improves Stitch Design Generation Results

> Discover how the prompt enhancement pipeline refines Stitch design generation. Learn how it converts vague UI concepts into structured instructions for consistent, high-fidelity outputs.

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

---

**The prompt enhancement pipeline transforms vague UI concepts into structured, design-system-aware instructions that eliminate ambiguity and guide Stitch's generative model toward consistent, high-fidelity outputs.**

The **prompt enhancement pipeline** is a core component of the `google-labs-code/stitch-skills` repository, specifically implemented within the **enhance-prompt** skill. By systematically analyzing raw user input and injecting consistent visual tokens from project-specific design systems, this pipeline ensures that Stitch receives precise, context-rich instructions rather than ambiguous descriptions.

## How the Prompt Enhancement Pipeline Works

According to the source documentation 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), the pipeline executes four distinct transformation stages to convert basic prompts into production-ready specifications.

### Stage 1: Assess the Input

The pipeline begins by inspecting the user's original prompt to identify missing critical elements. It checks for **platform specifications** (web, mobile, desktop), **page type**, **structural components**, **visual style keywords**, **color requirements**, and **component terminology**.

This assessment identifies gaps that would otherwise force Stitch to infer context, which often leads to inconsistent or generic UI generation.

### Stage 2: Check for DESIGN.md

If a [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) file exists in the project root, the skill extracts the **design-system block** containing the project's palette, typography scales, and component styles. This block is then injected directly into the enhanced prompt.

If no [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) exists, the pipeline appends a tip encouraging its creation via the **design-md** skill. This guarantees that generated screens inherit the same visual language, preventing style drift across multi-page applications.

### Stage 3: Apply Enhancements

This stage performs four specific sub-transformations to maximize prompt clarity:

- **Add UI/UX Keywords** — Replaces generic terms with concrete component names. For example, "button" becomes "primary call-to-action button."
- **Amplify the Vibe** — Appends descriptive adjectives to convey aesthetic intent. "Modern" expands to "clean, minimal, with generous whitespace."
- **Structure the Page** — Rewrites the prompt into numbered sections (Header, Hero, Content, Footer) to establish clear layout hierarchy.
- **Format Colors Properly** — Adds explicit hex values and functional roles (e.g., "Primary Accent: Deep Blue (#2563eb)").

These enhancements provide Stitch with an unambiguous instruction set, reducing model hallucination and improving layout fidelity.

### Stage 4: Format the Output

The final stage structures the enhanced prompt into a predictable format: a **one-line description**, followed by the **DESIGN SYSTEM (REQUIRED)** block, then a **Page Structure** numbered list.

Optionally, the output can be written to [`next-prompt.md`](https://github.com/google-labs-code/stitch-skills/blob/main/next-prompt.md) for downstream consumption by the **stitch-loop** skill. This standardized structure aligns with Stitch's parsing expectations, enabling the model to focus on content generation rather than format interpretation.

## Practical Examples

The following examples demonstrate how raw user inputs transform into detailed specifications after processing by the enhance-prompt skill.

### Example 1: Generating a Login Page

Executing the skill via the Stitch CLI:

```bash
stitch skill run enhance-prompt "make me a login page"

```

Produces an enhanced prompt similar to:

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

```

This structured output can be piped directly to the **generate-design** skill or saved as [`next-prompt.md`](https://github.com/google-labs-code/stitch-skills/blob/main/next-prompt.md) for batch processing.

### Example 2: Refining a Header Component

For targeted modifications:

```bash
stitch skill run enhance-prompt "add a search bar"

```

The pipeline generates:

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

```

When fed into `generate-design`, Stitch understands exactly where and how to modify the UI, preventing unnecessary full-page regeneration.

## Integration with the Stitch Ecosystem

The enhance-prompt skill serves as a critical pre-processor within the broader Stitch workflow. The enhanced prompt feeds directly into the **generate-design** skill ([`plugins/stitch-design/skills/generate-design/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/SKILL.md)), which invokes the `generate_screen_from_text` tool to produce actual UI code.

When combined with the **stitch-loop** skill ([`plugins/stitch-utilities/skills/stitch-loop/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-utilities/skills/stitch-loop/SKILL.md)), enhanced prompts persisted in [`next-prompt.md`](https://github.com/google-labs-code/stitch-skills/blob/main/next-prompt.md) automatically drive multi-page site creation. Additionally, the **design-md** skill ([`plugins/stitch-utilities/skills/design-md/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-utilities/skills/design-md/SKILL.md)) generates the [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) files that the enhancement pipeline consumes, creating a closed loop of design consistency.

## Summary

- The **prompt enhancement pipeline** operates as a four-stage preprocessor within the enhance-prompt skill, systematically enriching raw UI concepts.
- **Stage 1** identifies missing context, while **Stage 2** injects design-system constraints from [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md).
- **Stage 3** applies lexical enhancements, structural organization, and color formatting to eliminate ambiguity.
- **Stage 4** outputs standardized formats compatible with downstream **generate-design** and **stitch-loop** skills.
- This architectural approach reduces iteration cycles, ensures visual consistency across screens, and aligns prompts with Stitch's training distribution for higher-quality inference.

## Frequently Asked Questions

### What is the prompt enhancement pipeline in Stitch?

The prompt enhancement pipeline is a preprocessing system implemented in the **enhance-prompt** skill that transforms vague user descriptions into structured, design-system-aware specifications. It operates by analyzing input gaps, injecting project-specific constraints from [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md), and applying lexical enhancements to maximize clarity for Stitch's generative model.

### How does DESIGN.md improve design generation results?

The [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md) file acts as a canonical source for visual tokens including color palettes, typography scales, and component styles. When the pipeline detects this file, it injects these specifications directly into the prompt, ensuring every generated screen adheres to the same design language and preventing visual inconsistency across multi-page applications.

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

Yes. The pipeline functions independently and will enhance prompts using general best practices for UI/UX terminology and structure. However, without a [`DESIGN.md`](https://github.com/google-labs-code/stitch-skills/blob/main/DESIGN.md), the output will lack project-specific color values and component styles, potentially requiring additional manual refinement to match your existing visual system.

### How does the enhanced prompt connect to the generate-design skill?

The enhanced prompt serves as the primary input to the **generate-design** skill, which calls the `generate_screen_from_text` tool. By feeding a rich, structured prompt into this skill rather than raw user input, the system reduces hallucination and ensures the generated code aligns precisely with the specified layout, color scheme, and component hierarchy.