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