Best fit
- UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
affaan-m/ECC
ui-to-vue
UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
62CollectingRuns scripts
See how to use itView GitHub source
npx skills add https://github.com/affaan-m/ECC --skill "docs/ja-JP/skills/ui-to-vue"Automated source guide
Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Reorganized from the pinned upstream SKILL.md
Turn ui-to-vue's source instructions into a guide you can follow
According to the pinned SKILL.md from affaan-m/ECC: UIデザインのスクリーンショットをVue 3 Composition APIコンポーネントコードに一括変換します。
npx skills add https://github.com/affaan-m/ECC --skill "docs/ja-JP/skills/ui-to-vue"Bring this context
- A concrete task that matches the documented purpose of ui-to-vue.
- The files, examples, or context the task depends on.
- Your constraints, target environment, and definition of done.
Expected outputs
- A result that follows the pinned ui-to-vue instructions.
- A concise record of assumptions, inputs used, and unresolved questions.
- A final check against the source workflow and relevant permission signals.
Key source sections
Read ui-to-vue through these 5 source sections
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
使用するタイミング
ユーザーがデザインスクリーンショットまたはデザインエクスポート画像のディレクトリを提供するとき。
ユーザーがデザインスクリーンショットまたはデザインエクスポート画像のディレクトリを提供するとき。ターゲットアプリケーションがVue 3のとき。ユーザーがページコンポーネント、共有コンポーネント、ルーター配線の最初の変換を希望するとき。
使用しないタイミング
ユーザーがスクリーンショット1枚のみで、特定のコンポーネントを希望するとき。
ユーザーがスクリーンショット1枚のみで、特定のコンポーネントを希望するとき。ターゲットプロジェクトがVueでないとき。デザインが詳細なインタラクションロジック、データフロー、またはアクセシビリティレビューを必要とするとき。
入力
モジュールとページ状態でスクリーンショットをグループ化したディレクトリを入力として使用します。
モジュールとページ状態でスクリーンショットをグループ化したディレクトリを入力として使用します。サポートされている切り出し画像ディレクトリ名：assets、icons、sprites、cut、images、cut-images。
変換モデル
ページグループ化：リスト、詳細、フォーム、ローディング、または空の状態を表す関連スクリーンショットを1つのページコンポーネントにまとめる。
ページグループ化：リスト、詳細、フォーム、ローディング、または空の状態を表す関連スクリーンショットを1つのページコンポーネントにまとめる。UIライブラリマッピング：可能な限りネイティブのビジュアル要素をVant、Element Plus、またはAnt Design Vueコンポーネントにマッピングする。切り出し画像の優先順位：ページレベルのアセットを優先し、次にモジュールレベル、最後にグローバル共有アセット。
CLI使用方法
グローバルバイナリに依存せず、ドキュメントに記載されたコマンドが機能するように npx でコンバーターを実行します：
グローバルバイナリに依存せず、ドキュメントに記載されたコマンドが機能するように npx でコンバーターを実行します：
SkillSignal prompt templates
Provide the task, context, and acceptance criteria
These prompts were written by SkillSignal from the source structure; they are not upstream text.
Task-start prompt
Confirm source fit, inputs, and outputs before acting.
Use ui-to-vue to help me with: [specific task]. Context: [files, data, or background]. Constraints: [environment, scope, and prohibited actions]. Before acting, check the pinned SKILL.md and explain which sections apply, what inputs are still missing, and what you will deliver.
Source-guided execution
Make the Agent explicitly follow the key extracted sections.
Apply the pinned ui-to-vue source to [task]. Pay particular attention to these source sections: “使用するタイミング”, “使用しないタイミング”, “入力”, “変換モデル”, “CLI使用方法”. Preserve the important decision at each step. Mark facts not covered by the source as “needs confirmation” instead of inventing them. Then verify the result against my acceptance criteria: [criteria].
Result-review prompt
Check omissions, permissions, and source drift before delivery.
Review the current ui-to-vue result: (1) does it satisfy the original task; (2) were any applicable steps or limits in the pinned SKILL.md missed; (3) did it perform any unauthorized file, command, network, or data action; and (4) which conclusions remain unverified? List issues first, then fix only what the source or user authorization supports.
Output checklist
Verify each item before delivery
The task matches the purpose documented in the SKILL.md.
The source section “使用するタイミング” has been checked.
The source section “使用しないタイミング” has been checked.
The source section “入力” has been checked.
The source section “変換モデル” has been checked.
Inputs, constraints, and acceptance criteria are explicit.
Unverified facts, compatibility, and outcome claims are clearly marked.
Any file, command, network, or data action has been reviewed.
Choose a different workflow
When another Skill is the better fit
ui-to-vue
Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.
A separate implementation from affaan-m/ECC; compare its source, maintenance signals, and permission requirements.
Open source detailab-testing
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.
Open source detailchurn-prevention
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers o
A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
What does ui-to-vue do?
UIデザインのスクリーンショットをVue 3 Composition APIコンポーネントコードに一括変換します。
How do I start using ui-to-vue?
The catalog detected this source-specific install command: npx skills add https://github.com/affaan-m/ECC --skill "docs/ja-JP/skills/ui-to-vue". Inspect the command and pinned source before running it.
Which Agent platforms does it declare?
No dedicated Agent platform is declared in the pinned source record.
Repository stars
234,327
Repository forks
35,711
Quality
62/100
Source repository last pushed
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Documentation19/30
Specificity12/25
Maintenance20/20
Trust signals11/25
Compare before choosing
Related Agent Skills and source variants
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
ui-to-vue by affaan-m
Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.
ab-testing by coreyhaines31
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
churn-prevention by coreyhaines31
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers o
design-intelligence by event4u-app
Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
design-system-capture by event4u-app
Write and maintain DESIGN.md + PRODUCT.md — captures visual decisions and interaction patterns so design tasks stay consistent across sessions without re-scanning past work.
View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 1 min
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
- Source repo
- affaan-m/ECC
- Skill path
- docs/ja-JP/skills/ui-to-vue/SKILL.md
- Commit SHA
- 4e973d3eaf92
- Repository license
- MIT
- Data collected