codexでバイブコーディングやってますか？ 私も下手なりにバイブコーディングに挑戦しています。
codexにコード修正しているとよく「最小構成で変更します....」とか言って、できるだけ既存のコードを壊さないように小さい修正で済まそうとします。
これ自体は好ましく感じているのですが、ただし、UIの修正ではこの方針によって
- ボタンが「とりあえず」空いている場所に追加される
- レイアウトが継ぎ足し構造になる
- デザインの一貫性が崩れる
- 視線誘導が破綻する
という感じの修正になってしまいます。そうこで、そのボタンはこっちに、あれとあれをまとめてとか、非常に細かい指示を文章でやることになってとてもめんどくさい。
というわけで、試行錯誤の結果、以下の指示をAGENTS.mdに入れることで、ちょっとマシになりました。
AGENTS.md
# UIデザイン
- UIの作成と変更は、コードの最小変更よりも、操作性と視認性を優先する。
これで、全体的なレイアウトを考えてUIを修正してくれるようになりました。OpenAIのモデルは他と比べてUIデザインが苦手な印象があるんですけど、これでちょっとマシになるかなッという感じです。
ChatGPTさんによると、以下のような指示でもっと効果があるとか（ほんとかな？）
AGENTS.md
# UIデザイン
- 操作フローの自然さを優先する
- 視線誘導と情報階層を考慮する
- 一貫した余白・配置ルールを維持する
- 必要ならレイアウト構造の再設計を行う
みなさんの環境でも、効果があったらコメントで教えてください。