Open Design in Codex は、プロンプト、HTMLプロトタイプ、コード差分、モーション確認を一つの制作ループにまとめます。早い初稿と、見て直せる反復を両立するためのデモ画面です。
それぞれのカードはヒーロー内のプレビューと連動します。デザイン案、コード化、モーション確認のどこを見ているのかが、ユーザーにもチームにもすぐ伝わります。
空のプロジェクトでも、Codexに渡す制作意図、画面構成、実装可能なHTMLを一つの流れで用意します。余計な設定画面ではなく、作業対象そのものを前面に出します。
トップのデモを起点に、LP、プロダクト画面、モーション、デザインシステム、公開前確認の5方向へ展開しました。それぞれ独立したURLで確認できます。
商品の背景、見せたい価値、CTAの優先順位を同じキャンバス上で固めるサンプルです。最初の案を雑に終わらせず、実装できる構造まで持っていきます。
管理画面やSaaSの初期案を想定したサンプルです。装飾を増やすより、比較、状態把握、次の操作を迷わない情報設計に寄せています。
ヒーロー、ボタン、生成状態の動きを小さく検証するサンプルです。目立つアニメーションではなく、状態変化が伝わる動きだけを残します。
一回限りの見た目ではなく、次の画面にも使える判断材料を切り出すサンプルです。トークンとコンポーネントの境界を見える化します。
生成されたHTMLを静的ページとして扱い、リンク、コピー、レスポンシブ、公開URLまで確認するサンプルです。制作の出口を曖昧にしません。
Open Designの公式Quickstart、README、X投稿本文から使い方を整理し、既存サンプルとは違う画面構造で3ページに展開しました。
代替案ではヒーローを短くし、右側に制作工程を大きく見せます。LPの第一印象を「価値提案」から「制作速度の証拠」へ寄せた構成です。
別案では、Open Design in Codex の強みを「工程が途切れないこと」として見せます。説明よりも、生成されていく制作ボードを主役にしたレイアウトです。
「Open Design in Codex」のLPを、強いヒーローと工程カードで作る。
HTML、CSSトークン、レスポンシブ構成、CTA、カード連動の小さなJS。
ヒーローの軌道線、生成スキャン、カード選択の反応を静かに追加。