What problem does it solve? Turning high-fidelity design mockups into Vue2 page code is slow and error-prone when done manually. This Skill converts uploaded design screenshots into pixel-accurate Vue2 templates and SCSS styles, while strictly excluding any business logic, event handlers, or dynamic data binding. ## Core Features & Use Cases - Design Analysis Mode: Analyzes uploaded mockups, identifies reusable components from the component library, matches icons against the Iconfont catalog, and requires explicit user confirmation before writing any code. - Pixel-Accurate Implementation: Generates Vue2 (Options API) templates with Vant components, SCSS styles, Flexbox layouts, and BEM naming, plus automatic route registration in the router file. - Zero-Logic Guarantee: All output is a pure static UI skeleton with hardcoded text and static constants only, making it safe to hand off to developers who add logic later. - Use Case: Upload a screenshot of a settings page design, review the analysis report confirming reusable components and icons, reply "开始开发", and receive a complete static Vue2 page with styles and routing configured. ## Quick Start Upload a design mockup and ask the assistant to analyze and recreate the page as a static Vue2 UI.
