ui-to-vue

npx skills add mturac/everything-openai-codex --skill ui-to-vue --agent codex

Same command for any agent — swap --agent for claude-code, cursor, copilot.

# UI To Vue Batch-convert UI design screenshots into Vue 3 Composition API component code. ## When to Use - The user provides a directory of design screenshots or design-export images. - The target application is Vue 3. - The user wants a first pass of page components, shared components, and router wiring. - The user specifies Vant, Element Plus, or Ant Design Vue as the component library. ## When Not to Use - The user has only one screenshot and wants a bespoke component. - The target project is not Vue. - The design requires detailed interaction logic, data flow, or accessibility review. - The screenshots contain private customer data that cannot be sent to an external model API. ## Inputs Use an input directory that groups screenshots by module and page state: ```text screenshots/ |-- HomePage/ | |-- List/ | | |-- HomePage-List-Default@3x.png | | `-- cut-images/ | |-- cut-images/ | `-- HomePage-Default@3x.png `-- cut-images/ ``` Supported cut-image directory names include `assets`, `icons`, `sprites`, `cut`, `images`, and `cut-images`. ## Conversion Model - Page grouping: combine related screenshots into one page component when they represent list, detail, form, loading, or empt

export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src
npx ui-to-vue-converter@1.0.2 --input ./designs --ui element-plus --output ./src
npx ui-to-vue-converter@1.0.2 --input ./designs --ui antd-vue --output ./src
npm install -g ui-to-vue-converter@1.0.2
ui-to-vue --input ./screenshots --ui vant --output ./src