スキルを使用して Claude のデザインを向上させる
デザイン原則を自動的に有効化し、Claude の出力に組み込む
スキルを設計します。
- 作成者Anthropic
- カテゴリ個人向け
- モデルSonnet 4.5
- 機能
- 共有リンクをコピー
1
タスクを説明する
Claude は明確な指示と例が与えられると、優れた視覚デザインを生成することができます。 しかし、高品質な結果を日常的に達成するには、詳細なプロンプトと反復的な改良が必要となることが多く、これには時間とコンテキスト依存が伴う場合があります。 スキルを使用すると、そのプロセスを一度にパッケージ化し、あらゆる会話で高品質なデザイン思考を迅速に活性化できます。
あらゆる視覚作業をより高い基準に引き上げる究極のデザインスキルを作成したい、と Claude に伝えてください。特定のフレームワーク、標準、プロセスなど、Claude が出力の設計時にスキルに含めるべき内容を共有します。
プレゼンテーション、ダッシュボード、レポート、HTML ページなど、Claude で多くの視覚的な出力を作成しています。機能的ですが、洗練された作業というよりは初期ドラフトのようなもので、常に汎用的だと感じています。プロフェッショナルなデザイン改良を複数回重ねたように見せてほしいのです。
要求するあらゆる視覚出力に、デザイン思考を自動的に適用するスキルを作成したいと考えています。Claude がデザイン選択を検討し、ベストプラクティスを参照し、何かを提供する前に卓越性を追求するように促す要素です。
このスキルは、プレゼンテーション、スプレッドシート、HTML アーティファクト、PDF、その他の視覚的なコンテンツを求めるたびに有効化されなければなりません。Claude が行うべきこと：
- 機能バージョンから始め、それを昇格させる
- デザインの選択肢すべて（タイポグラフィ、色、レイアウト、間隔）に疑問を呈する
- 専門的なデザインリファレンス（Stripe、Linear、Apple、Bauhaus、Swiss design）から抽出する
- 汎用的なデフォルトではなく、特定の視覚手法を適用する
- 大胆な選択と、趣味的な抑制のバランスをとる
- 最終出力がテンプレートベースではなく、手動で作成されたものであることを確認する
スキルに Claude が参照する参照ファイルを入れるよう望んでいます。
- 設計質問チェックリスト（提供前に質問する内容）
- テクニックカタログ（具体的な視覚的な動きが達成された内容別に分類）
- リファレンスライブラリ（設計例と設計原則）
- 昇格プロトコル（改良のための体系的なプロセス）
- 設計理念（専門知識と抑制のバランスをとるための原則）
目標は、「販売ダッシュボードを作成して」や「プレゼンテーション資料を作成して」と指示したときに、Claude が自動的に汎用的な出力を受け入れないデザインディレクターのように思考することです。ユーザーがデザイン思考プロセスの確認を特に要求しない限り、研磨された結果のみが表示されます。必要な参照ファイルすべてを含むこのスキル作成を手伝ってください。
2
Claudeにコンテキストを与える
必要なコンテキスト
このワークフローは、Claude のスキルシステムを活用しています。 設定 > 機能 > スキルで、コード実行とファイル作成がオンになっていることを確認します。これにより、Claude はスキルを作成し使用する機能を備えていることになります。
No items found.
任意のコンテキスト
設計フレームワークと品質基準に関するより深い戦略的思考については、拡張思考を有効にしてください。
拡張思考
3
Claudeの生成内容
Claude は、主要な指示ファイルとサポート参照情報を含む完全なスキル構造を生成します。 スキルは、Claude スキルライブラリに追加されるとすぐに使用できます。 チャットで「デザインの卓越性」と呼ぶと、Claude は作成するものは何でも自動的にスキルの視覚的思考を適用します。
Claudeの回答
デザインエレベーションスキルを作成しました。これには、スキルがいつどのように起動するかを定義するメイン SKILL.md ファイルと、参照する 5 つの参照ファイルが含まれます。
design-elevation/SKILL.md の表示
参照ファイル：
DESIGN_INTERROGATION.md の表示
Claude はデザインを提供する前に、5 つのレベルの質問を実行します。最初の原則（何のためか）、要素別の分析（タイポグラフィ、色、レイアウト）、参照チェック（このデータから何を学べるか）、独自性評価、除去テストです。
TECHNIQUE_CATALOG.md の表示
400 以上の視覚技術を網羅した包括的な語彙。形状としてのタイポグラフィ、色現象、深度錯覚、テクスチャ品質、モーション、空間構成など、成果ごとに整理されています。 Claude は、多くの弱点ではなく強く適用する手法を 1～2 つ選びます。
REFERENCE_LIBRARY.md の表示
最新の企業（Stripe、Linear、Airbnb）から厳選されたデザイン例、歴史的な動き（Bauhaus、Swiss Design）から得られたデザイン例、自然なパターン（Fibonacci、Voronoi）および実績のあるタイポグラフィの組み合わせ。Claude はこれを検討して設計の方向性を示します。
ELEVATION_PROTOCOL.md の表示
8 段階の体系的なプロセス：基礎評価、初期質問、手法選択、参照情報チェック、規律適用、拘束検証、最終的な研磨、独自性確認。
DESIGN_PHILOSOPHY.md の表示
優れた専門知識と抑制のバランスを図るコア原則（大胆な対応と微妙な対応のタイミング、専門知識が細部にどのように示されるか、ユニークなことが忙しいことを意味しない理由、デザインは不可欠であると感じるもの）をご覧ください。
このスキルの使用方法：
design-elevationフォルダ全体をスキルディレクトリに追加する- 次回、視覚的な出力をリクエストする際、Claude は自動的にこれらのファイルを参照する
- 毎回設計要件を指定する必要なく、出力が向上する
参照コンテンツの調整やカタログへの追加手法の追加を希望しますか？
4
フォローアッププロンプト
Claudeとの会話を続けて、内容を洗練させたり、広げたり、さらに掘り下げたりしましょう。
スキルの実装を確認する
このスキルを使用して既存の作業を評価し、強化します。 Claude はスキルから統合された手法を適用することで、出力を再作成できます。
このスキルをテストしてみましょう。 四半期ごとのパフォーマンスダッシュボードを作成します。 デザインの昇格プロセスを使用して、初期機能バージョンと昇格された結果の両方を表示し、違いを確認できるようにします。
MCP 接続との組み合わせ
スキル内にパッケージ化された専門知識が、コネクタで有効化されたツールとどのように連携して機能するかを確認します。
Google ドライブは MCP を介して接続しています。 ドライブから既存のプレゼンテーションを抽出して改善するよう指示した場合、このデザインスキルはどのように機能しますか？ スキルと MCP 接続がどのように連携するかを示します。
手法カタログを展開する
特定の領域でスキルの語彙を深めます。または、品質基準と具体的な例をスキル指示やフレームワークに組み込むこともできます。これにより、Claude は希望する出力内容をより明確に理解できます。
具体的にはデータ可視化のための手法、例えばチャートスタイリング、ダッシュボードレイアウト、数字を視覚的により魅力的なものにする方法などを追加します。私もフィンテック分野で働いています。 業界をリードする財務デザインの例をリファレンスライブラリに追加します。
5
コツ・ヒント・トラブルシューティング
使用と改良を通じてスキルを進化させる
このスキルを数回適用すると、パターンに気づくでしょう。より大胆な色選択、より厳密な情報密度、特定のタイポグラフィ設定を常に希望している場合などです。そのフィードバックを活用してスキルファイル自体を更新し、進化する基準を組み込みます。 重要な新しい品質ゲートを追加します。 好みの作業のスクリーンショットを参考例として組み込みます。スキルは時間の経過とともに、よりパーソナライズされたものになる可能性があります。
スキルは効率を維持するために段階的な開示を使用する
Claude がタスクを実行する際はまずスキルメタデータ（上部の説明）をスキャンし、スキルが関連しているかどうかを確認します。 一致した場合にのみ、Claude は完全な指示を読み込みます。 参照ファイルは、実際に必要な場合にのみ読み込まれます。 つまり、Claude のコンテキストを圧迫せずに多くのスキルが利用できるということです。デザインスキルの 400 以上の手法は、Claude が特定の弱点に対する手法を実際に選択する必要があるまで読み込まれません。
品質標準に関する質問はデフォルト値を超えて意図的な選択肢へとプッシュする
このスキルにより、Claude は品質基準とベンチマークに照らして評価するようになります。また、これは数ラウンドのプロンプト処理ではなく、スキル内のプロセスとして反復処理を組み込みます。 この手法は、Claude に汎用的な選択を拒否させ、より創造的でユニークなデザイン決定を選択させるために使用されます。
さあ、体験してみませんか？
優れたデザインスキルを構築し、すべての視覚出力が機能的なものからポートフォリオ価値のあるものへと変換される様子を確認します。スキルを一度構築すれば、あらゆる会話で世界水準のデザイン思考を引き出せます。
