design-tool-picker について
どのデザインツールを使うか迷う開発者向けの判断ガイドです。設計段階、課題の種類、UI を実行できるかに応じて、適切なスキル、コマンド、エージェントを案内します。
主な機能
- 01デザイン作業に応じたツール選定
- 02新規 UI と既存 UI の区別
- 03視覚的課題とコード品質の区別
- 04静的解析とスクリーンショットツールの説明
- 05一般的なデザインワークフロー
活用シーン
- 01新しい UI 向けのデザイン支援を選択
- 02視覚的な変更の反復や検証方法を決定
- 03アクセシビリティのコードレビュー方法を選択
- 04デザインシステム更新の手順を計画
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/design-tool-pickerを入力して読み込まれたか確認します。
詳細
デザインツールの選び方
「どのデザインツールを使えばよいですか？」と尋ねられた場合や、デザインツール選びに迷っているような場合は、この判断フローに沿って案内してください。
クイックリファレンス
| 状況 | 推奨ツール | 種類 | 呼び出し方法 |
|---|---|---|---|
| 新しい UI コードを書く | frontend-design | スキル | 自動的に読み込まれます |
| デザインシステムのテンプレートが必要 | ux-brief | コマンド | Skill("ux-brief") |
| 既存の UI を反復的に改善する | ui-ux-designer | エージェント | Task(majestic-engineer:design:ui-ux-designer) |
| ビジュアルの変更が意図どおりか確認する | visual-validator | エージェント | Task(majestic-engineer:qa:visual-validator) |
| アクセシビリティの観点からコードをレビューする | ui-code-auditor | エージェント | Task(majestic-engineer:qa:ui-code-auditor) |
| React コンポーネントをスタイリングする | tailwind-styling | スキル | Skill(majestic-react:tailwind-styling) |
判断フロー
質問 1：コードはすでにありますか？それとも、これから作り始めますか？
これから作り始める → 必要なものに応じて選びます：
- デザインシステムをゼロから作りたい：
Skill("ux-brief") - コーディング中にデザインのガイダンスだけが必要：
frontend-designスキル（自動読み込み）
コードがある → 質問 2 に進みます
質問 2：問題はビジュアル（レイアウト、色、余白）ですか？それともコード品質（アクセシビリティ、パターン）ですか？
ビジュアルの問題 → 質問 3 に進みます
コード品質の問題 → ui-code-auditor エージェント
- ソースコードをレビューし、アクセシビリティ違反を検出します
- alt テキスト、aria-label、フォームラベルの不足を検出します
- アニメーションのアンチパターンやタッチターゲットの問題を見つけます
- ファイル名と行番号を含む検出結果を返します
質問 3：UI を実行してスクリーンショットを撮れますか？
はい → 質問 4 に進みます
いいえ → frontend-design スキル
- タイポグラフィ、色、モーションのデザインパターンを提供します
- UI を実行しなくても、コーディング中に参照できます
質問 4：デザインを反復的に改善しますか？それとも、正しいかどうかを検証しますか？
反復的に改善する → ui-ux-designer エージェント
- スクリーンショットを撮影して分析し、変更を実装します
- 複数回の反復サイクルに対応します（デフォルトは 10 回）
- ビジュアルフィードバックを通じて段階的に改善します
検証する → visual-validator エージェント
- 変更が意図した目標を達成したかを確認します
- アクセシビリティとデザインシステムへの準拠を検証します
- 合格／不合格の判定を構造化して返します
ツールの比較
スクリーンショットベースのツール（ビジュアル）
| ツール | 目的 | 使用する場面 |
|---|---|---|
ui-ux-designer | 反復的な改善 | 「見た目をもっとよくして」 |
visual-validator | 検証 | 「変更はうまくいった？」 |
どちらもブラウザツールと実行中の UI が必要です。
コードベースのツール（静的）
| ツール | 目的 | 使用する場面 |
|---|---|---|
ui-code-auditor | アクセシビリティ／品質監査 | 「コードにアクセシビリティの問題がないか確認して」 |
frontend-design | デザインのガイダンス | 「どのようにスタイリングすればよい？」 |
UI を実行せずにソースコードを扱います。
作成ツール
| ツール | 目的 | 使用する場面 |
|---|---|---|
ux-brief コマンド | デザインシステムの生成 | 「プロジェクト用のデザインシステムを作成して」 |
tailwind-styling | Tailwind のパターン | 「Tailwind を効果的に使えるようサポートして」 |
よくあるワークフロー
UI を含む新機能
- デザインシステムがない場合は
Skill("ux-brief") - 実装中に
frontend-designスキルを使用 - アクセシビリティの問題を見つけるため、PR の前に
ui-code-auditorを使用 - ビジュアルが意図どおりかを確認するため、
visual-validatorを使用
ビジュアルのバグ修正
- 適切な修正方法を見つけるために反復する場合は
ui-ux-designer - 修正がうまくいったことを確認するため、
visual-validatorを使用
アクセシビリティ監査
- コードレベルの違反には
ui-code-auditor - ビジュアルのアクセシビリティ（コントラスト、フォーカス状態）には
visual-validator
デザインシステムの更新
- デザインシステムのドキュメントを更新するため、
Skill("ux-brief") - コンポーネントが仕様に一致することを確認するため、
visual-validatorを使用
コメント
Markdown 対応