From ui-to-vue
Use when user has UI screenshots/design images (LanHu/Figma/etc) needing batch conversion to Vue 3 components, mentions "design to code", or needs rapid UI-to-code workflow with Vant/Element Plus/AntD Vue
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui-to-vue:ui-to-vueThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Batch convert UI design screenshots to Vue 3 Composition API component code.
Batch convert UI design screenshots to Vue 3 Composition API component code.
When NOT to use:
| Concept | Description |
|---|---|
| Page Grouping | Auto-detect different states of same page (list/detail/form/empty) |
| UI Library Mapping | Map native elements to Vant/Element Plus/AntD Vue components |
| Three-level Cut Images | Page-level > Module-level > Global-level priority |
| Component Extraction | Public elements appearing 2+ times auto-extracted as components |
screenshots/
├── HomePage/ # Module name
│ ├── List/ # Page type (optional secondary directory)
│ │ ├── [email protected]
│ │ └── cut-images/ # Page-level cut images (highest priority)
│ ├── cut-images/ # Module-level cut images
│ └── [email protected] # Primary directory structure (compatible)
├── cut-images/ # Global cut images (shared across modules)
Supported cut-image directory names: 切图, assets, icons, sprites, cut, images, cut-images
| Prefix | Type | Example |
|---|---|---|
icon- | Icon | icon-back.png |
btn- | Button | btn-primary.png |
logo | Logo | logo.png |
tab- | Tab | tab-active.png |
badge- | Badge | badge-new.png |
tag- | Tag | tag-urgent.png |
arrow- | Arrow | arrow-left.png |
bg- | Background | bg-header.png |
| UI Library | Use Case | Design Width | Style Unit |
|---|---|---|---|
vant | Mobile H5/App | 375px | px → rem (rootValue: 37.5) |
element-plus | PC Admin Dashboard | 1920px | px |
antd-vue | PC Enterprise App | 1920px | px |
Note: Export design images at corresponding width baseline, otherwise size conversion may be inaccurate.
# Install
npm install ui-to-vue-converter
# Configure API key (Qwen VL - Alibaba DashScope)
export DASHSCOPE_API_KEY=your_key
# Or create .ui-to-vue.config.json
# Run
ui-to-vue --input ./screenshots --ui vant --output ./src
# PC project
ui-to-vue --input ./designs --ui element-plus --output ./src
| Parameter | Description | Default |
|---|---|---|
--input | Design image directory | ./screenshots |
--ui | UI library: vant/element-plus/antd-vue | vant |
--output | Output directory | ./src |
--config | Config file path | ./.ui-to-vue.config.json |
output/
├── views/ # Page components
├── components/ # Public/shared components
└── router/ # Router configuration
└── index.js
Priority: --config > .ui-to-vue.config.json > DASHSCOPE_API_KEY environment variable
// .ui-to-vue.config.json
{
"apiKey": "your_dashscope_key",
"input": "./designs",
"ui": "vant",
"output": "./src"
}
⚠️ Security Warning: Add .ui-to-vue.config.json to .gitignore to prevent accidental API key exposure in version control.
# .gitignore
.ui-to-vue.config.json
| Issue | Solution |
|---|---|
| API error 401 | Check if DASHSCOPE_API_KEY is correctly configured |
| Cut images not recognized | Ensure directory name is in supported list |
| Generated components not using UI library | Check --ui parameter is correct |
| Image compression failed | Install sharp: npm install sharp |
Verify after use:
views/components/router/index.jsCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub ericleen1/ui2vueconverter --plugin ui-to-vue