skills.rest
azusagasaku
azusagasakuCOMMUNITY
Explore all skills by this author →
GitHub

ui-to-vue

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
One-click install
npx skills add https://github.com/azusagasaku/--claude-config --skill ui-to-vue-azusagasaku
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
dus2183-commitsdus2183-commits

flutter-design-to-code

Convert Figma/Zeplin design specs into Flutter UI code with asset downloads.

Community
Advanced
imrim12imrim12

pinia

Manage Vue application state with Pinia stores, getters, and actions.

Community
Intermediate
bacchus-labsbacchus-labs
4

visual-regression-testing

Automate visual regression testing by comparing screenshots against baselines.

Official
Advanced
phoenicisfphoenicisf

figma-generate-design

Build or update full-page Figma screens using published design system components and tokens.

Community
Advanced