# Difference Between Generate from Text and Generate from Image Flows in Stitch

> Explore the differences between Stitch's generate from text and generate from image flows. Learn how to create designs using text prompts or image uploads for efficient HTML conversion.

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

---

**Stitch's `stitch::generate-design` skill supports two primary creation pathways: text-to-screen generation via `generate_screen_from_text` with built-in prompt enhancement, and image-to-screen conversion via `upload-to-stitch` followed by `edit_screens` to refine raster assets into editable HTML.**

The `stitch::generate-design` skill in the google-labs-code/stitch-skills repository provides distinct architectural flows for creating UI screens from natural language descriptions versus existing visual mockups. While both flows ultimately produce identical HTML output formats, their entry points, processing pipelines, and intermediate steps differ significantly based on the input modality.

## Core Architectural Differences

| Aspect | Generate from Text | Generate from Image |
|--------|-------------------|---------------------|
| **Entry Point** | Natural language description | Uploaded image, mockup, or screenshot |
| **Primary Tools** | `generate_screen_from_text` → `outputComponents` | `upload-to-stitch` → `edit_screens` → `outputComponents` |
| **Prompt Enhancement** | Applied immediately to the input description | Applied to the refinement prompt after upload |
| **Design System Handling** | Tokens applied automatically at project level | Added during the edit/refinement phase |
| **Initial Output** | HTML screen | Raster asset converted to HTML |

## The Generate from Text Flow

This flow converts natural language descriptions directly into structured HTML screens through the Prompt Enhancement Pipeline.

### Prompt Enhancement and Generation

When you provide a text description, Stitch first processes it through the **Prompt Enhancement Pipeline** defined 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). This pipeline uses mappings from [`design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/design-mappings.md) and keywords from [`prompt-keywords.md`](https://github.com/google-labs-code/stitch-skills/blob/main/prompt-keywords.md) to convert vague descriptions into structured, design-system-aware prompts.

According to the source code in [`SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/SKILL.md), the enhanced prompt deliberately **omits** specific color, font, or roundness values because the design system is applied automatically at the project level.

### Execution Steps

1. **Project Discovery** – `list_projects` or `create_project` identifies the target `projectId`
2. **Screen Generation** – `generate_screen_from_text` receives the enhanced prompt and optional `designSystem` ID
3. **Asset Retrieval** – The response's `outputComponents` contain HTML and screenshot URLs downloaded to `.stitch/designs`

### Code Example: Text-to-Screen Generation

```json
{
  "projectId": "1234567890",
  "prompt": "[Overall purpose and user intent of the page]\n\n**PLATFORM:** Web, Desktop‑first\n\n**PAGE STRUCTURE:**\n1. **Header:** Sticky navigation bar with logo and list items\n2. **Hero Section:** High‑impact hero with full‑width imagery and CTA\n3. **Primary Content Area:** Responsive card grid with hover states\n4. **Footer:** Links and copyright",
  "designSystem": "assets/design-system-01",
  "deviceType": "DESKTOP"
}

```

Execute via the Stitch MCP tool:

```bash
stitch generate_screen_from_text --json payload.json

```

## The Generate from Image Flow

This flow transforms existing visual assets—such as Figma exports, Sketch files, or hand-drawn mockups—into fully editable Stitch screens through a two-phase upload and refinement process.

### Upload and Refinement Process

Unlike the text flow, image generation begins with the **`upload-to-stitch`** skill, which creates a new screen containing the raw raster asset without design-system metadata. The **Prompt Enhancement Pipeline** runs only during the subsequent edit phase, when you provide a refinement prompt describing how to interpret the image (e.g., "recreate this mockup as a dashboard with a data table").

As implemented in [`plugins/stitch-utilities/skills/upload-to-stitch/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-utilities/skills/upload-to-stitch/SKILL.md), the uploaded image initially contains no design-system metadata. The edit flow can then add or adjust design-system-driven elements based on your refinement instructions.

### Execution Steps

1. **Project Discovery** – Same project identification as the text flow
2. **Image Upload** – `upload-to-stitch` uploads the image and creates a screen holding the raster asset
3. **Screen Identification** – `list_screens` retrieves the newly created `screenId`
4. **Edit Prompt Enhancement** – Your refinement prompt is enhanced using the same pipeline as the text flow
5. **Screen Editing** – `edit_screens` converts the raster into editable HTML based on the refined prompt
6. **Asset Retrieval** – `outputComponents` are downloaded to `.stitch/designs`

### Code Example: Image-to-Screen Conversion

First, upload the mockup:

```bash
stitch upload_to_stitch \
  --projectId 1234567890 \
  --file ./mockup.png

```

Then, prepare the refinement payload:

```json
{
  "projectId": "1234567890",
  "selectedScreenIds": ["screen-abc123"],
  "prompt": "Recreate this dashboard mockup with a data table, collapsible side navigation, and a chart widget. Use the project's design system for colors and typography."
}

```

Finally, refine the uploaded image:

```bash
stitch edit_screens --json edit-payload.json

```

Both flows return `outputComponents` containing `htmlUrl` and `screenshotUrl`. Download them:

```bash
curl -L -o ./designs/home.html "$(jq -r .htmlUrl response.json)"
curl -L -o ./designs/home.png "$(jq -r .screenshotUrl response.json)"

```

## Key Implementation Files

The architectural distinction between these flows is defined in several critical source files:

- [`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) – Master specification of all generation modes, including prompt enhancement rules and the "Do NOT include design tokens" directive for text generation
- [`plugins/stitch-design/skills/generate-design/references/design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/references/design-mappings.md) – UI-UX keyword mappings used by the Prompt Enhancement Pipeline
- [`plugins/stitch-design/skills/generate-design/references/prompt-keywords.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/references/prompt-keywords.md) – Technical terms Stitch understands for screen generation
- [`plugins/stitch-utilities/skills/upload-to-stitch/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-utilities/skills/upload-to-stitch/SKILL.md) – Implements the image-upload step for the Generate from Image flow
- [`plugins/stitch-design/skills/generate-design/examples/enhanced-prompt.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/examples/enhanced-prompt.md) – Before/after examples of prompt enhancement used by both flows

## Summary

- **Generate from Text** uses `generate_screen_from_text` to convert natural language directly into HTML, applying prompt enhancement immediately and omitting explicit design tokens in favor of automatic project-level application.
- **Generate from Image** requires `upload-to-stitch` to create a raster-based screen, followed by `edit_screens` with an enhanced refinement prompt to convert the image into editable HTML.
- Both flows converge on identical output formats—HTML screens with optional design-system tokens—allowing downstream build skills to operate uniformly regardless of the creation method.
- The Prompt Enhancement Pipeline runs at different stages: immediately for text input, and during the edit phase for image input.

## Frequently Asked Questions

### Can I switch from an image-based screen to text-based editing later?

Yes. Once the image flow completes and `edit_screens` converts the raster to HTML, the resulting screen is identical to text-generated screens. You can use `edit_screens` again with a new text prompt to modify it, effectively treating the converted image as a starting point for further text-driven iterations.

### Why does the text flow omit design tokens in the prompt while the image flow can add them during editing?

According to the [`SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/SKILL.md) specification, the text flow's enhanced prompt deliberately excludes colors, fonts, and roundness values because these are applied automatically at the project level through the `designSystem` parameter. In contrast, the image flow initially creates a raw raster asset with no design-system metadata; the subsequent edit phase can then introduce or adjust these tokens to match your project's design system.

### Which flow produces better results for complex layouts?

The **Generate from Text** flow typically produces more predictable results for complex layouts because the Prompt Enhancement Pipeline can fully structure your intent before generation. The **Generate from Image** flow depends on the quality of the source image and the precision of your refinement prompt; while excellent for replicating existing visual designs, it may require multiple edit iterations to achieve complex interactive behaviors not visually apparent in the original mockup.

### Do both flows support the same output formats and downstream build skills?

Yes. Both flows ultimately populate `outputComponents` with `htmlUrl` and `screenshotUrl` assets stored in `.stitch/designs`. This standardized output allows downstream skills—such as React-components or React-Native generators—to process screens identically regardless of whether they originated from text descriptions or image uploads.