UI To Vue は何をしますか？
UIデザインのスクリーンショットをVue 3 Composition APIのコンポーネントコードに一括変換します。
使用するタイミング
- ユーザーがデザインのスクリーンショットやデザインエクスポート画像のディレクトリを提供する場合。
- 対象アプリケーションがVue 3である場合。
- ページコンポーネント、共有コンポーネント、ルーター配線の初回パスを希望する場合。
- ユーザーがVant、Element Plus、Ant Design Vueのいずれかをコンポーネントライブラリとして指定している場合。
使用しないタイミング
- ユーザーがスクリーンショットを1枚だけ持っており、特注のコンポーネントを希望する場合。
- 対象プロジェクトがVueでない場合。
- デザインに詳細なインタラクションロジック、データフロー、アクセシビリティレビューが必要な場合。
- スクリーンショットに外部モデルAPIに送信できない顧客データが含まれている場合。
入力
スクリーンショットをモジュールとページ状態ごとにグループ化した入力ディレクトリを使用します。
screenshots/
|-- HomePage/
| |-- List/
| | |-- [email protected]
| | `-- cut-images/
| |-- cut-images/
| `-- [email protected]
`-- cut-images/
サポートされているカット画像ディレクトリ名は、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 [email protected] --input ./screenshots --ui vant --output ./src
デスクトップUIライブラリの場合：
npx [email protected] --input ./designs --ui element-plus --output ./src
npx [email protected] --input ./designs --ui antd-vue --output ./src
パッケージがグローバルにインストールされている場合は、ui-to-vueバイナリを直接使用できます。
npm install -g [email protected]
ui-to-vue --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キーの取り扱い
コンバーターは、設定ファイルまたは環境変数からDashScopeの認証情報を読み取ることができます。リポジトリでは環境変数を推奨します。
export DASHSCOPE_API_KEY=your_key
ローカル設定ファイルが必要な場合は、バージョン管理から除外してください。
{
"apiKey": "your_dashscope_key",
"input": "./designs",
"ui": "vant",
"output": "./src"
}
.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 [email protected]形式を使用するか、パッケージをグローバルにインストールしてください。 |
| カット画像が無視される | アセットディレクトリ名がサポートされており、対応するページまたはモジュールの下にネストされていることを確認してください。 |
| コンポーネントが要求されたUIライブラリを無視する | 明示的な--ui値を指定して再実行し、生成されたインポートを確認してください。 |
| 生成されたレイアウトの寸法が正しくない | スクリーンショットのエクスポート幅がターゲットライブラリのベースラインと一致していることを確認してください。 |
参考情報
- npmパッケージ：
ui-to-vue-converter