はじめに：AIデザインの「限界」を感じていませんか？

「AIにデザインを頼むと、なんだか『AIっぽい』仕上がりになる……」
「過剰なグラデーションや、謎の装飾が入って使いにくい……」

最近、UIデザインの現場でこんな声を聞くことが増えました。AIの生成能力は飛躍的に向上しましたが、プロの現場で求められる「統一感」や「ユーザビリティ」を考慮したデザインを一発で出力するのは、まだ難しいのが現状です。

しかし、最新の取り組みとして「Claude Skills（クラウドスキルズ）」と「デザインシステム」を組み合わせることで、この課題を突破する手法が見えてきました。今回は、エンジニアとデザイナーが連携して進める、新しいAIデザイン構築の裏側をご紹介します。

1. なぜAIデザインは「AIっぽく」なるのか？

会議での議論によると、主な原因は「文脈（コンテキスト）とルールの欠如」にあります。

• 人間の心理の欠如: AIは「なぜその色が安心感を与えるのか」といった心理的背景を完全には理解していません。
• 定義の曖昧さ: 「かっこいいサイト」と指示しても、AIの学習データにある平均的な（あるいは派手な）「かっこよさ」が出力されがちです。

ここで重要になるのが、「デザインシステム」の定義です。GoogleのMaterial DesignやAppleのHuman Interface Guidelinesのように、色、スペーシング、フォントサイズなどの「トークン（共通変数）」をAIに厳密に守らせる必要があります。

2. 新概念「Claude Skills」とは？ エージェントとの違い

そこで登場するのが、「Claude Skills（クラウドスキルズ）」という概念です。

これまでのAI活用（エージェント）は、すべての文脈を読み込んで処理する「司令塔」のようなものでした。しかし、これでは情報量が多すぎて処理が重くなったり、細かい指示を見落としたりします。

• エージェント（司令塔）: 全体を統括し、タスクを振り分ける。
• スキル（専門職）: 「UIデザイン作成」「コードレビュー」「SEOチェック」など、特定のタスクに特化した軽量なモジュール。

MMORPGで例えるなら、エージェントはパーティーリーダー、スキルは「魔法使い」や「戦士」といった個別の能力です。必要な時に必要なスキルだけを呼び出すことで、効率的かつ高精度なアウトプットが可能になります。

3. 実践！「スキルビルダー」でデザインをコード化する

では、具体的にどうやってAIに「プロのデザイン」を教え込むのでしょうか？ キーとなるのは、プロジェクト内に設置する .claude/Skills/ ディレクトリと skill.md ファイルです。

手順のイメージ

1. プロジェクト構成: Next.js + Tailwind CSS などの環境を用意します。
2. スキルの定義: .claude/Skills/MaterialDesign/skill.md のようなファイルを作成します。
3. ルールの記述: skill.md の中に、デザインのルール（トークン）や振る舞いを記述します。

記述例（イメージ）:

• ベースデザイン: Google Material Design
• カラーパレット: ブランドカラー #XXYYZZ をプライマリとする
• ボタン形状: 角丸 4px、影はなし（フラットデザイン）

このように「スキル」として定義することで、AIはこのファイルを読み込み、「このプロジェクト専用の優秀なデザイナー」として振る舞うようになります。これを「スキルビルダー」と呼び、既存の有名デザインシステムをベースに、自社用にカスタマイズすることが可能です。

4. Figmaとエンジニアリングの融合

もちろん、コードだけでデザインは完結しません。Figmaを中心としたワークフローも重要です。

• シングルソース: Figma上のデザインとコードを一致させる（デザインシステムを共通言語にする）。
• コメント機能の活用: エンジニアとデザイナーがFigma上で動作仕様や実装の意図を細かく共有する。
• 伴走支援: 最終的な「良し悪し」の判断は人間が行う。AIが出したものをベースに、人間のデザイナーが微調整（ブラッシュアップ）を行う体制が、現時点での最適解です。

5. まとめ：これからのデザインワークフロー

これからのUI開発は、以下のように変わっていくでしょう。

1. 定義する: 人間がデザインの「トーン＆マナー」や「ルール（スキル）」を決める。
2. 生成する: 定義された skill.md を元に、AI（Cloud Skills）がベースとなるUIコード（Next.js/Tailwind等）を自動生成する。
3. 調整する: 生成されたものをFigmaやブラウザで確認し、人間が微調整を行う。

「AIに丸投げ」するのではなく、「AIにルール（スキル）を与えて、手足として使う」。これが、AIっぽさを脱却し、実用的なプロダクトデザインを生み出すための鍵となります。