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