ui-to-vue

Name: ui-to-vue
Availability: InStock
Author: azusagasaku

Convert UI design screenshots into Vue 3 Composition API components with TypeScript.

Updated May 19, 2026

Search Tags:#component generation #Vue 3 #ui conversion #screenshot to code #vant #element plus #frontend scaffolding

Ready to run

npx skills add https://github.com/azusagasaku/--claude-config --skill ui-to-vue-azusagasaku

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-to-vue
Source: https://github.com/azusagasaku/--claude-config/tree/main/skills/ecc/ui-to-vue
Command: npx skills add https://github.com/azusagasaku/--claude-config --skill ui-to-vue-azusagasaku

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ui-to-vue-converter.

What problem does it solve? Manually translating design screenshots into Vue 3 page components, shared components, and router wiring is slow and repetitive, especially when a project contains many pages and states. This Skill batch-converts organized screenshot directories into a first pass of Vue 3 Composition API code using your chosen component library. ## Core Features & Use Cases - Batch Screenshot Conversion: Groups screenshots by module and page state (list, detail, form, loading, empty) and generates corresponding page components. - UI Library Mapping: Maps visual elements to Vant, Element Plus, or Ant Design Vue components based on the selected `--ui` option. - Shared Component Extraction: Detects repeated UI regions and extracts them into reusable components, with cut-image assets resolved by page, module, then global priority. - Use Case: You receive a folder of mobile app design exports for a Vant-based project. Run the converter to scaffold all page components, shared components, and router wiring under `src/`, then review and refine the output. ## Quick Start Ask the AI to convert the screenshots in ./screenshots into Vue 3 components using Vant by running npx [email protected] with your DASHSCOPE_API_KEY set.

Frequently Asked Questions about ui-to-vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert UI screenshots to Vue 3 components?▼

Organize screenshots by module and page state in an input directory, set the DASHSCOPE_API_KEY environment variable, then run npx [email protected] with --input, --ui, and --output options to generate Vue 3 Composition API components.

Which UI libraries does ui-to-vue-converter support?▼

The converter supports Vant, Element Plus, and Ant Design Vue, selected via the --ui option with values vant, element-plus, or antd-vue. Vant is the default when no library is specified.

How should I organize screenshots for batch conversion?▼

Group screenshots by module and page state, such as HomePage/List, and place cut images in directories named assets, icons, sprites, cut, images, or cut-images. Related states like list, detail, form, loading, and empty are combined into one page component.

Why does ui-to-vue return a 401 authentication error?▼

A 401 error means the DashScope credential is missing or invalid. Confirm DASHSCOPE_API_KEY is exported in the shell running the command, or provide the key through a .ui-to-vue.config.json file kept out of version control.

When should I not use screenshot-to-Vue conversion?▼

Avoid it for single bespoke screenshots, non-Vue projects, designs needing detailed interaction logic or accessibility review, and screenshots containing private customer data that cannot be sent to an external model API.