Tricholomaaurantiumknottiness355/design-dna

design-dna は何をしますか？

ビジュアルデザインのアイデンティティを機械可読なDesign DNAとして抽出、構造化、適用します。トークン、スタイル、エフェクト全体で一貫したデザインシステムを実現します。

概要

このスキルは、AIエージェント（Claude Code、Cursor、Codexなど）がビジュアルデザインの属性を解析し、構造化されたDesign DNA（例：design-dna.json、tokens.json）に変換することを可能にします。デザイントークン（色、タイポグラフィ、スペーシング）、スタイル（CSS、Sass、Tailwind CSS設定）、エフェクト（アニメーション、トランジション）を横断して一貫性を保ちます。

主な機能

• デザイン抽出: 既存のコードベースやデザインファイルからデザイン属性を解析します。
• トークン管理: デザイントークンを構造化されたJSON形式で定義および管理します。
• スタイル生成: Design DNAからCSS、Sass、Tailwind CSSの設定を生成します。
• エフェクト定義: アニメーションとトランジションのエフェクトを機械可読な形式でキャプチャします。
• 再利用性: デザインの決定を再利用可能なテンプレートとして保存し、チーム全体でのコラボレーションを促進します。

対応プラットフォーム

• Claude Code
• Cursor
• Codex
• その他のAIエージェント環境

使用方法

1. プロジェクトにスキルをインストールします（例：.instructions/design-dna.md）。
2. AIエージェントにデザインファイルまたはコードベースのパスを指定します。
3. エージェントが解析を実行し、Design DNAを生成します（例：design-dna.json）。
4. 生成されたDNAをプロジェクトの設定ファイルに適用します。

例

{
  "tokens": {
    "color": {
      "primary": "#1a73e8",
      "secondary": "#34a853",
      "background": "#ffffff"
    },
    "typography": {
      "fontFamily": "Inter, sans-serif",
      "fontSize": {
        "base": "16px",
        "heading": "24px"
      }
    },
    "spacing": {
      "small": "8px",
      "medium": "16px",
      "large": "24px"
    }
  },
  "effects": {
    "animation": {
      "duration": "0.3s",
      "easing": "ease-in-out"
    }
  }
}

注意事項

• デザインシステムのドキュメントが存在する場合は、それを解析に活用してください。
• 生成されたDesign DNAは手動で調整可能です。
• 環境変数（例：DESIGN_SOURCE_PATH）を設定することで、解析対象のパスを指定できます。

関連リンク

• デザイントークンに関するドキュメント
• Tailwind CSS設定ガイド