詳細を読む
Vercelは、コーディングエージェントが自社ブランドに沿ったページを生成できるよう導く公開ファイル「design.md」を発表しました。提案書やレポートなど社外ツールで作られる一回限りのページでも、自社サイトと同じ配色・タイポグラフィ・構成に仕上がるようにする狙いです。検証の結果、design.mdを読み込ませたページは崩れが大きく減ったといいます。
当初、同社は社内リポジトリで使う「product-design」スキルをそのまま公開プロンプト化しようとしました。しかし文章だけでは各モデルの解釈がばらつき、同じ指示でも生成されるページが大きく異なってしまいました。そこで既存資料の転用をやめ、実際の出力を見ながら一から書き直す方針に切り替えました。
完成したdesign.mdは、指針・スタイルシート・評価ループの3層構造で機能します。design.mdが読者像や構成の判断基準を示し、公開スタイルシート「vercel-brand.css」がクラス名とトークンを固定し、評価ループが人手のレビューを次の改善に反映させる仕組みです。
効果を確かめるため、同社はCodexのGPT-5.5にレポートなど3種類のページをそれぞれ2回生成させ、既知の失敗パターンの発生回数を数えました。design.mdを読み込ませた場合の失敗は39件にとどまり、読み込ませなかった場合の91件から57%減ったといいます。全体では200回を超える生成テストを重ねて指針を磨き上げました。
公開後も精度を保つため、社内SlackのAIエージェント「@design-agent」を通じた日常利用からフィードバックを集めています。毎週寄せられる指摘を自動で分類し、繰り返し起きる不満を新たなルールやチェックとして反映する運用を続けているといいます。
Vercelはdesign.mdとひな形となるSlackエージェントのテンプレートを一般公開しており、他社も同じ手法で自社版を構築できるとしています。同社自身もv0やCodex、Claudeなど複数のツールに日常的にdesign.mdを読み込ませ、ブランドに沿った成果物作りに役立てています。