How the Prompt Enhancement Pipeline Improves Stitch Design Generation Results

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

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

Produces an enhanced prompt similar to:

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 for batch processing.

Example 2: Refining a Header Component

For targeted modifications:

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

The pipeline generates:

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), 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), enhanced prompts persisted in next-prompt.md automatically drive multi-page site creation. Additionally, the design-md skill (plugins/stitch-utilities/skills/design-md/SKILL.md) generates the 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.
• 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, and applying lexical enhancements to maximize clarity for Stitch's generative model.

How does DESIGN.md improve design generation results?

The 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, 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.

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