page-canvas-vision

What problem does it solve? Turning a UI screenshot into a structured, design-system-compliant page plan normally requires manual pixel measurement and component guessing. This Skill reads the actual image pixels and produces a PageCanvasPlan plus Yueban layers manifest that the TopTop UI prototype portal can apply directly. ## Core Features & Use Cases - Vision-based component mapping: Inspects the uploaded screenshot and maps visible regions to whitelisted components from the portal's CANVAS_COMPONENT_CATALOG. - Coordinate-accurate output: Measures source_bbox in the original image coordinate system and computes scaled_bbox using scale = 750 / sourceImage.width. - Contract-safe fallback: Lists unmappable UI regions in plan.warnings instead of inventing components outside the catalog. - Use Case: A designer pastes the portal's "Cursor 视觉分析" instruction with a screenshot; the Skill returns a JSON object that the user pastes back into the Portal /canvas page via "应用 Agent 分析结果" to reconstruct the page. ## Quick Start Paste the Portal's Cursor vision analysis instruction together with your UI screenshot and ask the agent to output the PageCanvasPlan JSON for the canvas.