What problem does it solve? Turning a UI screenshot into working framework code usually requires manually interpreting the design and guessing which components to use. This Skill reads the actual image, decomposes it into a structured component tree, and generates a Glyvio screen that faithfully matches the original pixels. ## Core Features & Use Cases - Vision-driven decomposition: Reads the screenshot directly and breaks it down top-down into page type, app bar, layout regions, repeated cells, and atomic widgets. - Catalog-grounded mapping: Maps every visual element to a concrete glyvio_core design class verified against @types, preferring the most specific component available. - Spec-gated code generation: Produces an approved visual spec (JSON component tree plus analysis summary) before delegating code generation to the matching create-* page skill. - Use Case: A designer sends a PNG of an orders list screen. The Skill identifies it as a list page, maps each card element to catalog components, gets the spec approved, then generates the screen with correct routes, menu registration, and view permissions. ## Quick Start Provide a screenshot file path, target entity, plugin namespace, route path, and menu group, then ask the agent to recreate the screen from the image using Glyvio components.
