エージェント skill で Web ページはどう変わるか
同じプロンプトを Codex と Claude Code で、Web デザイン用の skill（SKILL.md）ありとなしの両方で生成しました。各プロンプトは Codex ネイティブ、Codex + skill、Claude Code ネイティブ、Claude Code + skill の 2×2 で実行します。ネイティブのセルはすべての skill で共通です。
46 セル中 46 セルを実行済み。
概要
行が skill、列がプロンプトです。各マスの左が Codex、右が Claude Code の結果です（ページ上部、デスクトップ幅）。
landing-saasdashboardblog-portfolio
Skill
frontend-design
Anthropic 公式のフロントエンドデザイン skill です。コードを書く前に、エージェントにデザインの方向性（配色、タイポグラフィ、レイアウト、原則）を決めさせ、それを AI にありがちなデフォルトと照らし合わせて確認させます。指示のみで、スクリプトは含みません。
anthropics/skills · Apache-2.0 · 6 セル中 6 セル
ui-ux-pro-max
コミュニティ製の UI/UX ナレッジベース skill です。ローカルの CSV データ（スタイル、配色、フォントの組み合わせ、UX ルール、チャートの種類、技術スタック）と Python の検索スクリプトで構成され、エージェントがページを書く前にデザインシステムを生成します。
nextlevelbuilder/ui-ux-pro-max-skill · MIT · 6 セル中 6 セル
web-design-engineer
出力が常に HTML（ページ、ダッシュボード、プロトタイプ、スライド、データ可視化）になるフロントエンドデザイン skill です。最初にデザインの方向性を決めるステップがあり、25 種類のスタイルレシピを同梱しています。指示のみで、スクリプトは含みません。
ConardLi/garden-skills · MIT · 6 セル中 6 セル
taste-skill (
design-taste-frontend)taste-skill v2：Web サイトとアプリ画面のためのアートディレクションです。スクリプトが 247 サイトを研究した方向性のライブラリから 3 つの方向性を配り、エージェントは選んだ方向性でページを作り、同梱のインスペクターで実際のブラウザーで確認します。指示と Node スクリプトで構成され、Node 22 以上、Chrome、画像探しのためのネットワークが必要です。
Leonxlnx/taste-skill · MIT · 6 セル中 6 セル
frontend-ui-engineering
Addy Osmani によるエンジニアリング品質のフロントエンド skill です。アクセシブルでレスポンシブな UI、読み込み中・空・エラーの各状態、セマンティックなトークン、そして避けるべき「AI っぽい」既定値の一覧表を扱います。指示のみで、スクリプトはありません。
addyosmani/agent-skills · MIT · 8 セル中 8 セル
theme-factory
Anthropic のテーマツールキットです。フォントの組み合わせを伴う 10 種類のプリセット配色（または生成したカスタムテーマ）を、ランディングページなどの完成した成果物に適用します。扱うのは色と書体だけで、レイアウトは扱いません。指示、10 個の小さなテーマファイル、ショーケース用 PDF で構成されます。
anthropics/skills · Apache-2.0 · 6 セル中 6 セル
プロンプト
SaaS のランディングページ
架空のオンコール当番管理ツール Rotaline のマーケティングページ。製品イラスト付きのヒーロー、機能紹介、導入ステップ、導入効果、利用者の声、月額・年額の切り替え付きの料金、FAQ、フッターで構成されます。
landing-saas· バージョン 1 · 14 セル中 14 セルデータダッシュボード
Kestrel Coffee Roasters の売上・運営ダッシュボード。KPI カード、チャネルで絞り込める月次売上グラフ、カテゴリ別の構成比、並べ替え可能なカフェ一覧表、最近の注文、在庫の警告を、すべて固定データで表示します。
dashboard· バージョン 1 · 14 セル中 14 セル個人ブログとポートフォリオ
架空のプロダクトデザイナー Maya Lindqvist の 1 ページサイト。4 つのケーススタディ、絞り込み可能な記事一覧、記事 1 本の全文、経歴タイムライン付きの自己紹介、ニュースレター登録フォーム、ライト・ダークの切り替えで構成されます。
blog-portfolio· バージョン 1 · 14 セル中 14 セルフォームとフィードバックのコンポーネント状態 ショーケース
架空のオンライン銀行のフォームとフィードバックのコンポーネント参照ページで、すべての状態を同時に表示します。テキスト入力、選択コントロール、ボタン、振込一覧（読み込み中・空・エラー・データあり）、メッセージ、振込フォーム。
form-states· バージョン 1 · 4 セル中 4 セル
手法
| エージェント | モデル | Effort | CLI バージョン | 実行数 |
|---|---|---|---|---|
| Codex CLI | gpt-6.1-sol | high | 0.164.0 | 23 回 |
| Claude Code | claude-opus-5-5 | high | 2.1.308 | 23 回 |
モデルと effort は実行スクリプトで固定しています。表には run.json ファイルに記録された値を示しています。
- 各セル 1 回だけ生成、結果の選り好みなし
- 各セルは追加のやり取りなしで、1 回の実行で 1 度だけ生成します。結果は失敗した実行も含め、出力されたままの状態で掲載しています。セルを再実行した場合、以前の試行は
runs/<prompt>/_attempts/に残します。 - 4 つのセルすべてで同じプロンプト
- プロンプトは、スタイルを表す形容詞を含まない中立的な表現で書いています。skill のセルでは、末尾に skill 名を指定する 1 文を追加します。Claude Code では
Use the <name> skill.、Codex ではUse the $<name> skill.です。 - 隔離
- 各実行は、リポジトリ外に新しく作成した使い捨てのディレクトリで開始します。
HOMEは空で、専用の設定ディレクトリ（CLAUDE_CONFIG_DIRまたはCODEX_HOME）を使い、環境は一から構築します。ユーザー設定、プラグイン、ユーザーレベルの skill、MCP サーバー、メモリは一切読み込みません。テスト対象の skill は、その使い捨てプロジェクトの skill フォルダ（.claude/skills/または.agents/skills/）にのみコピーします。各 CLI に同梱されている skill はそのまま利用でき、ネイティブの一部として扱います。その根拠は各エージェント自身のログから取得し、run.jsonのisolationに保存しています。 - skill が発動していること
- skill のセルでは、skill が読み込まれたことがログで確認できる必要があります（
skill_triggered）。確認できない場合、そのセルは skill の結果としては表示せず、失敗として扱います。 - スクリーンショット
- 幅 1440 CSS px と 390 CSS px でページ全体をキャプチャしています。ネットワークがアイドルになり、フォントが読み込まれた後に、アニメーションを無効にした状態で撮影しています（playwright 1.64.1, playwright-chromium 156.0.8078.4）。サムネイルにはページ上部を表示します。「ページを開く」では、元の
index.htmlをサンドボックス化した iframe（sandbox="allow-scripts"、同一オリジンへのアクセスなし）で読み込みます。 - アクセシビリティ スキャン
- 各ページは自動のアクセシビリティ スキャナーでも確認し、違反の数を重大度別に示しています。自動スキャンで見つかるのはアクセシビリティの問題の一部だけです（たとえば代替テキストやフォーカス順が妥当かどうかは判断できません）。数値は目安であり、結論ではありません。
- スクロール録画
- 動きはスクリーンショットに写らないため、一部のセルにはデスクトップ幅でページをスクロールした短い録画も付けています。セルのページで再生を押したときにだけ読み込みます。
- 実行日
- 2026-10-25 – 2026-10-26（UTC）、46 セル。
- 投票
- 各結果ページでは、giscus を使って 👍 で投票できます。giscus はサードパーティのウィジェットで、結果ページを開いたときにだけ読み込まれ、ギャラリーのほかのページでは読み込まれません。投票には GitHub へのサインインが必要です。票はこのリポジトリの GitHub Discussions にリアクションとして保存され、セルごとに 1 つのディスカッションをすべての言語で共有します。比較ページの票数は数時間ごとに更新されます。票数は訪問者の好みを示すもので、評価の結論ではありません。
既知の制限
- ネイティブとはインストールしたままの状態のことで、skill がゼロという意味ではありません。ネイティブを含むすべてのセルで、各エージェントに同梱の skill を使えます。Claude Code に組み込まれた 19 個の skill と、Codex のシステム skill（
imagegen、openai-docs、skill-creator、skill-installer）です。dashboardのプロンプトでは、Claude Code 組み込みのdatavizskill が自動で 2 回発動しました（claude__nativeとclaude__frontend-designで 1 回ずつ）。これはrun.jsonのbuiltin_skills_usedに記録されています。読者がエージェントをインストールしたときに実際に得られる結果を比べるため、意図的にそのままにしています。 - 隔離とは「何も読み込まない」ことであり、「何も読めない」ことではありません。エージェントはディスク上の他の場所を引き続き読み取れます。Codex 標準の
workspace-writeサンドボックスは/を読み取ることができ、bypassPermissionsを指定した Claude Code にはサンドボックスがありません。v0 の実行では、エージェントが親ディレクトリのAGENTS.mdを探したほか、あるエージェントは実行者の npm キャッシュにある Playwright を使用しました。より強力な隔離（別のユーザーアカウントやコンテナ）は今後の課題です。 - スクリーンショット内の固定サイドバー。ページ全体のキャプチャでは、
100vhのサイズを持つposition: fixedまたはstickyの要素が最初の画面の高さでしか描画されないため、ダッシュボードのサイドバーが 900 px で途切れているように見えることがあります。これはキャプチャによるもので、ページ自体の問題ではありません。 - 1 回の生成はベンチマークではありません。各セルは 1 回だけ生成したものです。このギャラリーは、skill がどのような傾向を持つかを示す例として見てください。スコアではありません。