UI to Vue
Batch-convert UI design screenshots into Vue 3 Composition API components, mapped to Vant, Element Plus or Ant Design Vue, with shared-component extraction and router wiring.
- What
- Batch-convert UI design screenshots into Vue 3 Composition API components, mapped to Vant, Element Plus or Ant Design Vue, with shared-component extraction and router wiring.
- Cost
- Free
- Needs
- Use "UI to Vue" with your Muse.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor: batch-convert UI design screenshots into Vue 3 Composition API component code, from a community contributor, listed here with credit to its creator. Feed it a directory of design screenshots grouped by module and page state, with cut-image directories (assets, icons, sprites, cut, images, cut-images); it combines related screenshots into page components for list, detail, form, loading and empty states, maps native visual elements to Vant, Element Plus or Ant Design Vue components where practical, prefers page-level assets then module-level then global shared assets, and extracts repeated UI regions into shared components when they appear more than once, plus router wiring for the first pass. Includes CLI usage. Explicitly not for: a single screenshot needing a bespoke component, non-Vue targets, designs requiring detailed interaction logic or data flow, accessibility review, or screenshots containing private customer data that cannot be sent to an external model API. From the affaan-m/ECC repository (MIT). Honest caveats: community skill; this is a first pass, review and refine the generated components before shipping, and keep private data out of the screenshots. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseThe install prompt below already includes the vetting steps: your agent follows the community checklist before installing anything with executable code. Want more?
Use "UI to Vue" with your Muse. Prerequisites: a directory of UI screenshots grouped by module/page state (with cut-image folders). Never include private customer data in screenshots sent to an external model API. 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/ui-to-vue/SKILL.md and copy the full SKILL.md text. 2. Paste it into a chat with Muse and add: "Convert [screenshots/] to Vue 3 components with [Vant/Element Plus/Ant Design Vue]." 3. Review the generated page components, shared components and router wiring with Muse before shipping. Tip: name screenshot folders by module and state (HomePage/List, HomePage/Detail); good input grouping is half the output quality. Safety: a skill is plain-text instructions; it runs nothing by itself. Generated code is a first pass; review interaction logic and accessibility yourself.
Saved to your recent installs. Find it anytime on /connect.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.