Vercelに学ぶプロダクトデザインagentの育て方

これは「AIにデザインを丸投げする」記事ではない

Vercelの記事は、agentにプロダクトデザインのセンスを直接移植する話というより、チームの暗黙知をagentが使える形に変える話として読むと実務に落とし込みやすい。

agentに「きれいにして」と頼むだけでは、表面的には整っていても、プロダクトの目的や既存UIの文脈に合わない画面になりやすい。必要なのは、なぜそのUIが必要なのか、どの情報を優先するのか、どのパターンを避けるのかを渡すことだ。

Vercelが示している方向性は、プロダクトデザイン原則、UIパターン、コンポーネントの使い方、良い例と悪い例、レビュー時の観点を、agent向けの学習材料として整えることにある。

AI agentを使えば画面を作る速度は上がる。しかし、速く作れることと、ユーザーの作業を助ける画面になることは別問題である。

実務上の要点は、プロンプトを毎回長くすることではなく、繰り返し使う判断基準を外部化することだ。何を良いデザインとみなすか、何を避けるか、どのコンポーネントをどの場面で使うか、レビューではどこを見るかを残しておく。

agent向けに判断基準を整理すると、新人や他職種のメンバーにも同じ基準を共有しやすくなる。

一度の指摘で終わらせず、次回も使えるルールや悪い例に変えると、同じ失敗を減らせる。

「美しく」「モダンに」ではなく、判断に使える言葉にする。たとえば、説明より操作を先に見せる、ダッシュボードでは装飾より情報密度を優先する、空状態は次の行動を1つだけ示す、といった粒度がよい。

一覧、詳細、編集フォーム、空状態、エラー状態、読み込み状態、設定画面、確認ダイアログのように、よく使う型を言語化する。agentに「これは設定画面」「これは一覧画面」と渡せるだけで、出力のぶれは減る。

良い例だけでなく、避けたい例が重要になる。カードの中にカードを入れない、操作UIに大きなヒーロー見出しを置かない、内部向けの説明文をユーザー画面に出さない、といった禁則はagentへの制約として効く。

このvaultや.html-outputの運用では、agentに毎回細かく説明するより、「このリポジトリではこういうUIがよい」という知識をrepo、skill、AGENTS.mdに置くほうが強い。

次にUIを依頼するときは、最低限次の4点を渡す。

完了時には、良かった点ではなく「次回も守るべき具体ルール」と「次回避けるべき具体失敗」を1つずつ残す。これを積み上げるほど、agentは単発の作業者ではなく、プロダクトの作法を知る作業者に近づく。

Source	Use
Vercel: Teaching agents product design at Vercel	agentにプロダクトデザイン原則、UIパターン、レビュー観点を教える実践の確認。