design-dna

Design DNA

3 つの次元にわたってデザインのアイデンティティを抽出、構造化、適用する 3 フェーズのワークフローです。

1. デザインシステム — 測定可能なトークン（色、タイポグラフィ、間隔、レイアウト、形状、エレベーション、モーション、コンポーネント）
2. デザインスタイル — 定性的な印象（ムード、ビジュアル言語、構成、画像、インタラクションの感触、ブランドの声）
3. ビジュアルエフェクト — 特殊なレンダリング（Canvas、WebGL、3D、パーティクル、シェーダー、スクロールエフェクト、カーソルエフェクト、SVG アニメーション、グラスモーフィズムなど）

フェーズ

フェーズ 1：構造化 — スキーマを出力する

ユーザーが構造上の次元やスキーマを求めた場合：

1. references/schema.md を読みます
2. フィールドの説明を含め、スキーマ全体を提示します
3. 3 つの次元とそれぞれの役割を説明します。
   • design_system：測定できるもの — 正確な hex 値、ピクセルサイズ、rem スケール
   • design_style：感じ取れるもの — ムード、個性、構成戦略
   • visual_effects：見て取れるものの、CSS だけでは表現できないもの — WebGL シーン、パーティクルシステム、シェーダーによる歪み、スクロール駆動アニメーション
4. 次元をカスタマイズまたは拡張するか、ユーザーに尋ねます

フェーズ 2：分析 — 参照から DNA を抽出する

ユーザーが目標とするデザインスタイルを表す画像、スクリーンショット、またはリンクを提供した場合：

1. references/schema.md を読み、フィールドの一覧全体を確認します
2. 提供された各参照について：
   • 画像／スクリーンショットの場合：残りのビジュアルプロパティを直接分析する前に、まず決定論的な色測定を実行します（以下を参照）
   • URL の場合：ページを取得し、ビジュアルデザインを分析します
3. スキーマのすべてのフィールドについて、参照から値を抽出または推定します
4. 複数の参照が一致しない場合は、優勢なパターンを記し、バリエーションにも触れます
5. Design DNA の完全な JSON を出力します — 空文字列を使わず、すべてのフィールドに値を設定します
6. 出力後、「生成に使用する前に、値を調整しますか？」と尋ねます

次元ごとの分析方法：

次元 1：design_system

• color：hex 値を目視で推定しないでください — 知覚される色は、なじみのあるパレットの既定値に寄りやすいためです（ΔE が 10 以上ずれることもよくあります）。参照が画像ファイルの場合は、代わりに測定してください。SKILL_ROOT をこの SKILL.md を含むディレクトリの絶対パスとして解決します。現在のプロジェクトディレクトリにスキルの scripts/ フォルダーがあると決めつけないでください。参照と出力には絶対パスを使用し、参照ごとに一意の名前を付けた測定ファイルを 1 つずつ作成します。

  npm install --prefix "$SKILL_ROOT/scripts" --silent
  node "$SKILL_ROOT/scripts/measure-colors.mjs" "$REFERENCE_IMAGE" > "$MEASUREMENT_JSON"
  

  測定した hex 値を DNA JSON にそのまま使用します。background ロールは surface.background に対応付けます。text は測定した背景とコントラストをなす neutral.scale の端の値に対応付け、その前景色としての用途を neutral.usage に記録します。accent は accent.hex に対応付けます。検証時に同じクラスタリング設定を再利用できるよう、測定したパレットとその measurement 設定の両方を design_system.color.measured_palette と design_system.color.measurement に保持します。カバレッジ値は 0 から 1 までの小数です。測定が不可能な場合（スクリーンショットを取得できない URL のみの参照など）に限り、目視でのサンプリングに切り替えます。プライマリカラーとセカンダリカラーは意味上の役割に基づいて選び、CTA の強調にはアクセントを使います。テーマにかかわらず、ニュートラルスケールは明るい順に並べます。
• typography：視覚的な特徴（ジオメトリック、ヒューマニスト、セリフの分類）からフォントファミリーを特定します。見出しと本文のサイズの関係から、スケール比を推定します。
• spacing：要素同士の近さから密度を評価します。セクション間の間隔の一貫性からリズムを測定します。
• layout：コンテンツの配置パターンからグリッドを特定します。最大幅、列数、非対称性を記録します。
• shape：要素の高さと比較して角丸の半径を測定します。ボーダーや区切り線の有無を記録します。
• elevation：シャドウのぼかし具合、広がり、レイヤー構成の方法を分類します。
• motion：観察できる場合（動画／インタラクティブ要素）は、イージングカーブと所要時間の印象を記録します。

ディメンション 2：design_style

• 雰囲気、個性、構成方針など、全体的な印象をまとめます
• SaaS、エディトリアル、ブルータリストなど、ジャンルの典型と比較します
• 装飾の度合いと、余白に対する考え方を記録します

ディメンション 3：visual_effects

• コードから：<canvas>、WebGL コンテキスト、Three.js／Pixi.js のインポート、GSAP／Lottie の使用、カスタムシェーダー、IntersectionObserver によるスクロールトリガー、SVG の <animate> 要素を調べます
• スクリーンショットから：標準的な CSS の範囲を超える視覚効果（光るパーティクル、3D オブジェクトのレンダリング、ノイズテクスチャ、グラデーションアニメーション、視差による奥行き、カーソルトレイル、テキストの歪み、グラスモーフィズムの表面など）を説明します。正確な実装方法を特定できない場合は、composite_notes に記録します。
• 動画／インタラクションのデモから：スクロール時の挙動、ホバー時の歪み、トランジションの演出、読み込みシーケンスを記録します
• 参照元に存在しないエフェクトカテゴリは、enabled: false に設定します
• 観察結果に基づいて、overview.effect_intensity と overview.performance_tier を評価します

フェーズ 3：生成 — DNA をコンテンツに適用する

ユーザーから DNA JSON とデザイン対象のコンテンツが提供された場合：

1. references/generation-guide.md を読みます
2. DNA JSON を解析し、3 つのディメンションすべてからトークンを抽出します
3. design_system の値から CSS カスタムプロパティを作成します
4. design_style の定性的なフィールドを、主観的なデザイン上の判断に反映します
5. デザインにアセットや素材が必要な場合、可能な限り元のソースから取得します。ユーザーが URL を提供した場合は、再作成、近似、代替を行わず、その URL から実際のアセットを取得します。
6. 適切な技術を使って visual_effects を実装します：
   • 軽量なエフェクト → CSS アニメーション、SVG、バニラ JS
   • 中程度のエフェクト → Canvas 2D、GSAP、Lottie
   • 高負荷のエフェクト → Three.js、カスタム GLSL シェーダー、Pixi.js
7. デザイン出力を生成します（デフォルト：CSS／JS をインライン化した自己完結型 HTML）
8. 生成ガイドに記載された品質チェックを実行します
9. 検証（DNA に測定済みのパレットが含まれる場合）：現在の Design DNA JSON がまだファイルになっていない場合は保存し、生成結果のスクリーンショットを撮影して、その DNA ファイルと照合します。この SKILL.md から SKILL_ROOT を解決し、絶対パスを使用してください。measured-colors.json という一時ファイルが存在すると仮定してはいけません：

   node "$SKILL_ROOT/scripts/verify.mjs" "$IMPLEMENTATION_SCREENSHOT" "$DESIGN_DNA_JSON"
   

   唯一保存されているアーティファクトが単独の測定 JSON である場合は、DNA ファイルの代わりにその JSON を使用できます。画像の参照元が複数ある場合は、それぞれの測定結果を個別に照合して検証します。レポートには、色ごとの ΔE とカバレッジのずれが PASS／FAIL のしきい値とともに表示されます。不合格の場合は、問題のある色を修正して再検証し、見た目で忠実度を判断するようユーザーに求めるのではなく、再検証してください。

ユーザーからコンテンツのみが提供され、DNA JSON がない場合、次のどちらを行うか尋ねます：

• まず参照元を分析する（フェーズ 2 に進む）
• 説明されたスタイルを使用する（説明から DNA を抽出してから生成する）

フェーズの組み合わせ

ユーザーは任意の組み合わせで実行できます：

• フェーズ 1 のみ：「デザインの構造／スキーマを見せて」
• フェーズ 2 のみ：「このデザインを分析して」（画像／リンクを含む）
• フェーズ 2 → 3：「このデザインを分析して、同じスタイルでランディングページを作って」
• フェーズ 1 → 2 → 3：全工程
• フェーズ 3 のみ：ユーザーがすでに DNA JSON を持っている

コンテキストから必要なフェーズを判断し、それに応じて実行します。