Ui To Vue
- 1.4k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of ui-to-vue by affaan-m - installs and ranking accrue to the original listing.
ui-to-vue is a Claude Code skill that batch-converts UI design screenshots into Vue 3 Composition API components for developers who target Vant, Element Plus, or Ant Design Vue in Vue 3 applications.
About
ui-to-vue is a community ECC skill that transforms directories of UI design screenshots and design exports into ready-to-use Vue 3 Composition API component code. Input is organized by module and page state, with supported asset folder names such as assets and icons for sliced images. The skill supports three component libraries: Vant for mobile-oriented UIs, Element Plus, and Ant Design Vue. Developers use ui-to-vue when migrating a design folder into initial page components, shared components, and starter router wiring for a Vue 3 codebase. It is built for batch conversion across many screens, not single-screenshot one-off components. The skill explicitly avoids projects that need deep interaction logic, data-flow design, accessibility review, or screenshots containing private customer data sent to external model APIs.
- Batch converts directories of screenshots into Vue 3 components
- Groups related states (list, detail, form, loading, empty) into single page components
- Automatically wires router and shared component references
- Supports Vant, Element Plus, and Ant Design Vue component libraries
- Respects structured screenshot folder conventions including cut-images directories
Ui To Vue by the numbers
- 1,406 all-time installs (skills.sh)
- +85 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/affaan-m/ecc --skill ui-to-vueAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.4k |
|---|---|
| repo stars | ★ 238k |
| Last updated | August 5, 2026 |
| Repository | affaan-m/ecc ↗ |
How do you convert UI screenshots to Vue components?
Batch convert UI design screenshots into ready-to-use Vue 3 Composition API components with Vant, Element Plus or Ant Design Vue.
Who is it for?
Frontend developers scaffolding a Vue 3 app from a multi-screen design export folder with a chosen UI library.
Skip if: Non-Vue frameworks, single-screenshot requests, or designs requiring full interaction logic, a11y review, or private data in screenshots.
When should I use this skill?
User provides a directory of UI screenshots or design exports for a Vue 3 app and names Vant, Element Plus, or Ant Design Vue.
What you get
Vue 3 Composition API page and shared components with initial router wiring from design screenshot batches.
- Vue component files
- Shared component modules
- Initial router wiring
By the numbers
- Supports 3 Vue UI libraries: Vant, Element Plus, and Ant Design Vue
Files
UI To Vue
UIデザインのスクリーンショットをVue 3 Composition APIコンポーネントコードに一括変換します。
使用するタイミング
- ユーザーがデザインスクリーンショットまたはデザインエクスポート画像のディレクトリを提供するとき。
- ターゲットアプリケーションがVue 3のとき。
- ユーザーがページコンポーネント、共有コンポーネント、ルーター配線の最初の変換を希望するとき。
- ユーザーがVant、Element Plus、またはAnt Design Vueをコンポーネントライブラリとして指定するとき。
使用しないタイミング
- ユーザーがスクリーンショット1枚のみで、特定のコンポーネントを希望するとき。
- ターゲットプロジェクトがVueでないとき。
- デザインが詳細なインタラクションロジック、データフロー、またはアクセシビリティレビューを必要とするとき。
- スクリーンショットに外部モデルAPIに送信できないプライベートな顧客データが含まれるとき。
入力
モジュールとページ状態でスクリーンショットをグループ化したディレクトリを入力として使用します。
サポートされている切り出し画像ディレクトリ名：assets、icons、sprites、cut、images、cut-images。
変換モデル
- ページグループ化：リスト、詳細、フォーム、ローディング、または空の状態を表す関連スクリーンショットを1つのページコンポーネントにまとめる。
- UIライブラリマッピング：可能な限りネイティブのビジュアル要素をVant、Element Plus、またはAnt Design Vueコンポーネントにマッピングする。
- 切り出し画像の優先順位：ページレベルのアセットを優先し、次にモジュールレベル、最後にグローバル共有アセット。
- コンポーネント抽出：繰り返し使われるUIリージョンが2回以上現れる場合は共有コンポーネントに抽出する。
CLI使用方法
グローバルバイナリに依存せず、ドキュメントに記載されたコマンドが機能するように npx でコンバーターを実行します：
export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./srcオプション
| オプション | 説明 | デフォルト |
|---|---|---|
--input | デザイン画像ディレクトリ | ./screenshots |
--ui | UIライブラリ：vant、element-plus、または antd-vue | vant |
--output | 出力ディレクトリ | ./src |
--config | 設定ファイルのパス | ./.ui-to-vue.config.json |
セキュリティとプライバシー
- デザインスクリーンショットを外部モデルAPIに送信される可能性があるソース素材として扱う。
- 許可なくプライベートな顧客デザインでこのフローを実行しないこと。
- 再現可能なワークフローでは
@latestの代わりにコンバーターのバージョンを固定すること。 - コミット前に生成されたVueコードをレビューすること。
.ui-to-vue.config.json、APIキー、生成されたシークレット、または顧客スクリーンショットをコミットしないこと。
出力レビューチェックリスト
- [ ] ページコンポーネントが
views/または選択した出力ディレクトリの下に生成された。 - [ ] 繰り返しのUIリージョンが再利用が明確な場合のみ
components/に抽出された。 - [ ] ルーター出力がターゲットプロジェクトのルータースタイルと互換性がある。
- [ ] 生成されたコンポーネントが要求したUIライブラリを一貫して使用している。
- [ ] 生成されたCSSのユニットがデザインのベースラインと一致している。
- [ ] コードがプロジェクトのフォーマッター、リンター、型チェッカー、ビルドをパスする。
- [ ] プレースホルダーのコピー、モックデータ、生成されたアセットをコミット前にレビューした。
トラブルシューティング
| 問題 | 確認事項 |
|---|---|
401 または認証エラー | コマンドを実行するシェルで DASHSCOPE_API_KEY が設定されていることを確認する。 |
command not found: ui-to-vue | npx ui-to-vue-converter@1.0.2 の形式を使用するか、パッケージをグローバルインストールする。 |
| 切り出し画像が無視される | アセットディレクトリ名がサポートされており、対応するページまたはモジュールの下にネストされていることを確認する。 |
| コンポーネントが要求されたUIライブラリを無視する | 明示的な --ui 値で再実行して、生成されたインポートを確認する。 |
| 生成されたレイアウトの寸法がおかしい | スクリーンショットのエクスポート幅がターゲットライブラリのベースラインと一致していることを確認する。 |
リファレンス
- npmパッケージ：
ui-to-vue-converter
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kFAQ
Which Vue UI libraries does ui-to-vue support?
ui-to-vue supports Vant, Element Plus, and Ant Design Vue when generating Vue 3 Composition API components. The developer specifies the target library before batch conversion begins.
What input format does ui-to-vue expect?
ui-to-vue expects a directory of UI screenshots grouped by module and page state. Supported sliced-image folder names include assets and icons for design export assets.