design-system

このスキルはアーキテクチャコンテキストから導出された独特で本番環境対応のデザインシステムを生成します。ランダムな美的選択ではなく、すべてのデザイン決定はプロダクトドメイン、ターゲットオーディエンス、コンポーネントライブラリ、SDL で定義されたアクセシビリティ要件に遡ります。

このスキルとともに読み込む参照ファイル:

• references/design-systems.md — コンポーネントライブラリプリセット、パーソナリティガイド、ドメインデフォルト、サブドメイン差別化
• references/design-system-fonts.md — パーソナリティ別厳選フォントペアリングライブラリ (49 種類以上、オーガニック / レトロ / エクスプレッシブ / シネマティック を含む、ローテーションルール)
• references/design-system-patterns.md — ダークモードトークン、グラデーション / テクスチャレシピ、モーションタイミング値、レイアウトアーキタイプ空間仕様、8 つの非従来的レイアウトパターン (CSS 付き)
• references/design-system-creative.md — 4 つのクリエイティブパーソナリティ (オーガニック、レトロ、エクスプレッシブ、シネマティック)、コンシューマー / クリエイティブドメインデフォルト、パーソナリティ × ドメイン早見表

ユーザーは SDL ブループリントを持っています。このスキルは design セクションを埋める、改善する、または検証し、実行可能なデザイン成果物を製作します。

デザイン思考 — コンテキスト駆動型

デザイン選択を行う前に、SDL に基づいて根拠を持たせてください:

1. SDL を読む — solution.name、solution.description、フロントエンドコンポーネント、ターゲットオーディエンス、プロダクトドメインを抽出します
2. パーソナリティを導出する — ドメイン + オーディエンスをデザインパーソナリティにマッピングします:
   • Fintech / 銀行 → コーポレート、またはエディトリアル
   • ヘルスケア → ミニマル
   • e コマース → 遊び心のあるまたは大胆 (B2C); コーポレート (B2B); ラグジュアリ (D2C ブランド)
   • 教育 → ミニマル、または遊び心のある
   • 開発者ツール → ブルータリスト、またはミニマル
   • エンタープライズ SaaS → コーポレート
   • クリエイティブ / メディア → エディトリアル、またはエクスプレッシブ
   • 不動産 → ラグジュアリ
   • 子ども / ファミリー → 遊び心のある
   • AI / ML → ミニマル
   • ウェルネス / ネイチャー / フード (職人系) → オーガニック
   • 音楽 / ビンテージ / クラフト → レトロ、またはシネマティック
   • クリエイティブスタジオ / エージェンシー / ファッション (ユース) → エクスプレッシブ
   • フィルム / ゲーミング / ラグジュアリ体験 → シネマティック
   • パーソナルポートフォリオ (クリエイティブ) → エクスプレッシブ、またはミニマル
   • レストラン (ファインダイニング) → ラグジュアリ、またはオーガニック
   • 非営利団体 → ミニマル、またはエディトリアル
   • 不明な場合: references/design-system-creative.md のパーソナリティ × ドメイン早見表を読んでください
3. パレットを導出する — ドメイン適切な色を選び、デフォルトとして藍 / 紫を使用しません:
   • Fintech → エメラルド、またはティール
   • ヘルスケア → スカイ、またはシアン
   • e コマース → オレンジ、またはローズ
   • 開発者ツール → グリーン、またはライム
   • エンタープライズ → ブルー、またはスレート
   • クリエイティブ → バイオレット、またはフクシア
   • 完全なドメインマッピングについては design-systems.md 参照を参照してください
4. レイアウトアーキタイプを導出する — SDL のコンポーネントタイプから:
   • 管理画面 / CRM / ダッシュボードフロントエンド → dashboard (サイドバー + ヘッダー + コンテンツ)
   • マーケティング / ランディングページ (標準) → marketing (ヒーロー + セクション + フッター)
   • コンテンツが多いアプリ → editorial (幅広コンテンツ + タイポグラフィック階層)
   • 認証付き SaaS → saas (認証レイアウト + ダッシュボード + 設定)
   • モバイルファーストウェブ → app-shell (トップナビ + レスポンシブコンテンツ)
   • クリエイティブ / コンシューマーサイト — references/design-system-patterns.md から非従来的レイアウトを選択:
     • ポートフォリオ、ブランド対比 → split-screen
     • 機能ショーケース、アプリローンチ → bento-grid
     • ミュージシャン、フィルム、ナラティブ → full-bleed-panels
     • プロダクトストーリーテリング、プロセス → sticky-scroll
     • イベント、ファッション、大胆なセクション → diagonal
     • ギャラリー、タイムライン、ポートフォリオ → horizontal-scroll
     • エージェンシー、ファッション、タイプ駆動型 → typography-forward
     • ブログ、ニュース、ルックブック → magazine-grid
   • 組み合わせ可能: 例) ヒーロー用 full-bleed-panels + 機能用 bento-grid + コンテンツ用 magazine-grid

デザイン原則

Anthropic のフロントエンドデザイン研究から適応 — アーキテクチャレンズを通じて応用:

タイポグラフィ

• 個性的でコンテキスト適切なフォントを選択する — ジェネリックなフォントではありません
• 見出しとしてデフォルトで Inter、Roboto、Arial、またはシステムフォントを使用しません
• 特徴的なディスプレイ / ヘッディングフォントと洗練されたボディフォントをペアリングします
• フォントパーソナリティをプロダクトパーソナリティに合わせます (エディトリアル / ラグジュアリ向けセリフ、コーポレート向けジオメトリックサンセリフ、ブルータリスト / 開発者向けモノスペース)
• すべてのフォントは Google Fonts から入手可能である必要があります (スキャフォルド統合用)

カラー & パレット

• 優位な色と鋭いアクセントにコミットする — 色を均等に分散させません
• プライマリカラーはプロダクトドメインから導出 (上記のドメインマッピング参照)
• セマンティックカラー (成功、警告、エラー、情報) はプライマリパレットと区別される必要があります
• サーフェスモード (ライト / ダーク / オート) はプロダクトコンテキストに基づきます — 開発者ツールはデフォルトダーク、エンタープライズはデフォルトライト
• すべての色は SDL アクセシビリティレベルごとに WCAG コントラスト要件を満たす必要があります

モーション言語

• 個々のアニメーションではなく、モーション哲学を定義します
• 散在したマイクロインタラクション > 1 つの調整されたページトランジション
• モーションをパーソナリティに合わせます: ブルータリスト / コーポレート向けなし / スナッピー、ラグジュアリ / エディトリアル向けスムーズ、遊び心のある向けエクスプレッシブ
• SDL で指定された場合、reducedMotion アクセシビリティ設定を尊重します
• トランジションタイミング、イージング、スクロール動作設定を指定します

空間構成

• 密度をパーソナリティに合わせます: コーポレート / ブルータリスト向けコンパクト、エディトリアル / ラグジュアリ向けリラックス
• ボーダー半径、シャドウ深度、ボーダー処理をコヘーシブなシステムとして定義します
• レイアウトアーキタイプに基づいて最大コンテンツ幅を指定します
• パーソナリティがサポートしている場合 (大胆、エディトリアル)、予期しないレイアウトが推奨されます — 非対称性、オーバーラップ、グリッド破壊要素

背景 & テクスチャ

• パーソナリティに適切な雰囲気を作成 — どこもかしこも白ではありません
• ラグジュアリ / エディトリアル: 微妙なグラデーション、ノイズテクスチャ、レイヤー化された透明度
• ブルータリスト: 生、高コントラスト、装飾なし
• コーポレート: クリーン、構造化、最小限のテクスチャ
• 遊び心のある: グラデーションメッシュ、幾何学的パターン、大胆なフィル

出力仕様

デザインシステムを生成する場合、以下すべてを製作します:

1. SDL デザインセクション

すべてのフィールドで SDL design セクションを完成させます:

design:
  preset: [コンポーネントライブラリ — shadcn | material | ant | chakra | daisyui | bootstrap | custom]
  personality: [ドメイン + オーディエンスから導出]
  palette:
    primary: [ドメイン適切な色]
    secondary: [補完的な色]
    accent: [CTA とハイライト用コントラスト色]
    neutral: [slate | gray | zinc | neutral | stone — パーソナリティに合わせた]
    surface: [light | dark | auto — コンテキスト適切]
    semantic:
      success: [グリーンバリアント]
      warning: [アンバーバリアント]
      error: [レッドバリアント]
      info: [ブルーバリアント]
  typography:
    heading: [個性的な Google Font — Inter / Roboto / Arial は不可]
    body: [読みやすい Google Font — コントラストのためペアリング]
    mono: [コードブロック用モノスペースフォント]
    scale: [compact | default | spacious — パーソナリティに合わせた]
  shape:
    radius: [none | sm | md | lg | full — パーソナリティに合わせた]
    density: [compact | default | relaxed]
    shadows: [flat | subtle | elevated | dramatic]
    borders: [none | subtle | visible | bold]
  motion:
    transitions: [none | snappy | smooth | expressive]
    pageTransitions: [true | false]
  layout:
    maxWidth: [アーキタイプに基づいた 1024-1440]
    style: [dashboard | marketing | editorial | app-shell | saas]
  iconLibrary: [lucide | heroicons | phosphor | tabler — パーソナリティに合わせた]
  componentLibrary: [例 "shadcn/ui"、"Radix UI" などの正式名称]
  accessibility:
    wcag: [A | AA | AAA — ほとんどの場合デフォルト AA、ヘルスケア / 政府向け AAA]
    reducedMotion: [boolean]
    highContrast: [boolean]

2. デザイン言語概要

読みやすい 1 ページの Markdown サマリー:

• プロダクトコンテキスト — このプロダクトが何であり誰のためか (SDL から)
• 美的方向 — パーソナリティの選択とそれが適合する理由
• パレット根拠 — なぜこれらの色がこのドメイン向けか
• タイポグラフィペアリング — ヘッディング + ボディフォントとそれらが機能する理由
• モーション哲学 — このプロダクトがどのように動き、なぜか
• レイアウトアプローチ — 空間ロジックと密度
• 主要な差別化要因 — このデザインを記憶に残す 1 つのビジュアル要素

3. デザイントークン (JSON)

スキャフォルド用の機械可読トークン:

{
  "colors": {
    "primary": { "50": "...", "100": "...", "...", "950": "..." },
    "secondary": { ... },
    "accent": { ... },
    "neutral": { ... },
    "semantic": { "success": "...", "warning": "...", "error": "...", "info": "..." }
  },
  "typography": {
    "heading": { "family": "...", "googleFont": true, "weights": [400, 600, 700] },
    "body": { "family": "...", "googleFont": true, "weights": [400, 500] },
    "mono": { "family": "...", "googleFont": true, "weights": [400] },
    "scale": "default"
  },
  "shape": {
    "radius": { "sm": "0.25rem", "md": "0.5rem", "lg": "1rem", "full": "9999px", "default": "0.5rem" },
    "shadows": { "sm": "...", "md": "...", "lg": "..." },
    "borders": { "width": "1px", "color": "..." }
  },
  "motion": {
    "duration": { "fast": "150ms", "normal": "300ms", "slow": "500ms" },
    "easing": { "default": "cubic-bezier(0.4, 0, 0.2, 1)", "bounce": "cubic-bezier(0.68, -0.55, 0.265, 1.55)" }
  },
  "layout": {
    "maxWidth": "1280px",
    "style": "dashboard"
  }
}

4. コンポーネントインベントリ

SDL アーキテクチャコンポーネントを必要な UI コンポーネントにマッピング:

SDL コンポーネント	必要な UI コンポーネント
認証サービス	ログインフォーム、サインアップフォーム、パスワード忘却、認証レイアウト
ユーザーダッシュボード	サイドバーナビ、統計カード、データテーブル、チャート
API サービス	API キー管理、使用量メーター、コードスニペット
決済統合	価格カード、チェックアウトフォーム、請求履歴

5. Tailwind Config パッチ

マージ可能な状態の Tailwind 設定:

// tailwind.config.ts 拡張
import type { Config } from 'tailwindcss'

export default {
  theme: {
    extend: {
      colors: { /* デザイントークンから */ },
      fontFamily: { /* タイポグラフィから */ },
      borderRadius: { /* shape から */ },
      boxShadow: { /* shape から */ },
    },
  },
} satisfies Config

6. サンプルパレットプレビュー

以下を視覚的に示す単一ファイル HTML:

• すべてのシェード付きカラーパレット
• タイポグラフィサンプル (異なるサイズでのヘッディング + ボディ + モノ)
• シェイプシステム (サンプルカード上のボーダー半径、シャドウ、ボーダー)
• デザイン言語のボタンバリアント
• 選択したアーキタイプを示すミニレイアウト

7. ダークモードトークン (surface: dark または暗いデフォルトドメイン時)

SDL で surface: dark が指定されている場合、またはドメインがデフォルトで暗い場合 (開発者ツール、ゲーミング、AI / ML はユーザー設定)、ライトトークン横で追加のダークトークンセットを生成します。

正確な値についてはパーソナリティごとに references/design-system-patterns.md → ダークモードトークンパターンセクションを読んでください。

design-tokens.json の "dark" キー配下でダークトークンを出力:

{
  "colors": { ... },
  "dark": {
    "background": "#09090b",
    "surface": "#18181b",
    "surface-elevated": "#27272a",
    "border": "rgba(255,255,255,0.08)",
    "text-primary": "#fafafa",
    "text-secondary": "#a1a1aa",
    "primary": "#60a5fa"
  }
}

また、palette-preview.html に含めるための CSS デュアルモードトークンブロック (:root + .dark) を生成します。

検証ルール

• すべてのカラー選択はドメイン根拠に遡る必要があります — ランダムな選択はありません
• ヘッディングフォントはボディフォントと同じものであってはいけません
• ヘッディングフォントは Inter、Roboto、Arial、Helvetica、またはシステム UI であってはいけません
• パレットはドメインがクリエイティブ / ゲーミング以外の場合、プライマリとして藍 / 紫を使用しません
• WCAG コントラストは SDL のアクセシビリティレベルに対して検証される必要があります
• モーション設定はパーソナリティと一貫性がある必要があります (ブルータリスト ≠ エクスプレッシブ)
• すべてのフォントは Google Fonts カタログに存在する必要があります
• デザイントークンはスキャフォルドフェーズで消費可能な有効な JSON である必要があります

多様性ルール

2 つのプロジェクトが同じ見た目をすることはありません。 同じドメイン内でも以下を変動させます:

• フォントペアリング (1 つの「定番」フォント (Space Grotesk など) に収束しないようにローテーションを維持)
• カラー温度 (ドメイン適切な範囲内で温い vs 冷たい)
• レイアウト密度とホワイトスペース処理
• パーソナリティ制約内のモーション強度
• ライト vs ダークサーフェスデフォルト

目標はこの特定のプロダクト用に意図的に作成されたデザインシステムです — カラースワップするだけのテンプレート出力ではありません。