From stitch-kit
Generates high-fidelity UI screens or wireframes from structured text prompts using Stitch. Core tool for text-to-UI workflows; supports mobile/desktop prototyping.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stitch-kit:stitch-mcp-generate-screen-from-textThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generates a UI design screen from a structured text prompt. This is the central action in any Stitch workflow — everything before it (spec generation, prompt assembly) is preparation, and everything after it (screen retrieval, code conversion) is follow-through.
Generates a UI design screen from a structured text prompt. This is the central action in any Stitch workflow — everything before it (spec generation, prompt assembly) is preparation, and everything after it (screen retrieval, code conversion) is follow-through.
Only use this skill when the user explicitly mentions "Stitch" or when called from an upstream skill (e.g. stitch-ideate, stitch-orchestrator).
You must have a projectId before calling this. If you don't have one:
stitch-mcp-create-projectstitch-mcp-list-projectsstitch-ui-prompt-architect{
"name": "generate_screen_from_text",
"arguments": {
"projectId": "3780309359108792857",
"prompt": "[Full structured prompt — see below]",
"deviceType": "MOBILE",
"modelId": "GEMINI_3_1_PRO"
}
}
projectId — numeric ID only, no projects/ prefix✅ "3780309359108792857"
❌ "projects/3780309359108792857"
prompt — use the [Context] [Layout] [Components] structure[Context & Style]
[Device] [Mode] [screen type] for [product]. [aesthetic]. [theme]. [colors]. [font].
[Layout]
[Describe the structural arrangement]
[Components]
[Specific named UI components with details]
For best results, use the stitch-ui-prompt-architect skill to assemble the prompt before calling this tool.
deviceType| Value | Use when |
|---|---|
MOBILE | Mobile app, phone-sized UI (default if uncertain) |
DESKTOP | Web dashboard, landing page, SaaS UI |
TABLET | Tablet-specific layout |
AGNOSTIC | Not tied to a specific device — responsive/fluid layout |
modelId| Value | Use when |
|---|---|
GEMINI_3_1_PRO | Recommended — complex layouts, high fidelity |
GEMINI_3_FLASH | Fast iteration, wireframes, simple changes |
GEMINI_3_PRO | Deprecated. Still works but will be removed. Use GEMINI_3_1_PRO instead. |
This tool returns session info but not the actual screenshot/HTML. To retrieve the design:
stitch-mcp-list-screens with projects/[projectId] to find the new screenstitch-mcp-get-screen with the projectId and screenId to get the screenshot and HTMLBefore calling this tool, verify the prompt:
deviceType parameterWhen the prompt is a complete PRD document (product overview, design system, multiple screen specifications, build guide), Stitch will generate multiple screens in a single call — not just one. Stitch generates up to 10 screens per call. A PRD with 8 screen specs typically produces 5-7 screens automatically.
This is the same mechanism Stitch's web Ideate uses for "generate all screens". The PRD format acts as a comprehensive prompt that Stitch decomposes internally.
How to use batch generation:
Send the full PRD text as the prompt parameter
Stitch generates up to ~10 screens per call from a multi-screen PRD
Two possible outcomes depending on whether the MCP response times out:
If response returns with data:
output_components for continuation suggestions (e.g. "Yes, make them all", "Generate remaining screens")generate_screen_from_text again with the suggestion text as the prompt — the user already initiated generation, no need to re-confirmoutput_components suggestions appear (max 3 continuation calls to prevent infinite loops)If response returns empty (HTTP timeout):
list_screens to discover what was generatedStitch generation takes 60–180 seconds for single screens and up to 5 minutes for multi-screen PRD generation. This is normal behavior, not a timeout.
list_screens afterwardlist_screens, retry ONCE max if nothing appearedexamples/desktop.md — Desktop dashboard prompts (SaaS analytics, admin panel)examples/mobile.md — Mobile app prompts (login, social feed, e-commerce)npx claudepluginhub gabelul/stitch-kit --plugin stitch-kitCreates Stitch UI screens, design systems, variants, and prototypes from briefs, mockups, or product context. Exports Tailwind HTML, screenshots, and local code artifacts. Use for screen exploration, editing Stitch projects, or multi-screen prototypes.
Creates effective prompts for Google Stitch, an AI UI generator by Google Labs. Covers specific prompting principles, visual style definition, multi-screen flows, and platform targeting for web and mobile app designs.
Orchestrates Stitch UI design workflows: routes from user request through spec, prompt assembly, screen generation, iteration, design system extraction, and framework conversion (Next.js, Svelte, HTML, React Native, SwiftUI).