mcpField
A
ai-design-workflow

ai-design-workflow

github.com/flitzrrrデザイン・UI957 回インストール30 週間前に更新
リポジトリ

ai-design-workflow について

ai-design-workflowは、デザイン業務でAIを使うチーム向けのスキルです。各工程でのAI活用、プロンプトの構成と反復改善を示し、人による確認とクライアントへの説明を重視します。

主な機能

  1. 01デザイン工程ごとのAI活用指針
  2. 025要素からなるプロンプト構成
  3. 03プロンプトの反復的な改善
  4. 04AIを使ったデザインレビューの型
  5. 05人による検証とクライアントへの透明性

活用シーン

  1. 01プロジェクト概要の不明点を洗い出す
  2. 02ムードボードの案を生成し選定
  3. 03UIマイクロコピーを改善
  4. 04明瞭さとアクセシビリティをレビュー

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/flitzrrr/frontend-design-skills --skill ai-design-workflow

インストール後、Claude Code で/ai-design-workflowを入力して読み込まれたか確認します。

詳細

AI デザインワークフロー

AI はアシスタントであり、自動操縦ではありません。方向性、判断、品質の主導権はあなたにあります。AI は個々のステップを加速しますが、戦略や判断に取って代わるものではありません。

対象範囲

次の場合にこのスキルを使用します。

  • デザインの各フェーズに AI ツールを意図的に取り入れる
  • デザインタスク向けのプロンプトを構成する
  • AI が生成したコンテンツ(テキスト、画像)を評価し、文脈に沿って捉える
  • レビュー中に AI を壁打ち相手として活用する
  • AI の利用についてクライアントに伝える
  • AI を使いながら、自分らしいデザインの個性を保ちたい

原則

1. AI はアシスタントであり、自動操縦ではありません

主導権はあなたにあります。AI は個々のステップを加速しますが、戦略や判断に取って代わるものではありません。

2. 決めるのはツールではなくワークフローです

AI が支援するフェーズと、支援しないフェーズをあらかじめ定義します。明確なプロセスがなければ、結果は恣意的になります。

3. プロンプトはブリーフィングです

優れたクライアント向けブリーフィングに当てはまる原則は、AI にも当てはまります。文脈、役割、タスク、形式、トーンを明確にします。

4. 組み合わせる力は強く、概念化する力は弱い

AI は既知のパターンを補間します(組み合わせによる創造性)。慣習を意図的に打ち破るのは、人間の役割です。

5. クライアントに対する透明性

プロジェクトで AI をどこでどのように使用しているか、率直に伝えます。利用を隠すと信頼が損なわれます。

6. AI の出力はすべて下書きです

AI の出力を確認せずに本番環境へ反映してはいけません。すべての結果を人間がレビューします。

ルール

DO:デザインの各フェーズで AI を意図的に活用する
フェーズAI の活用方法人間が判断すること
ブリーフィング不足点や矛盾点を分析するどの質問が重要か
リサーチ業界の傾向や競合について説明するどのインサイトが重要か
ペルソナ仮説を具体化し、妥当性を確認する最終的なペルソナの定義
コンセプトムードボードのバリエーション、創造的な手法どの方向性を追求するか
ビジュアルデザインカラーパレット、フォントの組み合わせ、マイクロコピー構成、一貫性、最終的なデザイン
レビュー批判的な評価、アクセシビリティのレビューフィードバックを反映するかどうか
引き継ぎドキュメントのテンプレート、スタイルガイドの文案事実の正確性
DO:ブリーフィングのようにプロンプトを構成する

効果的なプロンプトには、次の 5 つの要素が含まれます。

  1. 役割: AI にどのような役割を担わせるか。(「あなたは経験豊富な UX デザイナーです……」)
  2. 文脈: 出発点となる状況(プロジェクト、業界、ターゲット層)
  3. タスク: 具体的に何をするのか。(プロンプト 1 つにつき 1 タスク)
  4. 形式: どのような形式にするか。(リスト、表、文章)
  5. 制約: してはいけないことは何か。(制限、スタイルガイドライン)
DO:一度きりで仕上げようとせず、反復してプロンプトを調整する
  • 大まかなプロンプトから始め、評価して、改善します。
  • 追加のプロンプトを活用します。「もっとフォーマルにしてください」「3 つの案に絞ってください」「選んだ理由を説明してください」。
  • 完璧なプロンプト 1 つより、プロンプトを連ねるほうが効果的です。
DO:レビューで AI を壁打ち相手として活用する
  • 完成したデザインを言葉で説明し、批判的な評価を求めます。
  • 誤解される点、不明瞭な要素、アクセシビリティ上の障壁について尋ねます。
  • 説明を言葉にするだけでも、弱点が明らかになることがよくあります。
DO:文脈に基づいて AI 生成画像を評価する
  • 適しているもの: 抽象的な背景、汎用的なイラスト、コンセプトのビジュアル化。
  • 適していないもの: 企業の実際の写真、ポートレート、ブランド固有の画像。
  • 何が仮の素材で、何が最終素材なのかをクライアントにはっきり伝えます。
DON'T:アイデアが浮かばないときの最終手段として AI を使う
  • どの案もありきたりに感じるなら、問題はプロンプトではなく、コンセプトが欠けていることです。
  • 戦略のフェーズに戻ります。
DON'T:文脈に沿ったレビューをせずに AI の出力を採用する
  • AI は企業の歴史、市場の状況、顧客の感情を把握していません。
  • すべての結果をブリーフィング、ブランド、ターゲット層に照らして検証します。
DON'T:プロジェクト間でプロンプトを使い回す
  • 異なるプロジェクトで同じプロンプトを使うと、結果が似通ったものになります。
  • プロンプトは必ずプロジェクトの文脈に合わせて調整します。
してはいけないこと:ユーザーテストの代わりにAIを使う
  • AIは仮説を生成しますが、実際の反応をシミュレーションすることはできません。
  • 実際の人を対象としたユーザビリティテストは、引き続き必須です。

パターン

ブリーフィング分析プロンプト

プロジェクトのキックオフ時:「こちらは[project type]のプロジェクトブリーフィングです。開始前に確認すべき未解決の質問、不明確な要件、明確にする必要がある点を特定してください。」結果:質問の構造化されたリスト。詳細とプロンプトのテンプレートについては、references/prompt-patterns.mdを参照してください。

ムードボードの発散

初期のコンセプト段階:1. 画像生成ツールで15~20案を生成する、2. 2~3案に絞り込む、3. 意思決定の材料として提示する。

SCAMPERプロンプトチェーン

既存のアイデアを発展させる場合:AIがSCAMPERの各観点(代用、結合、応用、修正、転用、削除、逆転)からアイデアを検討します。

コピーの改善ループ

マイクロコピー、ボタンのラベル、エラーメッセージの場合:1. 文脈、トーン、機能を説明する、2. 5案を生成する、3. 最適な案を選び、改善する。

AIレビューセッション

ビジュアルデザインの後、引き継ぎの前:1. デザインを言葉で詳しく説明する、2. 明確さ、アクセシビリティ、一貫性について批判的な評価を依頼する、3. 回答をチェックリストとして使用する。

ドキュメント作成の加速

引き継ぎ段階で:デザイン上の決定事項を説明し、構造化されたドキュメントのテンプレートを生成させます。数時間ではなく、数分でフレームワークを作成できます。

アンチパターン

AIによる画一化の罠

同じツールを似たようなプロンプトで使うため、どのプロジェクトも同じように見えてしまいます。解決策: AIの出力は最終成果物ではなく、あくまで素材として扱います。独自のデザインの個性が、はっきりと認識できる状態を保つ必要があります。

プロンプト完璧主義

反復的に作業する代わりに、完璧なプロンプトの作成に何時間も費やしてしまいます。解決策: 80%程度の完成度のプロンプトから始め、2~3回の反復で改善します。

専門性不足の言い訳としてのAI

「AIがそうしたから」を正当化の理由にします。解決策: すべての決定について、デザイナーが根拠を示せる必要があります。

流行に流された機能の導入

新しいAI機能の価値を評価せずに、すぐにすべてを組み込んでしまいます。解決策: 本番で使用する前に、テストプロジェクトで評価します。

チェックリスト

  • デザインの各段階におけるAIの使用箇所と不使用箇所を明確に計画している
  • プロンプトに役割、文脈、タスク、形式、制約が含まれている
  • AIが生成したコンテンツを社内で記録している
  • AIの出力をすべてブリーフィングとブランド価値に照らして検証している
  • AIが生成した画像に、コンセプト素材か最終成果物かを明記している
  • AIの使用についてクライアントに伝えている
  • 引き継ぎ前にAIレビューセッションを実施している
  • 実際のユーザーを対象としたユーザビリティテストを計画している(AIで代替しない)
  • 最終成果物で独自のデザインの個性が認識できる

関連項目

  • design-process — AIワークフローはデザインプロセスの代替ではなく、その拡張です
  • customer-journey — AIによってペルソナの作成やタッチポイントの分析を効率化できます
  • landing-pages — AIが生成したテキストや画像は、ランディングページの基準を満たす必要があります
  • website-audit — AIツールはウェブサイトの分析を支援できます
  • branding-identity — AIの出力はブランドアイデンティティに沿っている必要があります

コメント