zanwei/design-dna

これは何？

主な機能

• 01参照デザインから色、タイポグラフィ、余白、レイアウト、モーションのデザイントークンを抽出します。
• 02ムード、構成、インタラクションの感触など、定性的なスタイルを記述します。
• 03WebGL、パーティクル、シェーダー、スクロール連動モーションなどの視覚効果を記録します。
• 04保存したDNA JSONと独自のコンテンツを基に、新しいUIを生成します。
• 05オプションでピクセルベースの色測定を行い、生成結果をΔEで検証できます。
• 06skills CLIからCursor、Claude Code、Codexなどのエージェントにインストールできます。

ユースケース

• 値を推測することなく、参照サイトの見た目を新しいプロジェクトで再現する。
• チームのビジュアル言語をバージョン管理可能なJSON仕様として保存し、複数のプロジェクトで共有する。
• 生成したUIがブランドのカラーパレットに、測定可能な許容範囲内で一致しているか確認する。
• 複数の参考スクリーンショットを、エージェント向けの一貫したデザインブリーフにまとめる。

クイックスタート

1. 1

   skills CLIでskillをインストールします（Node.jsが必要です）

   npx skills add zanwei/design-dna
2. 2

   または、Cursorなど特定のagent向けに、対話なしでインストールします

   npx skills add zanwei/design-dna -a cursor -g -y
3. 3

   agentに参照スクリーンショットやURLを分析してDesign DNA JSONにまとめ、その内容をもとにUIを生成するよう依頼します

使う前に知っておきたいこと

• !これはagent skillのため、実行には対応するAIコーディングagentが必要です。
• !オプションの決定論的なcolor scriptを使うには、リポジトリをローカルにcloneし、npm installを実行する必要があります。

トピック

よくある質問

design-dna とは？

参照UIからビジュアルデザインの特徴を抽出してDesign DNAのJSONにまとめ、それを基に統一感のあるUIを生成するエージェントスキルです。 design-dnaは、既存デザインのビジュアルアイデンティティを機械可読なJSONとして記録するエージェントスキルです。スクリーンショット、画像、URLを入力すると、デザイントークン（色、タイポグラフィ、余白、レイアウト、形状、エレベーション、モーション、コンポーネント）、定性的なスタイル（ムード、ビジュアル言語、構成、画像表現、インタラクションの感触）、Canvas、WebGL、パーティクル、シェーダー、スクロール連動モーション、グラスモーフィズムなどの視覚効果という3つの側面からプロファイルを作成します。

design-dna は無料で使えますか？ライセンスは？

design-dna は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

design-dna は今もメンテナンスされていますか？

半年以内に更新あり。design-dna の最終コミットは 2026年8月28日 です。

design-dna は何に使えますか？

値を推測することなく、参照サイトの見た目を新しいプロジェクトで再現する。 チームのビジュアル言語をバージョン管理可能なJSON仕様として保存し、複数のプロジェクトで共有する。 生成したUIがブランドのカラーパレットに、測定可能な許容範囲内で一致しているか確認する。 複数の参考スクリーンショットを、エージェント向けの一貫したデザインブリーフにまとめる。

design-dna のインストール方法は？

skills CLIでskillをインストールします（Node.jsが必要です）: npx skills add zanwei/design-dna または、Cursorなど特定のagent向けに、対話なしでインストールします: npx skills add zanwei/design-dna -a cursor -g -y agentに参照スクリーンショットやURLを分析してDesign DNA JSONにまとめ、その内容をもとにUIを生成するよう依頼します

design-dna はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/zanwei/design-dna