image-to-code

概要

ビジュアル系の Web タスク向けの、画像を起点にしたワークフロー。エージェントがセクションごとの参考画像を生成し、そこからタイポグラフィ、余白、色、コンポーネントを抽出して、それに合わせてサイトを実装する。

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In C

デザインにとっての意味

• コードは実在するビジュアル参照に従うので、実装がありきたりなレイアウトに流れない。
• 各セクションが専用の大きな画像を持つので、テキストと余白を分析しやすい状態が保たれる。
• ヒーローの見出しは 3 行以内に収まり、入れ子コンテナの積み重ねも生じない。

カバーする内容

• Mandatory image-first rule
• Generate enough images rule
• Deep image analysis requirement
• Hero minimalism rules
• Anti-drift implementation rule
• Anti-AI-slop rules