「SVGもcanvasもJavaScriptも使わず、CSSだけで本物そっくりの眼球を描く」——2019年にそんな離れ業をやってのけたエンジニアがいた。
Qiitaで話題になったその記事は、虹彩の影が眼球の影とずれて見える光学的なリアルさまで、box-shadow / border-radius / gradientといった純粋なCSSだけで再現したという職人技の塊だ。CSS神（Ver.2019）と呼ばれるその先輩の仕事を、著者自身は1行も模倣できなかったという。
そこで生まれた問いが本記事のテーマだ——「2026年最新のAIエージェントならこの職人芸を超えられるか？」
挑戦に使った3つのAIエージェント
著者が選んだのは現時点で最前線に立つ3ツール。
- Claude Code CLI（Anthropic / Sonnet 4.6）
- Codex CLI（OpenAI）
- Antigravity
いずれもターミナルから自然言語で指示を与え、コードを生成・修正・反復させられるAI駆動開発ツール。「HTML/CSSのみで虹彩・影・グレアを持つリアルな眼球を描け」というプロンプトをぶつけ、どこまで先輩の作品に肉薄できるかを競わせた。
プロンプト設計が鍵：あいまい指示はインタビューで補う
著者がまず気づいたポイントは要件の解像度だ。「リアルな眼球」という一言ではAIは動きにくい。そこで著者はClaude CodeにAIインタビューをさせ、要件を段階的に具体化するというアプローチを採った。
# インタビュー型プロンプトの例（Claude Code向け）
あなたはプロのHTML/CSSエンジニアです。
私のゴールは、HTML/CSSのみを使用してリアルな眼球を描くことです。
リアルな眼球とは……（以下詳細定義）
気持ち悪くならないようにリアルな眼球を作ってほしいです。要件を言語化してから渡すことで、各AIが出すコードの品質が大きく変わったという。この「AIに要件定義を手伝わせてから実装させる」フローは、AI駆動開発の実践として非常に示唆に富む。
結果：AIは「CSS神 2019」に勝てたのか？
詳細な勝敗は元記事のCodePen比較で確認できるが、ポイントをまとめると：
- 3ツールともそれなりにリアルな眼球は生成できた
- 虹彩グラデーション・光彩の表現で各ツールに個性が出た
- 2019年の手打ちCSSが持つ「職人的精度」との差は依然として存在する
- Claude Code（Sonnet 4.6）は要件の解釈と反復修正に強みを見せた
所感：AIは「再現」より「対話的改善」が得意
個人的にこの記事で一番刺さったのは、人間が1行も書けなかったものをAIが何回かのプロンプトで形にした、という事実だ。CSS職人芸の「完全再現」には届かなくても、「動くものを出してイテレーションする」というプロセスはAI駆動開発の真骨頂だと感じる。
CSSアニメーションや複雑なグラフィック表現で詰まったとき、まずAIに叩き台を作らせて人間が調整する——このフローは今すぐ自分のプロジェクトに取り入れられる。Claude Code CLIはnpm i -g @anthropic-ai/claude-code、Codex CLIはnpm i -g @openai/codexでインストールして試せるので、興味ある方はぜひ元記事と合わせて手を動かしてみてほしい。