zanwei/design-dna

解決する課題

主観的な視覚的デザイン要件（例：「このウェブサイトのように見せたい」）を、正確で機械可読な仕様「Design DNA」として変換します。これにより、AIエージェントが一般的なデザインのデフォルトに逸脱したり、ブランドの視覚的アイデンティティの詳細なニュアンスを捉え損なうという一般的な問題を防ぎます。

動作方法

このプロジェクトは、3段階のパイプラインに従うエージェントスキルを提供します。

1. 構造：デザイントークン、質的スタイル、視覚効果の包括的なスキーマを定義します。
2. 分析：スクリーンショット、画像、またはURLから、測定可能なトークン（色、フォント）、質的認識（ムード、ブランドボイス）、高度な視覚効果（WebGL、シェーダー、ガラスモーフィズム）をカバーする数値化されたJSONプロファイルを抽出します。
3. 生成：抽出されたDNA JSONとユーザーのコンテンツを使用して、忠実なUIを実装します。通常、自己完結型のHTML/CSS/JSとして出力されます。

正確性を確保するために、オプションの決定論的測定スクリプトも含まれています。これらのスクリプトは実際のピクセル上でk-meansクラスタリングを実行し、正確な16進数コードを抽出し、最終的な実装が元のリファレンスと一致するかを検証することで、LLMの色認識のずれを排除します。

対象ユーザー

CursorやClaude CodeなどのAIエージェントを使用し、異なるプロジェクト間で特定の視覚的アイデンティティを一貫して再現したい、またはチーム間でデザイン仕様を共有したい開発者やデザイナーです。

特徴

• 三次元分析：標準CSSを超えるデザイントークン、質的スタイル、複雑な視覚効果を捉えます。
• 決定論的検証：ピクセルレベルの測定により、色やスタイルがLLMの認識ではなく数学的に正確であることを保証します。
• ポータブル仕様：バージョン管理可能で、異なるエージェントやプロジェクトで再利用可能なJSON「DNA」ファイルを出力します。
• 広範なエージェント互換性：Agent Skills仕様と互換性があり、skills CLI経由でさまざまなAIエディターやエージェントにインストール可能です。