---
name: ui-to-vue
description: Turn folders of UI screenshots or design exports into Vue 3 components. Supports Vant, Element Plus, and Ant Design Vue.
origin: community
---

# UI to Vue

> **Credit: This skill comes from the open-source community. Keep the original author credit and license when you share or change it.**

Turn a set of UI screenshots into Vue 3 Composition API code.

## Use This Skill When

- The user gives you a folder of UI screenshots.
- The target app uses Vue 3.
- The user wants a first draft of pages, shared parts, and routes.
- The user wants Vant, Element Plus, or Ant Design Vue.
- The screenshots show more than one page or page state.

## Do Not Use This Skill When

- The user has only one image and wants one small component.
- The target app does not use Vue 3.
- The work needs full app logic or real data flow.
- The work needs a full access review.
- The images have private data that must not leave the device.
- The user has not approved sending the images to the tool's model service.

For one image, build the Vue component by hand. For complex app logic, use this skill only for the first UI draft.

## Input

Use one folder that groups images by module, page, and state.

Clear file names help. Name states such as:

- `list.png`
- `details.png`
- `form.png`
- `loading.png`
- `empty.png`
- `error.png`
- `mobile.png`
- `desktop.png`

The tool can find image folders named:

- `assets`
- `icons`
- `sprites`
- `cut`
- `images`
- `cut-images`

Keep each image folder under the page or module that uses it. Put shared images in a top-level shared folder.

Example input:

```text
screenshots/
├── account/
│   ├── list.png
│   ├── empty.png
│   └── assets/
│       └── avatar.png
├── orders/
│   ├── details.png
│   └── loading.png
└── images/
    └── logo.png
```

## Before You Run It

1. Check that the app uses Vue 3.
2. Check which UI library the app uses.
3. Check the current folder layout and route style.
4. Check the app's CSS units, such as `px`, `rem`, or `vw`.
5. Remove keys, names, email addresses, account data, and other private data from the images.
6. Make a safe copy or use a new output folder if files may be replaced.
7. Confirm that the user allows the images to be sent to the tool's model service.

If the UI library is not clear, ask the user. Do not mix UI libraries unless the app already does so.

## How to Convert the UI

### Group Pages

Put linked states in one page group. Common states are:

- List
- Details
- Form
- Loading
- Empty
- Error
- Mobile
- Desktop

Do not merge screens that have different jobs.

### Map UI Parts

Use parts from the chosen UI library when they fit the design. Use plain Vue and CSS when the library has no close match.

Keep imports from one library:

- Vant: `vant`
- Element Plus: `element-plus`
- Ant Design Vue: `ant-design-vue`

Do not add a second UI library just to match one small part.

### Pick Images

Use images in this order:

1. Images inside the page folder
2. Images inside the module folder
3. Shared images at the top level

If two files have the same name, use the file closest to the page.

### Make Shared Components

Move a UI part into `components/` when:

- It appears at least two times.
- Both uses have the same job.
- Reuse makes the code easier to read.

Keep one-use parts inside the page. Do not split every small block into its own file.

### Handle Missing Details

Screenshots do not show all app rules. Use clear placeholders for unknown data and actions. Mark them with short `TODO` notes.

Do not guess:

- API paths
- User rules
- Form rules
- Route guards
- Save or delete actions
- Hidden states

## Run the Tool

Use `npx` so a global install is not needed. Use the fixed version shown below.

```bash
export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src
```

Do not put the real key in shell history, source files, logs, or this skill file.

## Options

| Option | Meaning | Default |
| --- | --- | --- |
| `--input` | Folder with design images | `./screenshots` |
| `--ui` | UI library: `vant`, `element-plus`, or `antd-vue` | `vant` |
| `--output` | Folder for the new code | `./src` |
| `--config` | Path to the config file | `./.ui-to-vue.config.json` |

## Concrete Example

The user has an Element Plus admin app. The images are in `./design/orders`. The new files should go into `./src/generated`.

Run:

```bash
export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 \
  --input ./design/orders \
  --ui element-plus \
  --output ./src/generated
```

Then:

1. Open the new Vue files.
2. Check that imports come from `element-plus`.
3. Move page files into the app's normal `views/` folder if needed.
4. Add routes in the same style as the current router.
5. Replace mock text and data.
6. Add real events and app logic.
7. Run the app's format, lint, type check, test, and build commands.

## Safety and Privacy

- Treat every screenshot as data that may be sent to an outside model service.
- Do not send private customer work without clear approval.
- Remove private text and account data before you run the tool.
- Use a fixed package version. Do not use `@latest` for repeat work.
- Review all new Vue code before you keep or commit it.
- Do not commit API keys, secrets, private screenshots, or generated secret values.
- Check `.ui-to-vue.config.json` before you commit it. It may hold private paths or settings.
- Do not run new code from the output until you review it.
- Do not replace hand-written files without checking the changes first.

## Review Checklist

- [ ] Page files are under `views/` or the chosen page folder.
- [ ] Shared parts are in `components/` only when reuse is clear.
- [ ] Routes match the app's current router style.
- [ ] Route names and paths do not clash with old routes.
- [ ] All UI imports use the chosen library.
- [ ] CSS units match the app.
- [ ] Mobile and desktop views work when both are shown.
- [ ] Loading, empty, and error states are kept when shown.
- [ ] Images use valid paths and have useful text labels when needed.
- [ ] Buttons, links, fields, and forms can be used with a keyboard.
- [ ] Form fields have clear labels.
- [ ] Mock text, mock data, and `TODO` notes were reviewed.
- [ ] No private data or keys were added.
- [ ] The formatter, linter, type check, tests, and build pass.

## Common Problems

| Problem | What to Check |
| --- | --- |
| `401` or sign-in error | Make sure `DASHSCOPE_API_KEY` is set in the same shell that runs the command. |
| `command not found: ui-to-vue` | Use `npx ui-to-vue-converter@1.0.2`. |
| Images are skipped | Check the folder name. Use a supported name and place it under the right page or module. |
| The wrong UI library is used | Set `--ui` to `vant`, `element-plus`, or `antd-vue`. Then check the new imports. |
| The layout size looks wrong | Check the image width, device size, page zoom, and CSS units. |
| Mobile and desktop files were mixed | Put them in clear state groups or use names such as `mobile.png` and `desktop.png`. |
| Old files were replaced | Stop and compare the changes with your safe copy or version control. |
| Routes do not work | Check the app's router version, path rules, lazy-load style, and route names. |
| Assets fail to load | Check file names, letter case, public paths, and Vue asset imports. |
| The code does not build | Check missing packages, wrong imports, bad file paths, and TypeScript errors. |
| The UI looks right but does nothing | Add real state, events, form rules, and API calls by hand. Screenshots do not define them. |

## Reference

- npm package: `ui-to-vue-converter`