Agent skill · software engineering · affaan-m
ui-to-vue
UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
Why this skill is useful
Adds an executable CLI tool that converts UI screenshots into Vue 3 components, providing a significant automation capability.
What it needs
Requires npm installed locally. Requires dashscope account access. About 1k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
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 でコンバーターを実行します： オプション オプション 説明 デフォルト --- --- --- --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 または認証エラー コマンドを実行するシェルで DASHSCOPEAPIKEY が設定されていることを確認する。 command not found: ui-to-vue npx ui-to-vue-converter@1.0.2 の形式を使用するか、パッケージをグローバルインストールする。 切り出し画像が無視される アセットディレクトリ名がサポートされており、対応するページまたはモジュールの下にネストされていることを確認する。 コンポーネントが要求されたUIライブラリを無視する 明示的な --ui 値で再実行して、生成されたインポートを確認する。 生成されたレイアウトの寸法がおかしい スクリーンショットのエクスポート幅がターゲットライブラリのベースラインと一致しているこ …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/ui-to-vue--72fa02