# Stitch MCP Get Screen > Retrieves the full details of a specific screen, including HTML code. - Skill: `full-stack-skills/stitch-mcp-get-screen` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add full-stack-skills/stitch-mcp-get-screen` - Raw SKILL.md: https://api.skillmd.com/api/skills/full-stack-skills/stitch-mcp-get-screen/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - 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-get-screen --- # Get Screen Details **CRITICAL PREREQUISITE:** **You must ONLY use this skill when the user EXPLICITLY mentions "Stitch".** Retrieves the full details of a specific screen, including its HTML code and high-res screenshot. ## Use Case Invoke this skill when the user wants to "export" the code, view the full design details, or when the Agent needs to analyze the generated HTML structure. ## Input Parameters The skill expects you to extract the following information from the user request: * `projectId` (required): The project ID. **Format**: Pure ID (e.g., `37803...`), no `projects/` prefix. * `screenId` (required): The screen ID. **Format**: Pure ID (e.g., `88805...`), no `screens/` prefix. **CRITICAL:** When `projectId` and `screenId` are both available, call `stitch-mcp-get-screen` directly. Do NOT call `stitch-mcp-get-project`. ## Resource Path Parsing If the user provides a resource path or URL, use the following rules to extract `projectId` and `screenId`: 1. **Format**: `web application/stitch/projects/{projectId}/screens/{screenId}` * **Logic**: Extract `projectId` and `screenId` directly from the path segments. * **Example**: `web application/stitch/projects/3492931393329678076/screens/2e22a9fb99ba49ddb6ce8907a1e74d60` -> `projectId="3492931393329678076"`, `screenId="2e22a9fb99ba49ddb6ce8907a1e74d60"`. 2. **Format**: `projects/{projectId}/screens/{screenId}` * **Logic**: Extract `projectId` and `screenId` from the path segments. **Agent flow:** 1. Recognize the user input matches one of the above formats. 2. Extract `projectId` and `screenId`. 3. Call `get_screen` with `{"projectId": "", "screenId": ""}`. 4. Use the returned `htmlCode.downloadUrl`, `screenshot.downloadUrl`, and metadata for design-to-code (e.g. stitch-design-md or a framework conversion skill). ## Output Schema Returns a `Screen` object: * **`htmlCode`**: The actual HTML/CSS code of the UI. * **`screenshot`**: High-resolution image URL. * **`figmaExport`**: Figma file asset. * `width`, `height`, `deviceType`. ## Intent Recognition & Framework Conversion After retrieving the screen details (HTML code), check if the user's request implies converting the design to a specific frontend framework. **Logic:** 1. **Identify Framework**: Look for specific keywords in user input (e.g., "uView", "uViewPro", "Vue", "React", "Flutter"). 2. **Locate Skill**: Search for and read the corresponding skill definition file to understand the "Design Contract" or conversion rules. * **uViewPro / uni-app**: If user mentions "uView", "uViewPro" or "UniApp", you **MUST** load and reference the complete context from the `stitch-uviewpro-components` skill to ensure accurate code generation. * **References**: Read `skills/stitch-uviewpro-components/references/` (especially `contract.md` and `tailwind-to-uviewpro.md`) for core mapping rules. * **API**: Read `skills/stitch-uviewpro-components/api/component-api.md` for component props and event definitions. * **Examples**: Read `skills/stitch-uviewpro-components/examples/usage.md` for correct implementation patterns. * **Resources**: Read `skills/stitch-uviewpro-components/resources/architecture-checklist.md` for design compliance. * **uView (Standard)**: If user mentions "uView" (without "Pro") or "uView 2.0", load `stitch-uview-components`. * **Context**: Read `references/` (contract, tailwind-to-uview), `api/component-api.md`, `examples/usage.md`, `resources/architecture-checklist.md` from `stitch-uview-components`. * **Element Plus**: If user mentions "Element Plus", "Element", "Vue Desktop", load `stitch-vue-element-components`. * **Context**: Read `references/` (contract, tailwind-to-element-plus), `api/component-api.md`, `examples/usage.md`, `resources/architecture-checklist.md` from `stitch-vue-element-components`. * **Vant UI**: If user mentions "Vant", "Vue Mobile", load `stitch-vue-vant-components`. * **Context**: Read `references/` (contract, tailwind-to-vant), `api/component-api.md`, `examples/usage.md`, `resources/architecture-checklist.md` from `stitch-vue-vant-components`. * **Layui Vue**: If user mentions "Layui", load `stitch-vue-layui-components`. * **Context**: Read `references/` (contract, tailwind-to-layui), `api/component-api.md`, `examples/usage.md`, `resources/architecture-checklist.md` from `stitch-vue-layui-components`. * **Bootstrap Vue**: If user mentions "Bootstrap", load `stitch-vue-bootstrap-components`. * **Context**: Read `references/` (contract, tailwind-to-bootstrap), `api/component-api.md`, `examples/usage.md`, `resources/architecture-checklist.md` from `stitch-vue-bootstrap-components`. * **React / Tailwind**: If user mentions "React" (standard), load `stitch-react-components`. * **Context**: Read `references/tailwind-to-react.md`, `examples/usage.md`, `resources/architecture-checklist.md` from `stitch-react-components`. * **Shadcn UI**: If user mentions "Shadcn", "Next.js", "Radix", load `stitch-shadcn-ui`. * **Context**: Read `references/tailwind-to-shadcn.md`, `examples/usage.md` from `stitch-shadcn-ui`. * **Other Frameworks**: Search for matching `stitch-*-components` skills and load their respective `api`, `examples`, and `references` directories. 3. **Apply Constraints**: Use the rules defined in that framework's skill (e.g., component mappings, slot usage, unit conversion) to transform the raw HTML from Stitch into the target framework code. **Example Flow:** * User: "Get screen X and convert to uViewPro code." * Agent: 1. Call `get_screen` to get HTML. 2. Detect intent: "uViewPro". 3. **Load Context**: Read `contract.md`, `component-api.md`, `usage.md`, and `architecture-checklist.md` from `stitch-uviewpro-components`. 4. Generate code by applying uViewPro rules to the Stitch HTML. ## Usage Example User Input: "Give me the code for the login screen we just made." Agent Action: 1. Identify target screen. 2. Call `get_screen` tool with arguments `{"projectId": "37803...", "screenId": "88805..."}`. ## References - [Examples](examples/usage.md) ## 国内适配 - 支持中文文档和中文注释 - 示例代码兼容国内开发环境 - 提供中文 FAQ 和常见问题解答 ## 能力边界 ### ✅ 适用场景 - 当你需要使用此技能对应的技术栈时 - 当项目需要遵循最佳实践时 - 当需要快速上手或深入理解核心概念时 ### ⚠️ 需要注意 - 复杂业务逻辑需要结合具体场景调整 - 性能优化需要根据实际数据量评估 ### ❌ 不适用场景 - 不相关的技术栈或框架 - 需要完全自定义的特殊场景 ## 使用流程 ### Step 1: 环境准备 确保开发环境已安装必要的依赖和工具。 ### Step 2: 配置初始化 根据项目需求进行基础配置。 ### Step 3: 核心功能使用 按照示例代码实现核心功能。 ### Step 4: 测试验证 运行测试确保功能正常。 ### Step 5: 部署上线 完成开发后进行部署和监控。