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

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

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

{
  "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. 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 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.

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