概要
計測可能なトークン、定性的なスタイル、視覚効果にわたってデザインのアイデンティティを捉える 3 フェーズのワークフロー。完全な Design DNA の JSON を出力し、その JSON を新しいコンテンツに適用する。
>-
デザインにとっての意味
- スクリーンショットや URL を、名前の付いた色、書体、余白の値に変える。
- 計測可能なトークンだけでなく、ムード、構図、ブランドボイスも記録する。
- 素の CSS では表現できない Canvas、WebGL、シェーダー、スクロール効果も捉える。
カバーする内容
- Design system tokens
- Design style
- Visual effects
- Analyzing references
- Generating from JSON
- Phase combinations
インストール方法
Design DNA
-
リポジトリをクローンする。
git clone https://github.com/zanwei/design-dna -
スキルファイルの場所を Codex に指定する。
SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
何かを分析する前にスキーマを求め、3 つの次元をすべて確認する。
-
Codex に参照画像や URL を渡し、中身の入った DNA の JSON を求める。
-
その JSON と自分のコンテンツを渡して、自己完結した HTML ページを生成する。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。