メニュー
Use only when converting UI mockups, screenshots, or designs into Vue components — composition API, script setup, reactive state, and Tailwind/component libraries.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/TudeOrangBiasa/opencode-workflow --skill ui-to-vueコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | ui-to-vue |
| description | Use only when converting UI mockups, screenshots, or designs into Vue components — composition API, script setup, reactive state, and Tailwind/component libraries. |
Adapted from ECC's ui-to-vue skill (MIT).
Batch-convert UI design screenshots into Vue 3 Composition API component code.
Vue 3 project with design screenshots → first pass of page components + router wiring.
Single screenshot for bespoke component | Non-Vue project | Complex interaction logic | Private customer data.
Group screenshots by module and page state. See REFERENCE.md for directory structure.
See REFERENCE.md for details on page grouping, UI library mapping, cut-image priority, and component extraction.
Run the converter with npx so the documented command works without relying on a global binary:
export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src
For desktop UI libraries:
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
If the package is installed globally, the ui-to-vue binary can be used directly:
npm install -g ui-to-vue-converter@1.0.2
ui-to-vue --input ./screenshots --ui vant --output ./src
| Option | Description | Default |
|---|---|---|
--input | Design image directory | ./screenshots |
--ui | UI library: vant, element-plus, or antd-vue | vant |
--output | Output directory | ./src |
--config | Config file path | ./.ui-to-vue.config.json |
Use export DASHSCOPE_API_KEY=your_key. Keep config files out of version control.
Treat screenshots as external. Pin converter version. Review generated code before committing.
views/, repeated regions extractedSee REFERENCE.md for troubleshooting table.
npm: ui-to-vue-converter