How to Structure Prompts for Stitch Design Generation vs. Editing

Stitch design prompts follow a strict enhancement pipeline where generation prompts focus exclusively on layout and content hierarchy while delegating visual styling to the project-level design system, whereas editing prompts permit specific hex codes and precise visual tokens but require exact location descriptors to target existing screen elements.

The google-labs-code/stitch-skills repository implements a sophisticated prompt-handling architecture that treats structuring prompts for Stitch design generation vs. editing as distinct workflows with unique constraints. Understanding these differences prevents "theme leakage" during initial creation while enabling pixel-perfect precision when iterating on existing UI screens.

The Prompt-Enhancement Pipeline

The core generate-design skill enforces a five-step Prompt-Enhancement Pipeline before invoking any Stitch APIs, ensuring that raw user requests transform into structured, context-aware instructions.

Step 1: Prompt Enhancement

Every raw request first passes through the enhance-prompt skill defined in plugins/stitch-utilities/skills/enhance-prompt/SKILL.md. This component adds professional UI/UX terminology, replaces vague verbs with specific design descriptors, and injects the project's design-system block when available. The skill outputs a markdown-formatted prompt that standardizes intent for the downstream generation process.

Step 2: Design-System Verification

Before generation, the pipeline queries the Stitch project via list_design_systems to verify existing design system assets. If a design system exists, the prompt must not contain color, font, or theme instructions—these visual properties are applied automatically at the project level. If no design system exists, the skill automatically invokes manage-design-system to create one before proceeding, ensuring visual consistency across all generated outputs.

Step 3: Prompt Structuring by Mode

The pipeline diverges based on whether the request constitutes generation or editing:

• Generation prompts target generate_screen_from_text and focus exclusively on layout, content, and hierarchy. They follow a strict markdown template listing purpose, platform, and page-structure sections. Including hex codes or style tokens here causes "theme leakage" and inconsistent results, so the pipeline strips such tokens automatically.

• Edit prompts target edit_screens and describe exact locations and visual changes (e.g., "Change the primary button in the hero section to #004080"). As implemented in plugins/stitch-design/skills/generate-design/SKILL.md (lines 205-236), these prompts allow hex codes and precise token values because they modify existing screens rather than establishing new design patterns.

Step 4: Tool Invocation

Once enhanced, the skill calls the appropriate Stitch API—generate_screen_from_text, edit_screens, or generate_variants—passing the structured prompt and relevant metadata. The API returns outputComponents containing text descriptions and suggestions, which the skill displays to the user before proceeding to asset handling.

Step 5: Asset Download and Metadata Updates

Generated HTML and screenshots save to .stitch/designs/. For edits, the skill overwrites existing local files to maintain synchronization with the remote state. The skill also updates .stitch/metadata.json to track new screen IDs and version history, ensuring the local workspace reflects the current project state accurately.

Practical Code Examples

The repository provides a CLI wrapper (npx skills) for executing these workflows directly from your terminal.

Creating a New Landing Page

First, enhance the raw request:

npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global
npx skills run enhance-prompt "Create a modern landing page for a SaaS product"

This produces an enhanced prompt following the markdown template:

[Landing page for a SaaS product that converts visitors into trial users]

**PLATFORM:** Web, Desktop-first

**PAGE STRUCTURE:**
1. **Header:** Sticky navigation bar with logo on the left and CTA button on the right
2. **Hero Section:** Large headline, sub-headline, primary CTA button, and a supporting illustration
3. **Features:** 3-column card layout, each card with an icon, title, and short description
4. **Footer:** Links, copyright notice, and social icons

Execute generation:

npx skills run generate-design "$(cat enhanced_prompt.txt)"

The skill automatically verifies the design system, strips any color instructions, and calls generate_screen_from_text, storing output in .stitch/designs/<screen-id>.html.

Editing an Existing Screen

Locate the target screen and construct a specific edit prompt:

SCREEN_ID=$(npx skills run list-screens --project-id $PROJECT_ID | jq -r '.screens[0].id')

EDIT_PROMPT="In the hero section, change the primary CTA button background to #004080 and add a subtle drop-shadow."

npx skills run generate-design --mode edit --screen-id $SCREEN_ID --prompt "$EDIT_PROMPT"

Unlike generation, this workflow preserves the hex code #004080, calls edit_screens with the specific screen ID, and overwrites the local HTML file to reflect changes immediately.

Key Implementation Files

The following source files define the prompt-handling logic:

• plugins/stitch-design/skills/generate-design/SKILL.md – Central definition of the generate-design skill, including the Prompt-Enhancement Pipeline, generation/edit/variant flows, and asset handling specifications (lines 205-236 cover the Edit Flow specifically).

• plugins/stitch-utilities/skills/enhance-prompt/SKILL.md – Implements the enhance-prompt pipeline that adds UI terminology and prepares the markdown template.

• plugins/stitch-design/skills/manage-design-system/SKILL.md – Handles creation and updating of project-level design systems (colors, fonts, roundness), called automatically when generation prompts lack an existing system.

• plugins/stitch-utilities/skills/stitch-loop/SKILL.md – Defines the baton mechanism (next-prompt.md) that drives iterative generation loops while ensuring prompts always contain the design-system block.

Summary

• Generation prompts focus on layout, content, and hierarchy while relying on the project design system for all visual styling; they must exclude colors, fonts, and theme instructions to prevent inconsistency.
• Edit prompts allow specific hex codes and visual tokens but require precise location descriptors (e.g., "in the hero section") to target existing elements accurately.
• The Prompt-Enhancement Pipeline in generate-design automatically processes raw requests through enhance-prompt, validates design-system presence, and routes to the appropriate API (generate_screen_from_text vs. edit_screens).
• Generated assets save to .stitch/designs/ with metadata tracked in .stitch/metadata.json, while edits overwrite existing local files to maintain synchronization.

Frequently Asked Questions

What happens if I include hex codes in a generation prompt?

The pipeline automatically strips color, font, and theme instructions from generation prompts to prevent "theme leakage." According to the source code in plugins/stitch-design/skills/generate-design/SKILL.md, these tokens are removed before calling generate_screen_from_text because the design system should supply all visual styling. Including them may result in inconsistent or overridden styles.

How does the system handle missing design systems during generation?

If list_design_systems returns no results, the generate-design skill automatically invokes the manage-design-system skill defined in plugins/stitch-design/skills/manage-design-system/SKILL.md. This creates a project-level design system before generation proceeds, ensuring that subsequent prompts reference consistent color palettes and typography scales.

Can I edit multiple screens simultaneously with one prompt?

The current implementation targets specific screens via the --screen-id parameter when calling edit_screens. While you can generate variants across multiple screens using generate_variants, editing operations require precise location targeting (lines 205-236 of the SKILL.md), making single-screen edits the standard workflow for maintaining accuracy.

Where are generated designs stored locally?

All generated HTML and screenshot assets save to the .stitch/designs/ directory, with metadata tracking screen IDs and versions in .stitch/metadata.json. When performing edits, the skill overwrites existing local files to ensure your workspace remains synchronized with the remote Stitch project state.

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