Frontend Design レビュー：生成物に見えない画面を作る Anthropic 公式スキル

AI が作るウェブページは大抵同じ見た目です。温かみのあるクリーム色の背景、セリフ体の見出し、テラコッタのアクセント。あるいはほぼ黒のページに酸っぱい緑のハイライトが1つ。あるいは製品が何であれ同じ丸角 SaaS カードと同じ柔らかい影。デフォルトがあまりに認識しやすくなり、ユーザーは AI 製のページを一秒で見分けます。

Frontend Design は、その問題に対する Anthropic の公式の答えです。Claude を作るチームによるデザインスキルで、公式の anthropics/skills リポジトリに収録されています。このリポジトリの GitHub スターは19万近く、skills.sh でのインストール数は約100万件。エコシステム全体でも最も使われているスキルの1つで、その助言はチェックリストではなく、現場で働くデザインリードの言葉のように読めます。

Frontend Design とは？

Frontend Design は SKILL.md 1つだけのスキルで、エージェントにあらゆる画面を、顧客ごとに distinct なビジュアルアイデンティティを与えることで知られるスタジオのデザインリードとして扱うよう求めます。ブリーフが主役です。題材、対象ユーザー、ページの仕事が、配色、書体、レイアウトを決めます。ブリーフが自由にしている軸があれば、エージェントはその自由を汎用的なデフォルトに費やすのではなく、美的なリスクを取るよう指示されます。

このスキルは、今の AI 生成デザインがどう見えるかについて異例なほど正直です。クリーム色とテラコッタのヒーローから、見出しの上に必ず付く全大文字のラベルまで、紋切り型を1つずつ名指しし、ブリーフが本当にその見た目を求めていない限り手を出さないよう禁じています。

主な機能

1. 避けるべき見た目を名指ししたリスト

スキルは最もよくある AI デザインの特徴を列挙します。テラコッタのアクセント付きクリーム色の背景、酸っぱい緑のほぼ黒のページ、罫線の細い新聞風レイアウト、同じ SaaS カードキット、装飾としてのグラデーション。名前を挙げることで、避けられるようになります。

2. 題材から始まるデザインの方向性

コードを書く前に、エージェントは題材に根ざしてデザインしなければなりません。製品が何か、誰のためか、ページが何をしなければならないか。子ども向けのおもちゃと金融アナリスト向けダッシュボードが同じ扱いを受けるべきではなく、スキルはそのことをはっきり述べています。

3. 2段階のプロセス：計画してから作る

まず色、書体、レイアウト、原則のトークンシステムを持つコンパクトなデザインプランを作り、短い文章と ASCII ワイヤーフレームで描きます。プランをブリーフに照らして汎用的なデフォルトに読める部分がないか確認し、修正してからコードにします。

4. 個性としてのタイポグラフィ

書体がページの個性を担います。スキルは具体的なルールを示します。1つか2つの書体で、2つなら明確に区別すること。行の長さは80文字未満。見出しで単語だけに色付けのアクセントを付けないこと。内容の上に不要なラベルを置かないこと。コピーは装飾ではなくデザインの内容として扱います。

5. 節度と自己批判

大胆さは1か所に使い、他は静かで抑制的に。品質の土台を守りつつ、それを声高に言わないこと。モバイルまでのレスポンシブ、見えるキーボードフォーカス、視差を減らす設定への配慮、アクセシブルな配色。エージェントは作りながら自分の仕事を批判し、環境が許せばスクリーンショットを撮って確認するよう指示されます。

使い方

skills CLI でインストールします。以下のコマンドは Anthropic 公式リポジトリからこのスキルだけを取得します。

npx skills add https://github.com/anthropics/skills --skill frontend-design

その後、作りたいページを普段の言葉で説明します。何のためのものか、誰が使うかも含めてください。エージェントはまずデザインを計画し、プランをブリーフに照らして確認してから作ります。結果にフィードバックを出せば、コードだけでなくプランを修正してくれます。同じリポジトリから Claude Code プラグインとしてもインストールできます。

誰におすすめか

エージェントにランディングページ、ダッシュボード、プロトタイプ、マーケティングサイトを作らせる人なら誰でも入れるべきです。デザイナーなしでページを出す創業者や個人開発者、AI 製のページがどれも同じテンプレートに見えることにうんざりしているチームに特に価値があります。純粋なバックエンド作業では発動しないので、入れておいてもコストはありません。

料金

Frontend Design のインストールと利用は無料で、スキル自体にお金はかかりません。ただし1つ条件があります。anthropics/skills リポジトリはソースアベイラブルであって、オープンソースではありません。ライセンスファイルはプロプライエタリで、利用はあなたと Anthropic との契約に従います。資料をコピーしたり、Anthropic のサービス外にコピーを保持したり、派生物を作ったり配布したりすることはできません。文章を他で再利用する前にライセンスファイルを読んでください。

長所と短所

長所：Claude の背後にいるチームが書いたので、助言はモデルの実際の動きに合っています。陳腐な表現を避けるリストだけでも入れる価値があります。コード直行ではなく本物の2段階プロセスです。約100万件のインストールがあり、助言は実戦で鍛えられています。

短所：ライセンスはプロプライエタリなソースアベイラブルで、MIT や Apache ではなく、再配布が制限されます。精神的には Claude 優先なので、他のエージェントでの結果は変わります。曖昧なブリーフは直せず、推測せず質問してきます。出力は結局、モデルがプラン通りに従うかどうかに依存します。

最終評価

Frontend Design は、エージェントでウェブページを出す人にとって最もレバレッジの高いスキルです。ツールを追加するのではなく、エージェントが作るものすべてのセンスを変えます。次のランディングページの前にインストールし、前回出したページと比べてみてください。GitHub で試す：anthropics/skills。