AIエージェントスキルが測定可能なほど優れたフロントエンドを生み出す方法（ブラインドテスト実施）

「まあ十分」なAIフロントエンドの問題点

最先端のAIモデルは、すでに正しいフロントエンドのコードを書きます。ランディングページを依頼すれば、妥当なHTML、適切なリセット、アクセシブルなマークアップ、レスポンシブなグリッドが返ってきます。コードは動作します。

しかし「動作する」ことは「良い」ことと同じではありません。既定のままにしておくと、AIは見覚えのあるありきたりな見た目を生み出します。ダークパープルからブルーへのグラデーション、グラデーションのかかった見出しテキスト、すべてが中央揃え、均等に並んだ同一のカード、平坦なドロップシャドウが一つ。それは有能ですが忘れられやすく、ブランドを築くどころか損なうたぐいの成果物です。

そこで私たちは具体的な問いを立てました。AIエージェントを「有能」から「本当に美しく、ピクセル単位で作り込まれ、完璧にレスポンシブ」へと確実に引き上げ、その違いが願望ではなく本物であると証明できるか。本調査はその答えです。

ステップ1：ナレッジベースを構築する

私たちはシニアエンジニアが取るであろうところから始めました。すなわち、最良のフロントエンドの知見を一つの信頼できる情報源に集約することです。6つの詳細なフロントエンド講座、717本の講義トランスクリプト、およそ530万文字を精査し、アーキテクチャ、デザインシステム、レスポンシブレイアウト、アクセシビリティ、セマンティクス、パフォーマンス、モダンCSSを網羅する600行超のベストプラクティス運用手引き一冊へと凝縮しました。

さらに、それを2024〜2025年のプラットフォームの現実に合わせて最新化しました。サポート判断のためのWeb Platform Baseline、モダンCSS（コンテナクエリ、:has()、カスケードレイヤー、OKLCHカラー、clamp()）、ベンダープレフィックスの実情、モダンなブラウザAPI（IntersectionObserver、View Transitions、Popover API、ネイティブの<dialog>）、そしてCore Web Vitalsです。

ステップ2：ナレッジを再利用可能なエージェントスキルに変える

人間が読む運用手引きは有用です。AIエージェントが自動的に適用する能力は、それを一変させます。そこで私たちは、この運用手引きを7つのモジュール式エージェントスキルとしてパッケージ化しました。それぞれ適切な文脈で起動し、必要なガイダンスをオンデマンドで読み込むようにスコープ設定されています。

• CSSアーキテクチャ — リセット、デザイントークン、rem戦略、BEM、大規模なCSSの整理。
• Webデザインシステム — タイポグラフィ、カラー、スペーシング、階層、そして「パーソナリティ優先」のデザイン。
• レスポンシブレイアウト — Flexbox、Grid、コンテナクエリ、EMベースのメディアクエリ。
• セマンティックHTML & アクセシビリティ — WCAG、キーボードおよびスクリーンリーダー対応、アクセシブルなフォーム。
• アニメーション & モーション — パフォーマンスが高く、reduced-motionに配慮したアニメーションとモダンな効果。
• モダンCSS & 互換性 — Baselineとフィーチャークエリによって安全に制御された2024〜2025年の機能。
• パフォーマンス & ブラウザAPI — Core Web Vitals、遅延読み込み、目的に適したDOM API。

最初の結果は意外なものだった：引き分け

私たちはまず当然の方法でスキルを評価しました。同じタスクをスキルありとスキルなしで構築し、その出力を客観的な基準に照らして確認するのです。結果はほぼ同一でした。スキルありで約91%、スキルなしで約95%です。

これは失敗のように見えます。しかし実際には、本プロジェクトで最も重要な発見です。客観的なチェックが測っていたのは正しさ、すなわちremユニット、セマンティックHTML、viewportタグを使っているかどうかであり、最先端のモデルはそれをすでにすべて自力でこなします。私たちは間違ったものを測っていたのです。

「正しさは解決済みだ。作り込みはそうではない。有能なフロントエンドと卓越したフロントエンドの差は、モデルに欠けている知識ではない。反復を通じて適用されるセンスと、ありきたりな既定を出荷しないという拒絶である。」

ブレイクスルー：デザイナーのように働くスキル

デザイナーは最初のレンダリングをそのまま出荷することは決してありません。作り、実際のピクセルを見て、弱い部分を見つけ、磨きます。ナレッジスキルではそれを捉えられませんでした。そこで私たちは8つ目のスキル、Visual Polishを構築しました。これはエージェントの働き方そのものを、3つのレバーで変えます。

1. レンダリングと反復のループ

エージェントは一発出しをやめることが求められます。ページを構築し、実際のブラウザでレンダリングし、あらゆるブレークポイントでスクリーンショットを撮り、そのスクリーンショットを品質ルーブリックに照らして批評し、最上位の問題を修正し、それを繰り返します。ピクセルを見ることが最大のレバーです。私たちの実行では、スキルを備えたエージェントはタスクごとに40〜54回の構築・確認ステップを踏んだのに対し、支援なしでは3〜4回でした。

2. スキルに同梱された、高いセンスのデザインシステム

エージェントに「良いタイポグラフィを使え」と指示する代わりに、私たちは吟味された、主張のある既定を同梱します。OKLCHカラーシステム、エディトリアルな書体の組み合わせ、フルイドスケール、多層のエレベーションシャドウ、そしてあらゆるインタラクション状態がすでに作り込まれた洗練されたコンポーネントです。エージェントは、ありきたりな既定を即興でこしらえるのではなく、センスから出発します。

3. ガードレールと「完了の定義」

このスキルは、避けるべき「ありきたりなAI」の兆候を具体的に名指しし、作業を完了と宣言する前にエージェントが検証しなければならない厳格なチェックリストを定義します。どのブレークポイントでも横方向のオーバーフローがないこと、ライトとダークの両方でAAのコントラストがあること、フォーカスとホバーの状態がデザインされていること、そしてreduced-motionの設定を尊重するモーションであることです。

このループはすぐにその価値を証明しました。スキル自身のリファレンスページを構築する際、レンダリングのステップがコードレビューでは見逃されていた2つの実際の欠陥を捉えました。JavaScriptなしでは不可視だったコンテンツと、モバイルでオーバーフローするレイアウトです。どちらも何かが出荷される前に修正されました。まさに、誰もレンダリング結果を見ないときに本番へと到達する類の不具合です。

証明：ブラインドA/Bテスト

「美しさ」についての主張は容易にでき、容易に偽れます。そこで私たちは誠実に検証しました。2つの新しいブリーフ、すなわちSaaSの料金プランセクションとフィンテックアプリのランディングページを、スキルを備えたエージェントと支援なしのエージェントに与えました。4つの結果すべてをレンダリングし、そのスクリーンショットをどちらがどちらか知らない独立したAI批評者に渡しました。ラベルはランダム化し、パターンで見分けられないようにしました。

評決は決定的でした。スキルを備えたデザインは両方のタスクを高い確信度で制し、審査者は支援なしの出力を「ありきたりなAIの既定」だと独立に指摘しました。

「一方はアートディレクションが施され、明らかにカスタムデザインされている — インスピレーションボードに載る素材だ。もう一方は、最大級のありきたりなAIの兆候を2つ同時に頼っている。ダークグラデーションとグラデーションの見出しテキストだ。差は明白であり、僅差ではない。」

なぜこれが重要なのか

開発にAIを採り入れるほとんどのチームは「動くコードを生み出す」ところで止まります。本調査は、その次の、より価値ある一歩を示しています。作り込みとプロセスをエージェントに組み込み、その出力が単に正しいだけでなく確実に卓越したものになるようにすること、そしてそれを勘ではなく本物のブラインドテストで証明することです。

この原則はCSSをはるかに超えて一般化できます。

• 正しいものを測る。評価が正しさしか確認しなければ、強力なモデルは常に「まあ十分」に見え、品質のギャップを完全に見逃すことになります。
• プロセスは知識に勝る。最大の成果は、より多くのルールからではなく、エージェントに自らの成果を現実に照らして検証させ反復させることから生まれました。
• 原則ではなくセンスを出荷する。吟味された、主張のある既定は、抽象的な助言が及ばないほど出力を前進させます。
• ブラインドで証明する。独立したブラインド比較は、「私にはより良く見える」を証拠に変えます。

SplatDevはこれをどう適用するか

SplatDevは、エージェンシーやソフトウェア企業向けにAI強化型の開発システムを構築します。私たちは単にAIをあなたのコードベースに向けるだけではありません。その出力を信頼でき、真に高品質にするスキル、ガードレール、検証ループを設計し、その結果を仮定するのではなく検証します。

• カスタムエージェントスキル — あなたのスタック、デザインシステム、標準に合わせて調整されたもの。
• 検証ループ — レンダリング、テスト、レビューが、後付けではなくAIの働き方そのものに組み込まれています。
• エビデンスに基づく提供 — 私たちは速度だけでなく品質を測ります。

次の一歩を踏み出す

もしあなたのチームがコードを書くためにAIを使っているものの、まだ卓越したコードを出荷するには至っていないなら、そこには埋めるべき測定可能なギャップがあり、それを埋めるための方法があります。

単にコンパイルが通るだけの成果物ではなく、ポートフォリオに載せられる成果物を生み出すAIが欲しいですか。

SplatDevに問い合わせる — AIでより良く作る

またはメールでご連絡ください：[email protected]