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": "<extracted projectId>", "screenId": "<extracted 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

国内适配

• 支持中文文档和中文注释
• 示例代码兼容国内开发环境
• 提供中文 FAQ 和常见问题解答

能力边界

✅ 适用场景

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

⚠️ 需要注意

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

❌ 不适用场景

• 不相关的技术栈或框架
• 需要完全自定义的特殊场景

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。