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領域を共有コンポーネントとして抽出します。
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