claude-design-system-architect

Claude Design System Architect

デザインシステムは、オーダーメイドに見えるサイトと、ほかのAI生成ランディングページと同じに見えるサイトを分けるものです。このスキルでは、後続のすべての要素に意図が感じられるようにするトークンレイヤーとコンポーネントの表現体系を構築し、実際に使用するスタックに合わせた形式でエクスポートします。

claude-landing-composer（これらのトークンを使ってページを構築）および claude-design-critic（トークンに照らして監査）と連携します。

ステップ 1 — ブランドの要件を確認する

ブリーフ、既存サイト（WebFetch／スクリーンショット）、またはユーザーが好む参考サイトをもとに、次の項目を整理します。

• パーソナリティ — 3～5 個の形容詞（例：「温かみのある、エディトリアル、自信に満ちた、穏やかな」）。以降のあらゆる判断の指針になります。
• 対象ユーザーと利用状況 — 誰が、どのデバイスで、どんな気分のときに使うのか。
• 既存の資産 — ロゴ、変更できない色、現在使用しているフォント。
• 避けるべき参考例 — どのような見た目にしてはならないか。

デフォルトと基本ルール

ブランドから明示的な指定がない限り、次のルールに従います。

• パレットに紫は一切使いません。
• UI に絵文字は使いません。アイコンセット（Lucide／Heroicons）を使い、トークンとして指定します。
• 温かみのあるアースカラー（サンド、テラコッタ、クレイなど）を中心にし、ダークサーフェスの選択肢も検討します。
• モーションは後付けではなく、システムの一部です。

ステップ 2 — トークンを構築する

各レイヤーを意図的に設計し、その理由を記録します。

• カラー — 色相ごとの実用的な色階調（50～900）、セマンティックトークン（surface、text、muted、accent、border、success／warn／danger）、検証済みのコントラスト（本文テキストは WCAG AA 以上）を定義します。ダークモード用のセットも含めます。後から任意の HEX 値を散在させず、すべてをトークンに対応させます。
• タイポグラフィ — 選定理由のあるフォントの組み合わせ、ランダムな px 値ではないモジュラースケール、サイズごとの行の高さと字間、ウェイトを定義します。「AI が作った」と感じさせるデフォルトのシステムフォントの組み合わせより、個性があり読みやすい組み合わせを優先します。
• スペースとレイアウト — スペーシングスケール、コンテナ幅、グリッド、ブレークポイントを定義します。広々とした非対称の余白は高級感を生み、窮屈で均一なパディングは生成された印象を与えます。
• 角丸／ボーダー／エレベーション — 小規模で一貫性のあるセットを定義します。ブランドの重みに合ったシャドウを使います（温かみのあるブランドには柔らかく、技術的なブランドにはシャープに）。
• モーション — 時間とイージングのトークン、名前付きパターン（登場、強調、遷移）、視差効果を減らす設定を定義します。これにより、生き生きとした印象が生まれます。

ステップ 3 — コンポーネントを仕様化する

基本コンポーネント（ボタン、入力欄、カード、ナビゲーション、セクション、バッジ、モーダル）について、バリエーション、状態（ホバー／フォーカス／アクティブ／無効）、サイズ、アクセシビリティに関する注記を指定します。すべて上記のトークンで表現し、個別の値は使いません。

ステップ 4 — エクスポートする

説明文ではなく、実際に使えるファイルを作成します。

• すべてのトークンを設定する tailwind.config の拡張（または Tailwind v4 用の @theme）。
• tokens.css — CSS カスタムプロパティ（ライト＋ダーク）。
• design-system.md — 使用ガイド。HEX 値とコントラストを含むパレット、タイポグラフィスケール、スペーシング、モーション、コンポーネント仕様、および避けるべき AI らしいパターンを示す推奨例と非推奨例を記載します。

ステップ 5 — 引き継ぐ

1 画面に収まる要約と次の手順で締めくくります。これらのトークンを使ってページを構築するなら claude-landing-composer、既存の UI をトークンに合わせて改修するなら claude-design-critic を使います。

高級感のあるデザインと生成デザインの違い（必ず反映する）

• 意図的で控えめなパレット。競合するアクセントカラーを 6 色も使いません。
• 本格的なタイポグラフィスケールと個性のあるフォント。デフォルトのサンセリフ体を 3 サイズ使うだけでは済ませません。
• 非対称でゆとりのある余白。どこも同じパディングにはしません。
• 個性のあるモーション。すべての要素を同じフェードアップにしません。
• 自信を感じさせるアクセントカラーを 1 色。虹色のグラデーションは使わず、紫をデフォルトにすることもありません。

ガードレールのまとめ

すべての値をトークン化し、任意の値は使わない · コントラストは AA に準拠 · ダークモードと視差効果を減らす設定を含める · ブランドが求めない限り、紫も絵文字も使わない · 説明ではなく実際の設定ファイルをエクスポートする。