# Generate From Text vs. Edit Flows in Stitch: What's the Difference?

> Understand the difference between Stitch's Generate From Text and Edit flows. Learn how to create new UI screens from text or precisely modify existing ones with component-level changes.

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

---

**The Generate From Text flow creates entirely new UI screens from natural language descriptions using the `generate_screen_from_text` tool, while the Edit flow modifies existing screens using the `edit_screens` tool, allowing precise color codes and component-level changes.**

Understanding the difference between generate from text and edit flows in Stitch is essential for efficient AI-assisted UI development. The google-labs-code/stitch-skills repository provides two distinct design-automation pipelines within the `generate-design` skill, each optimized for specific creation and modification tasks. Knowing when to trigger each flow ensures you leverage the correct tool for greenfield development versus iterative refinement.

## Core Architectural Differences

### Primary Goals and Tool Selection

The **Generate From Text** flow is designed for **greenfield development**. When activated, it calls the `generate_screen_from_text` tool (or `generate_screen_from_image` for image-based inputs) to produce a brand-new screen from scratch. This flow is documented 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) at lines 101-125.

The **Edit Flow** focuses on **incremental modification**. It invokes the `edit_screens` tool to target specific components within existing screens, as implemented in lines 5-27 of the same skill file. This flow requires existing `screen_id` values and applies surgical changes rather than rebuilding the entire layout.

### Prompt Structure and Design System Constraints

Generate From Text demands **full-page layout prompts** that describe the overall purpose, platform, and page structure. These prompts **must exclude** design-system tokens such as hex colors, font names, or border-radius values because the **manage-design-system** skill applies these globally across the project.

Edit Flow accepts **targeted edit prompts** that pinpoint specific locations (e.g., "primary button in hero section"). Unlike generation prompts, edit prompts **allow** hex color codes, shadow values, and other precise visual specifications because they only affect the selected component rather than the global design system.

## How the Generate From Text Flow Works

When you initiate a new screen creation, the flow follows a structured pipeline defined in the skill documentation. The system analyzes the project and design system, replaces vague UX terms with professional terminology, and structures a complete page specification including headers, heroes, content areas, and footers.

The tool receives a JSON payload structured as follows:

```json
{
  "projectId": "proj_12345",
  "prompt": "Create a landing page for a travel-booking app.\n\n**PLATFORM:** Web, Desktop-first\n\n**PAGE STRUCTURE:**\n1. **Header:** Sticky navigation bar with logo and menu.\n2. **Hero Section:** Large background image, headline \"Explore the World\", CTA \"Start Your Journey\".\n3. **Features:** Three-column cards describing Flights, Hotels, Activities.\n4. **Footer:** Links to Terms, Privacy, Contact.",
  "designSystem": "assets/design-system-01",
  "deviceType": "DESKTOP"
}

```

According to the source code in [`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), this calls the `generate_screen_from_text` tool. After generation, Stitch downloads the HTML and screenshot to `.stitch/designs/`, and you can optionally launch the Edit flow for further polish.

## How the Edit Flow Works

The Edit flow modifies existing screens through a targeted approach. Like the generation flow, it begins with the Prompt Enhancement Pipeline (lines 29-55 in the skill file), but diverges by focusing on single locations and adding visual or structural specifics.

The flow requires the `selectedScreenIds` parameter to identify which screens to modify:

```json
{
  "projectId": "proj_12345",
  "selectedScreenIds": ["screen_987"],
  "prompt": "In the hero section, change the primary button colour to #004080 and add a subtle drop-shadow. Also insert a secondary button next to it with the label \"Learn More\"."
}

```

This calls the `edit_screens` tool, which overwrites the previous files in `.stitch/designs/` and refreshes the project metadata in [`.stitch/metadata.json`](https://github.com/google-labs-code/stitch-skills/blob/main/.stitch/metadata.json). The tool allows precise values like `#004080` because changes are scoped to specific components rather than the global design system.

## Shared Infrastructure: The Prompt Enhancement Pipeline

Both flows share a common **Prompt Enhancement Pipeline** implemented in the `generate-design` skill. This pipeline performs three critical operations:

1. **Project Analysis** – Examines existing project context and design system constraints
2. **Terminology Enhancement** – Replaces vague UX descriptions with professional design terminology
3. **Context Structuring** – Organizes the prompt into actionable specifications for the AI

While the pipeline is identical for both flows, the output differs based on the target tool. Generation prompts emerge as complete page specifications, while edit prompts become focused, location-specific instructions.

## Summary

- **Generate From Text** creates new screens from scratch using `generate_screen_from_text`, requires full-page prompts without design tokens, and stores outputs in `.stitch/designs/`
- **Edit Flow** modifies existing screens using `edit_screens`, requires `selectedScreenIds`, accepts hex colors and precise values, and overwrites existing files
- Both flows use the same Prompt Enhancement Pipeline but diverge when handing off to their respective tools
- **Design system tokens** are prohibited in generation prompts but permitted in edit prompts because of their different scope impacts

## Frequently Asked Questions

### Can I use hex color codes in the Generate From Text flow?

No. The Generate From Text flow explicitly prohibits hex colors, font names, and other design-system tokens in prompts because these are applied globally by the **manage-design-system** skill. If you need specific colors, create the screen first, then use the Edit flow to apply precise values.

### How does Stitch decide which flow to use automatically?

The **generate-design** skill analyzes your request context. If you provide a description for a new screen without referencing existing screen IDs, it triggers the Generate From Text flow. If you reference existing screens or request modifications to specific components, it automatically selects the Edit flow and invokes `edit_screens`.

### What happens to existing files when I run an Edit flow?

The Edit flow overwrites the previous HTML and screenshot files in `.stitch/designs/` for the specific screens listed in `selectedScreenIds`. It also refreshes [`.stitch/metadata.json`](https://github.com/google-labs-code/stitch-skills/blob/main/.stitch/metadata.json) to reflect the updated component states. Always ensure you have backed up important work before running edits.

### Can I switch from Generate From Text to Edit flow for the same screen?

Yes. After generating a new screen with the Generate From Text flow, you can immediately initiate an Edit flow on that same screen. The generated screen receives a unique `screen_id`, which you can then reference in `selectedScreenIds` for targeted modifications like color adjustments or component additions.