サイトの「AIっぽさ」はどこから直す？ フロントエンド設計に使える10のAgent Skills

トップページの店名を隠しても、どこのサイトか分かるだろうか。書店とホテルとソフトウェア会社がメイン画像を入れ替えるだけで同じページを使えそうなら、まず構成を見直したい。書店でも、新刊発表なら表紙を主役にできる。対談なら、二人の登壇者と当日の問いから始められる。催しの中身が変われば、見せ場も変わる。

フロントエンド設計のスキルは、AIアシスタントに仕事の進め方を伝える指針だ。題材を読み解いて構図を考えるものも、動くページを点検するものもある。手元にあるのは原稿と写真、デザイン案、それとも操作しづらい箇所が残ったサイトだろうか。

利用実績、最近の動き、累計インストール数の三つの観点から各5件を選んだ。重複を除くと10種類のスキルまたはパッケージになる。編集部による選定で、世界的な品質順位を付けたものではない。確認日時は2026年11月12日10:27（台湾時間）。例は使い方を説明するためのもので、当サイトですべてを実測したわけではない。

これまでに利用実績のある5つのスキル

1. Anthropic Frontend Design ― 題材からページの姿を考える

Anthropic公式のスキル。製品、読者、ページの目的を押さえ、短い設計案を出してから書体、色、構成、動きを決める。企業サイト、ブランドページ、作品集などで、素材はあるが見せ方が決まっていないときに向いている。

書店なら表紙、講演紹介、申込案内を一緒に渡し、最初に何が目に入るかが異なる二案を頼める。選んだ案に実際の書名と登壇者名を入れ、スマートフォンでの改行と申込ボタンの位置を見る。ラフで気に入った案が、本物の原稿でも成り立つか確かめられる。 Anthropic Frontend Design

2. Vercel Web Design Guidelines ― 問題のファイルと行を特定する

ファイルやパスを指定すると、その時点のVercel Web Interface Guidelinesを取得し、操作性、アクセシビリティ、画面上の文言をコードと照合する。指摘にはファイル名と行番号が付くので、すでにあるページを調べやすい。

購入フォームは送信できても、入力を間違えたときに「エラーが発生しました」としか出ないことがある。ラベル、エラー表示、キーボード操作を調べてもらい、該当箇所を開いてもう一度わざと間違えてみよう。どの欄をどう直すか伝わるだろうか。 Vercel Web Design Guidelines

3. UI UX Pro Max ― ページをまたいでルールをそろえる

製品の種類、配色、書体、スタイル、UX指針を検索でき、フレームワーク別の資料もある。SaaS、管理画面、複数ページの製品に向く。予約なら日付選択、入力、確認と画面が変わっても、ボタンを見れば次へ進めること、説明とエラーを読み分けられることが大切だ。

「ブランドカラーとフォーム部品はそのまま。予約の大半はスマホから」と条件を渡して二案を頼む。狭い画面で読みやすいか、既存部品を使えるかを比べられ、単体ではきれいでも他のページから浮く配色を避けやすい。 UI UX Pro Max

4. Impeccable ― 既存画面の気になる箇所を一つずつ直す

個性のあるサイトでも見出し、注意書き、ボタンが一斉に目立つことはある。critique は体験を講評し、audit は技術面を点検する。typeset は文字の強弱、layout は配置を調整する。

設定画面の文字が全部太字で、どの部分にも枠があるなら、まず critique で読み違えやすい場所を探し、そこだけ typeset を試す。変更前後の表示を並べ、設定を見つけやすくなったかを見る。実際に描画した画面で確かめたい。現在の名称は impeccable。このプロジェクトの旧名 frontend-design は廃止されている。 Impeccable

5. Emil Design Engineering ― 静止画に映らない操作感を調べる

見た目は問題がなくても、触ると反応が一拍遅い。そんなときに扱うのが、押した瞬間の反応、表示と終了のタイミング、動きが途中で中断されたときの挙動、タッチ端末でのホバー効果だ。

メニューを開いてすぐ閉じたら引っ掛からないか。「視差効果を減らす」などの設定でも開閉の区別が付くか。画面構成が決まり、違和感のある操作を一つ挙げられるなら、ページ全体を描き直すより試しやすい。修正後は実機で何度か操作しよう。 Emil Design Engineering

最近注目したい5つの動き

1. Impeccable 4.8.2 ― インストール、更新、設定の改善

11月9日公開の4.8.2は、先ほどのImpeccableの更新版。導入、更新、初期設定の手順が改善された。利用中なら新しい設定方法を、初めてなら一画面で critique を試すとよい。取り上げた二件は同じツールだ。 Impeccable

2. Aesthetic Frontend Skills ― 好きなスタイルのどこが好きかを言葉にする

11月5日に作者が紹介した実験的なパッケージ。aesthetic-literacy がスタイルを見分けて意味を明確にし、aesthetic-application が配色、書体、CSS変数、部品の実装指針に落とし込む。

「Y2K風で」と言っても、頭に浮かぶ画面は人によって違う。参考画像を見ながら、取り入れたいのは文字なのか、色なのか、質感なのかを決め、ボタン、背景、見出しに反映する。ブランドの方向を探る段階に向く。部品全体の設計とアクセシビリティの検証は別に行う。 Aesthetic Frontend Skills

3. RC’s Frontend Skill ― 改装後も使える機能を残す

作者が11月3日に紹介。プロジェクトの調査から視覚設計、実装、納品時の確認までをつなぐ。稼働中の製品なら最初の調査が効く。部品がどこからデータを取り、フォームが何を検証し、どの状態を改装後にも残すべきかを調べる。

ダッシュボードなら既存のAPIと入力検証を維持し、実際にテストした状態を報告するよう頼める。新旧の画面だけでなく、読み込み中、結果なし、送信失敗の表示も比較できる。ソースを読めることと、検証を実行できる環境が前提になる。 RC’s Frontend Skill

4. Form & Force ― スケッチを比べてから作り込む

11月3日に作者が紹介した。プロジェクトと題材を読み、何枚かのスケッチから案を選んで書体、色、画像、動きを決める。コーヒー店なら商品写真を主役にする案と産地の話から始める案では必要な素材が違う。描き込む前に手元の写真でどちらが成立するか話せる。

機能、レスポンシブ表示、アクセシビリティ、性能も確認する。スケッチの描画とブラウザー検証にはPlaywrightとChromiumが必要だ。作者によれば効果の正式な比較評価はまだない。まず商品ページ一枚で、スケッチが判断に役立つか試したい。 Form & Force

5. taste-skill-v3 ― 構成、スタイル、素材を分けて計画する

10月30日に公開紹介された、growing7696-cmykによる独立した第三者の派生版。Taste Skillに着想を得ているが原作者の公認ではない。v3という名称はこの派生版のもの。元のTaste Skillは次節で扱う。

設計エンジン、スタイル、作業手順、素材を分けて扱う。製品トップの構造を選び、素材の予算を決め、画面、アクセシビリティ、性能を確認できる。各段階を自分で管理したい人向けで、設定項目も多い。エンジンは taste-core の導入を前提とし、一部の検証にはブラウザーなども必要だ。納品時には実行記録を確認できる。 taste-skill-v3

累計インストール数が多い5つのスキル

確認時点でskills.shに表示された個別スキルの累計インストール数を掲載した。数値は変動する。導入への関心を見る目安であり、利用者の実人数、話題になった回数、設計品質を表す数値ではない。

Taste Skill ― デザインを決めたらブラウザーで開いてみる

表に載せたのはLeonxlnxの design-taste-frontend。サイトの種類に合わせて配色、書体、構成、写真、動きを計画し、付属スクリプトで画面幅を変えながら配置、素材、文言、性能を点検する。

ブランドサイトに残るAIテンプレートらしさを減らし、何度も同じ観点で確認したい人に向く。小さな宿なら、どの写真ならその宿だと分かるか。部屋の紹介と予約案内をどこに置くか。デスクトップ版ができたらスマホで被写体が切れないか、予約ボタンが見つかるかを見る。実際の宿を写した写真か、使用権があるかは自分で確認する。スクリプトにはNode.js 22以上とChrome、EdgeまたはChromiumが必要だ。 Taste Skill

最初の一つは、今あるものから選ぶ

原稿と写真だけならAnthropic Frontend Design。 一ページに絞り、実際の素材、見る人、してほしい行動を伝えよう。「週末の新刊トークで、スマホから見る人が大半です。この表紙と登壇者紹介を使い、申込先が分かるトップを二案ください」。どちらがその催しらしいかを選ぶところから始められる。 Anthropic Frontend Design

画面はあるが、どこが読みにくいのか分からないならImpeccable。 一番気になる箇所を critique で解説してもらい、自分でも納得できる問題を一つ選ぶ。全部が見出しに見えるなら typeset だけで文字の強弱を整える。覚えたコマンド数より、修正前後を並べて必要な情報を早く探せるかで判断しよう。 Impeccable

動くサイトがあり、基本的なコードを読めるならVercel Web Design Guidelines。 一つのフォームに絞り、ラベル、エラー表示、キーボード操作を点検する。指摘を一つ再現し、直した後に同じ手順を試す。キーボードだけで完了できる、間違えた欄がすぐ分かるといった結果なら、自分で確かめられる。 Vercel Web Design Guidelines