ui-to-vue

name ui-to-vue description UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。 origin community 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