スキル自身の言葉で
このスキルは、視覚的に重要な Web タスクに対して、画像を先に作成する必須のワークフローを強制します。エージェントはコードを書く前にまず自らデザイン画像を生成し、その画像を深く分析してタイポグラフィ、スペーシング、ボタン、色、レイアウトのロジックを抽出しなければなりません。Codex では、複数セクションを圧縮した1枚のボードではなく、セクションごとに1枚の大きく読みやすい画像を生成することがデフォルトとなり、セクションや詳細ビューにはトリミングではなく新規のスタンドアロン画像を作成します。
入れ子になったボックスレイアウト、偽の UI ラベル、小さすぎるピル、窮屈なヒーローセクションを徹底的に避けます。ヒーローは最大1〜3行の見出しにとどめ、常にすっきりとした状態を保つ必要があります。このスキルは十分なスペーシングを強制し、視覚的な雑然さを減らし、汎用的なコードレイアウトに流れることなく、生成されたリファレンスに忠実なフロントエンドを実装します。
仕組み
- 01Codex でセクションごとに個別の画像を作成する
Codex 内では、このスキルは複数のセクションを1枚のボードに圧縮するのではなく、セクションごとに1枚の大きく読みやすい画像を生成します。
- 02新しい画像を生成する、トリミングは行わない
専用のビューが必要なセクションでは、以前に生成した大きな画像からトリミングするのではなく、同じデザイン言語を保った新しい画像を生成します。
- 03生成されたすべての画像を深く分析する
このスキルは、実装に取りかかる前に、各画像から表示されている正確なテキスト、タイポグラフィの関係性、スペーシングのロジック、ボタンの詳細、配色、レイアウト構造、コンポーネントのスタイリングを抽出します。
- 04リファレンスに一致するフロントエンドを実装する
分析されたデザインを忠実にコードへ変換し、レイアウトのロジック、スペーシングのリズム、セクションの順序、タイポグラフィの雰囲気、コンポーネントのスタイルを保持しながら、汎用的なパターンに流れることを防ぎます。