このプロジェクトの概要
同一仕様のフォームを、3つのコーディングエージェント（Codex CLI / Gemini CLI / Claude Code）に実装させ、
実装の違いや設計傾向を観察する小さな実験です。GitHub Pages で docs/ 以下を公開しています。
各コーディングエージェントが作成したフォームを見る
各コーディングエージェントが採用した設計（事実）
Codex CLI 実装
- UI: Tailwind CSS + daisyUI（CDN）
- 画面: フォーム/確認の2画面をDOM切替（クエリ有無で制御）
- マークアップ: 確認画面は
<dl>を使用、<noscript>メッセージあり - 入力補助:
autocompleteやaria-describedbyを付与 - バリデーション:
required、maxlength、電話番号にpattern="[0-9+()\-\s]{9,}" - 送信方式:
GET。パスワードは確認画面でマスク表示
Gemini CLI 実装
- UI: Bootstrap 5.3.0（CDN）
- 画面: URLの
usernameパラメータ有無でフォーム/確認を切替 - フィールド: 住所は
<input type="text">を使用 - バリデーション:
requiredのみ（追加のpattern指定なし） - 送信方式:
GET。確認画面はtextContentで値を反映
Claude Code 実装
- UI: Bootstrap 5.3.2（CDN）+ 追加のカスタムCSS
- 画面: JSでフォーム送信をフックしシングルページ的に確認画面へ遷移
- URL:
history.replaceStateで入力値をクエリに反映 - バリデーション: パスワード
minlength=8、電話番号は国内形式のpatternとsetCustomValidity - 表示: パスワードは
'*'.repeat(n)でマスク。住所は改行を<br>に置換 - データ反映:
innerHTMLで確認用HTMLを生成
各コーディングエージェントの設計傾向
- UIフレームワーク: Codexは utility-first（Tailwind）、Gemini/Claudeは Bootstrap ベース。Claudeは追加の装飾を積極採用。
- バリデーション: Claudeが最も厳密（正規表現＋カスタムメッセージ）、Codexは中程度（
pattern指定）、Geminiは最小限（required中心）。 - 確認画面の遷移: Codex/Geminiはクエリ検出で切替、ClaudeはJS制御＋URL更新のSPA的アプローチ。
- アクセシビリティ/セマンティクス: Codexは
aria-describedbyと<dl>を使用。Gemini/ClaudeはBootstrapのフォーム構造に準拠。 - フィールド設計: 住所は Codex/Claudeが
textarea、Geminiはinputで単行。 - 補助UI: Codexはヘルプテキストと
<noscript>を用意、Claudeは戻るボタン・URL反映で操作性を追加、Geminiはシンプルに徹する。
この index.html について
このページ自体もコーディングエージェント（Codex CLI）で作成しています。
LTでの投影を想定し、文字サイズ・コントラスト・プレビュー切替に配慮したシンプルな実装です。