OpenSkillIndex← back to search
claude-codedevelopment

Full-stack-skills stitch-mcp-generate-screen-from-text

Generate high-fidelity UI screens or wireframes from text descriptions via Stitch MCP generate_screen_from_text. Use when the user wants to create, design, or visualize a UI screen using Stitch. Supports MOBILE, DESKTOP, TABLET, and SMART_WATCH device types with Gemini Pro or Flash models.

install
source · Clone the upstream repo
git clone https://github.com/partme-ai/full-stack-skills
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/partme-ai/full-stack-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/stitch-skills/stitch-mcp-generate-screen-from-text" ~/.claude/skills/partme-ai-full-stack-skills-stitch-mcp-generate-screen-from-text && rm -rf "$T"
manifest: skills/stitch-skills/stitch-mcp-generate-screen-from-text/SKILL.md
tags
#ui-design#stitch-mcp#screen-generation#device-agnostic#visualize-ui
source content

Tools

This skill is designed to call the Stitch MCP tool:

  • generate_screen_from_text

If your client namespaces MCP tools, it may appear as 

mcp__<serverName>__generate_screen_from_text
.

When to use this skill

CRITICAL PREREQUISITE: You must ONLY use this skill when the user EXPLICITLY mentions "Stitch".

ALWAYS use this skill when the user:

  • Describes a UI interface and asks Stitch to generate it.
  • Asks to "Design", "Generate", "Create", or "Make" a screen using Stitch.
  • Provides specific visual requirements ("Dark mode", "Blue button") for a Stitch generation.
  • Wants to visualize a wireframe or concept via Stitch.
  • Is in the Step 5 of the 
    stitch-ui-designer
    SOP workflow.

Trigger phrases include:

  • "Use Stitch to design a screen" (用 Stitch 设计一个页面)
  • "Stitch generate UI" (Stitch 生成 UI)
  • "Draw a login page with Stitch" (用 Stitch 画一个登录页)

Input Parameters

The skill expects you to extract the following information from the user request:

  • projectId
     (required): The numeric Project ID. Format: Pure ID (e.g., 
    37803...
    ), NO 
    projects/
    prefix.
  • prompt
     (required): The structured text description of the screen (see "Constructing the Prompt" below).
  • deviceType
     (optional): The target device.
    • Values: 
      MOBILE
      (default), 
      DESKTOP
      , 
      TABLET
      , 
      SMART_WATCH
      .
  • modelId
     (optional): The model to use.
    • Values: 
      GEMINI_3_PRO
      (Recommended for quality), 
      GEMINI_3_FLASH
      (Speed).

How to use this skill

0. Call the MCP Tool

Invoke 

generate_screen_from_text
with:

  • projectId
    (pure numeric string, no 
    projects/
    )
  • prompt
  • deviceType
    (optional)
  • modelId
    (optional)

1. Constructing the Prompt (The Art of Prompting)

The 

prompt
argument is the most critical factor for quality. Do not just pass the user's raw input. You MUST enrich it using the Structure Strategy:

[Device] [Mode] [Screen Type]. [Style]. [Layout]. [Components].

  • Context: "Mobile High-Fidelity login screen."
  • Style: "Cyberpunk aesthetic. Dark mode. Neon blue accents."
  • Layout: "Center-aligned vertical stack."
  • Components: "Glitch-effect Logo. Input fields with glowing borders. Primary 'Jack In' button."

2. Choosing Device Type (
deviceType
)

  • MOBILE
    (Default): Vertical layouts, ~375px width. Best for consumer apps.
  • DESKTOP
    : Horizontal layouts, ~1440px width. Best for SaaS, Dashboards, Landing Pages.
  • TABLET
    : Hybrid layouts.
  • SMART_WATCH
    : Tiny, compact layouts.

3. Choosing Model (
modelId
)

  • GEMINI_3_PRO
    : Recommended. High intelligence, better instruction following, superior aesthetics. Use for all complex/final designs.
  • GEMINI_3_FLASH
    : Faster, lower cost. Good for simple wireframes or rapid iteration.

Best Practices

  1. Detailed Components: Don't just say "Form". Say "Form with Email, Password, and Eye toggle icon".
  2. Color Precision: Mention specific colors (e.g., "Emerald Green", "#FF5733") if the user specifies them.
  3. Content Realism: Ask for realistic text placeholders (e.g., "Welcome back, Alice" instead of "Lorem Ipsum").
  4. Device Alignment: Ensure the 
    prompt
    description matches the 
    deviceType
    (e.g., don't ask for a "Sidebar" on 
    MOBILE
    ).
  5. No Code Generation: This skill generates Visual Designs, not implementation code. Do not confuse with coding skills (like 
    uniappx-project-creator
    ).

Output Handling

generate_screen_from_text
returns session info (e.g., 
sessionId
and 
outputComponents
). It may not return a screenshot directly.

After the generation completes, retrieve the resulting screen(s) via:

  1. list_screens
    with 
    projectId
    in the format 
    projects/{id}
    .
  2. get_screen
    with the selected 
    screenId
    to fetch screenshot / html assets.

Keywords

English keywords: generate screen, design ui, create interface, make page, draw wireframe, text to ui, ui generation, stitch gen, mobile design, desktop design, dashboard, login, prompt engineering

Chinese keywords (中文关键词): 生成页面, 设计UI, 创建界面, 画图, 制作网页, 文本生成UI, 界面设计, 移动端设计, 桌面端设计, 仪表盘, 登录页, 线框图, 生成代码

References