# Stitch MCP Generate Screen From Text

> Generates high-fidelity UI screens or wireframes from text descriptions. The core Text-to-UI engine.

- Skill: `full-stack-skills/stitch-mcp-generate-screen-from-text` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add full-stack-skills/stitch-mcp-generate-screen-from-text`
- Raw SKILL.md: https://api.skillmd.com/api/skills/full-stack-skills/stitch-mcp-generate-screen-from-text/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- License: Complete terms in LICENSE.txt
- Author: full-stack-skills (https://skillmd.com/u/full-stack-skills)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/full-stack-skills/stitch-mcp-generate-screen-from-text

---



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

- [Examples](examples/usage.md)
- [Desktop Dashboard Example](examples/desktop_dashboard.md)
- [Mobile App Example](examples/mobile_app.md)
- [Wireframe Example](examples/wireframe.md)

## 能力边界

### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时

### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估

### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景

## 常见陷阱 (Gotchas)

1. **版本兼容性**：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
2. **配置文件格式**：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
3. **环境变量**：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
4. **依赖冲突**：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
5. **性能陷阱**：大数据量场景下注意性能优化，避免 N+1 查询等常见问题