# How to Structure Prompts for Stitch Design Generation vs. Editing

> Master Stitch prompts for design generation and editing. Learn how to structure layout content hierarchy for generation and utilize precise styling for targeted edits.

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

---

**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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/.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:

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

```markdown
[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:

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

```bash
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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-utilities/skills/stitch-loop/SKILL.md)** – Defines the baton mechanism ([`next-prompt.md`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/.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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/.stitch/metadata.json). When performing edits, the skill overwrites existing local files to ensure your workspace remains synchronized with the remote Stitch project state.