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

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. This pipeline uses mappings from design-mappings.md and keywords from prompt-keywords.md to convert vague descriptions into structured, design-system-aware prompts.

According to the source code in 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

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

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

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

Then, prepare the refinement payload:

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

stitch edit_screens --json edit-payload.json

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

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 – 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 – UI-UX keyword mappings used by the Prompt Enhancement Pipeline
• 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 – Implements the image-upload step for the Generate from Image flow
• 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 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.

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