関連記事では、AIエージェントスキルがフロントエンドの出力をブラインドテストで測定可能なほど美しくできることを示しました。本記事はその物語のもう半分、すなわち「AIで私たちのコードが良くなった」という投稿の多くが省く部分です。スキルが役立たなかったところ、それが要したコスト、そしてその違いが本物であるとどうしてわかるのか。エージェントスキルへの投資を検討しているなら、ギャップは成果と同じくらい重要です。
私たちは8つのスキルを構築し、2つの異なる方法でテストしました。最も重要な結果は、8つのスキルが一枚岩ではないということです。それらは正反対の振る舞いをする2種類にきれいに分かれます。
2種類のスキル
「エージェントスキル」を単一のレバーとして扱いたくなります。しかしそうではありません。
ナレッジスキル（そのうち7つ）
これらは良いフロントエンドとは何かをエンコードします。CSSアーキテクチャ、デザインシステム、レスポンシブレイアウト、セマンティックHTMLとアクセシビリティ、アニメーション、モダンCSSとブラウザサポート、そしてパフォーマンスです。これらはエージェントがオンデマンドで読み込む参照資料です。
1つのプロセススキル
8つ目の「Visual Polish」は、デザイナーがどのように働くかをエンコードします。構築し、実際のブラウザでレンダリングし、スクリーンショットを撮り、ルーブリックに照らして批評し、最も弱い部分を修正し、それを繰り返す。それに加えて、吟味されたデザインシステムのアセットライブラリと厳格な「完了の定義」があります。これはエージェントの知識だけでなく、その振る舞いを変えます。
この区別が、以下のすべての結果を説明することがわかりました。
どのように測定したか
2つの評価を行い、それぞれ同じタスクをスキルありと支援なし（スキルなし）で構築して比較しました。
- 正しさの評価 — 7つの構築タスクを客観的なチェックで採点。相対単位、セマンティックHTML、アクセシブルなフォーカス状態、emベースのブレークポイント、ネイティブの遅延読み込みなどを使っているか。
- 品質の評価 — 2つの新しいタスク（料金プランセクション、フィンテックのランディングページ）をブラインドで審査。独立したレビュアーがレンダリングされたスクリーンショットのみを採点し、どちらがどちらか知らず、ラベルはパターンで見分けられないようランダム化しました。
数値
| 指標 | スキルあり | 支援なし | 評決 |
|---|---|---|---|
| 正しさの合格率 | 約90% | 約95% | 実質的に引き分け |
| ブラインド品質 — タスク1 | 勝利（高い確信度） | 敗北 | 独自性 9 対 3 |
| ブラインド品質 — タスク2 | 勝利（高い確信度） | 敗北 | 独自性 8 対 3 |
| タスクあたりの時間 | 約+33% | 基準値 | スキルはコスト増 |
| タスクあたりのトークン | 約+24% | 基準値 | スキルはコスト増 |
この2つのブロックを合わせて読むと、物語の全体像が現れます。正しさではスキルありとスキルなしは引き分け。作り込みではスキルが決定的に勝つ — ただしコストは高い。
スキルが勝つところ（成果）
1. 作り込みと美しさ — 決定的な勝利
プロセススキルを用いると、出力は見覚えのある「ありきたりなAIの既定」から真にアートディレクションの効いたものへと変わり、両方のタスクでブラインド比較を高い確信度で制しました。どちらのデザインがどちらか知らないレビュアーは、支援なし版の兆候、すなわちダークパープルのグラデーションとグラデーションの見出しテキストを、独立に指摘しました。
「一方はアートディレクションが施され、明らかにカスタムデザインされている — インスピレーションボードに載る素材だ。もう一方は、最大級のありきたりなAIの兆候を2つ同時に頼っている。差は明白であり、僅差ではない。」
2. 実際の欠陥を捉える
プロセススキルはエージェントにレンダリングして見ることを強制するため、コードレビューが見逃した本番相当のバグを2つ捉えました。JavaScriptなしでは不可視だったコンテンツと、モバイルで横方向にオーバーフローするレイアウトです。一発出しの生成はどちらも出荷しました。結果を見るものが何もなかったからです。
3. あなたの規約を毎回強制する
スキルは、モデルが既定では選ばないプロジェクト固有の判断を確実に注入します。一貫したサイジング戦略、emベースのメディアクエリ、実際のブラウザサポートデータで制御されたモダンCSS、reduced-motionの安全性、そして（平坦ではなく）層をなしたシャドウです。数百回の実行にわたるその一貫性は、それ自体が成果物です。
スキルが勝たないところ（ギャップ）
正直な部分です。これらは現実であり、計画に織り込む価値があります。
ナレッジスキルは強力なモデルにかろうじて勝つ程度
最先端のモデルはすでに相対単位、セマンティックHTML、アクセシビリティの基本を知っています。そのため正しさの評価では、7つのナレッジスキルは支援なしのモデルと本質的に引き分けとなり、あるタスクでは採点者がスキルありをわずかに低く採点しさえしました。その価値は一貫性、そしてより弱い、あるいはより安価なモデルを助けることであって、最上位のモデルに対する純粋な押し上げではありません。
コストが高い
スキルを用いた実行は、ナレッジタスクでおよそ24%多くのトークンと33%多くの時間を使いました。完全なレンダリング・反復ループはさらに重くなります（一握りのステップに対し、数十回の構築・確認ステップ）。あなたは計算資源で品質を買っているのです。品質が重要なときは価値がありますが、仕事が「正しいコードを速く」であるときは無駄になります。
最良のレバーにはブラウザが必要
プロセススキルの必殺技は、実際のブラウザでレンダリングすることです。ブラウザのない環境では、ナレッジスキルへと退化し、最大の優位性が消えてしまいます。ツールチェーンをそれに応じて計画してください。
品質は安価に測定するのが難しい
私たちの客観的な正しさチェックは品質を判断するのが苦手でした。ほとんどの場合、両方の版を合格させ、デザインタスクでは偽陰性を生じました。真の品質評価には、人間のようなブラインド審査者が必要でした。そして私たちの品質評価は小規模でした。2つのタスク、1人のレビュアーです。説得力はありますが、まだ統計的に頑健ではありません。
全体を結びつける洞察
一文がそれを捉えています。
「正しさは解決済みだ。作り込みはそうではない。有能なフロントエンドと卓越したフロントエンドの差は、モデルに欠けている知識ではない。反復を通じて適用されるセンスと、ありきたりな既定を出荷しないという拒絶である。」
だからこそ、より多くの知識を加えてもほとんど効果がなかった一方で、プロセス、すなわち同梱されたセンスに照らしてレンダリングし、批評し、磨くことを加えると、大きく効果が出たのです。テキストの指示では一発出しをピクセルパーフェクトにはできません。エージェントに自らの成果を見て修正させるスキルなら、それができます。
これがチームにとって意味すること
- 強力なモデルからは正しさの押し上げを期待しないこと。評価が正しさしか確認しなければ、スキルは無意味に見えます。モデルがすでにこなすものを測っているからです。
- プロンプトだけでなくプロセスに投資すること。持続的な成果は、より長い指示ファイルからではなく、エージェントが実行しなければならない検証ループから生まれます。
- 原則ではなくセンスを出荷すること。吟味された、主張のある既定は、毎回、抽象的な助言に勝ります。
- ユーザーが体験する通りに品質を測ること — レンダリングし、見て、ブラインドで比較する。ブール値のチェックには美しさが見えません。
- そのための予算を確保すること。品質の高い出力にはより多くのトークンと時間がかかります。品質が肝心なところにそれを費やしてください。
提言：ギャップを埋める
この知見は、具体的なやることリストを指し示します。私たち自身のスキルスイートのためにも、これを構築するあらゆるチームのためにもです。
- ブラインド評価を拡大する。2つのタスクと1人のレビュアーは方向は証明しますが、規模は証明しません。ページタイプをまたいで10以上のタスクへ拡大し、2つ目のAI審査者を加え、少なくとも1人の人間レビュアーを含めてください。単一の評決ではなく、勝率と確信度を追跡すること。
- 内容だけでなく起動を調整する。起動しないスキルは無価値であり、間違ったタスクで起動するものはさらに悪いです。自動化された説明文の最適化パスを実行し、各スキルが起動すべきときに起動し、そうでないときは静かにしているようにしてください。
- プロセススキルを優雅に退化させる。ブラウザが利用できないとき、それを検知し、レンダリングできると仮定するのではなく、知識とチェックリストにフォールバックすべきです。そうすれば、最大のレバーを静かに失うことは決してありません。
- 重複するナレッジを統合する。8つのスキルは重複する表面をいくらか抱えています。モダンCSS、レスポンシブ性、パフォーマンスは同じ地面に触れます。境界を明確にすれば、プラットフォームの変化に応じて保守すべきものが減ります。
- 意図でルーティングする。品質が目標のときは重いレンダリング・反復ループを使い、「正しいコードを速く」のときはそれをスキップしてください。最大の無駄は、使い捨ての社内ツールに作り込みレベルの計算資源を支払うことです。
- より弱いモデルで再測定する。ナレッジスキルは、ベースモデルの能力が低いところでより役立つはずです。それを確認することで、コスト重視の展開における真の価値が定量化されます。
SplatDevはこれをどう適用するか
これは私たちがクライアントのために行う仕事です。単にAIをコードベースに向けるだけでなく、その出力を確実に卓越したものにするスキル、ガードレール、検証ループを設計し、そしてその結果を仮定するのではなく誠実な評価で証明します。私たちは速度だけでなく品質を測り、成果があるところとないところをあなたにお伝えします。
ポートフォリオに載せられる成果を出荷するAIと、その限界についての誠実な説明が欲しいですか。
またはメールでご連絡ください：[email protected]