ui-to-vue
Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.
- Kind
- Skill
- Works with
- Claude Code, Codex
- Languages
- TypeScript / JavaScript
- Source
- affaan-m/ECC @ d3b8a3e90890
- Path
- skills/ui-to-vue/SKILL.md
- License
- MIT
- Jobs
- UI/UX work
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# UI To Vue Batch-convert UI design screenshots into Vue 3 Composition API component code. ## When to Use - The user provides a directory of design screenshots or design-export images. - The target application is Vue 3. - The user wants a first pass of page components, shared components, and router wiring. - The user specifies Vant, Element Plus, or Ant Design Vue as the component library. ## When Not to Use - The user has only one screenshot and wants a bespoke component. - The target project is not Vue. - The design requires detailed interaction logic, data flow, or accessibility review. - The screenshots contain private customer data that cannot be sent to an external model API. ## Inputs Use an input directory that groups screenshots by module and page state: ```text screenshots/ |-- HomePage/ | |-- List/ | | |-- HomePage-List-Default@3x.png | | `-- cut-images/ | |-- cut-images/ | `-- HomePage-Default@3x.png `-- cut-images/ ``` Supported cut-image directory names include `assets`, `icons`, `sprites`, `cut`, `images`, and `cut-images`. ## Conversion Model …