こんにちは。

AIエージェントSkillsシリーズ、今回はWebデザインの領域です。前回のWeb制作編では「デザイン→実装→テスト→デプロイ」の全体像を整理しましたが、今回はその中でも「デザイン」にフォーカスして深掘りします。

Webデザイン系のSkillsは、整理してみるとかなり見通しがよくなっていて、「Figma起点」「見た目づくり」「ブランド準拠」「デザインレビュー」の4軸で切ると、役割がきれいに分かれます。

この記事では、2026年3月時点でWebデザインに使えるSkills 11個を整理しました。「デザインまわりのAI活用がいまいちうまくいかない」という方は、記事後半の組み合わせパターンから試してみてください。

Skills（SKILL.md）とは — AIエージェントの「得意分野」を定義するファイル

Skills（スキルズ）とは、AIエージェントに「このプロジェクトではこういうルールで、こういう技術を使って、こういう品質基準で仕事してね」と伝えるための設定ファイルです。

具体的には、プロジェクトのルートに SKILL.md というMarkdownファイルを置きます。中身はただのテキストなので、特別なツールは不要です。

たとえば「Reactのベストプラクティスに従ってコードを書いてほしい」というSkillを入れると、AIエージェントはReactの設計原則を守った提案をしてくれるようになります。プロンプトに毎回同じことを書かなくてよくなるわけです。

2026年に入ってから、OpenAI・Vercel Labs・Anthropic・GitHubなどがSkillsを公式に公開し始めていて、GitHubからダウンロードしてそのまま使える状態になっています。

つまり、自分でプロンプトを試行錯誤しなくても、プロが作ったSkillを置くだけでAIの出力品質が上がる。これが「楽してAIを使う」の本質です。

Skillsの仕組みや導入方法をもっと詳しく知りたい方は、Skills（SKILL.md）とは？AIの出力を”置くだけ”で変えるファイルの使い方をご覧ください。

Webデザイン系Skillsの整理軸 — 4つの役割で見る

Webデザイン系のSkillsは、以下の4つの軸で整理するとわかりやすくなります。

軸	役割	主な提供元
Figma起点	Figmaからデザイン情報を取得し、実装につなげる	OpenAI、サードパーティ
見た目づくり	UIの完成度や差別化を意識して設計・実装する	Anthropic、サードパーティ
ブランド準拠	ブランドカラーやタイポグラフィを統一する	Anthropic、Vercel Labs
デザインレビュー	デザインシステム準拠やa11yの観点で品質をチェックする	Microsoft、サードパーティ

2026年3月時点での提供元ごとの担当領域は、かなりはっきり分かれています。

• OpenAI — Figma → 実装
• Anthropic — 見た目づくり、ブランド準拠
• Vercel Labs / Microsoft — デザインレビュー
• サードパーティ — Figma操作、Figmaレビュー、実装差分の検出

では、それぞれ見ていきます。

公式・準公式のSkills 6選

まずはベンダー公式や公式コミュニティが提供しているSkillsです。メンテナンスの安定感があるので、迷ったらまず公式から入れるのがおすすめです。

Figma起点（OpenAI）

1. Figma実装

FigmaのMCPを使ってデザイン情報・variables・assetsなどを取得し、実装につなげるためのSkillです。デザイナーから渡されたFigmaファイルの構造を、AIが理解した上でコードに落とし込めるようになります。
GitHub: openai/skills – figma

2. Figma実装・デザイン反映

Figmaからproduction-readyなコードへ仕上げるためのSkillです。上の「Figma実装」がデザイン情報の取得に重点を置くのに対し、こちらはコードへの変換・反映にフォーカスしています。
GitHub: openai/skills – figma-implement-design

この2つはセットで入れるのが基本です。figmaでデザイン情報を読み取って、figma-implement-designでコードに変換するという流れが自然につながります。Figmaからのコーディングをやっている人は、まずこの2つから試してみてください。

見た目づくり・ブランド準拠（Anthropic）

3. フロントエンドデザイン

無難なUIに寄りすぎず、見た目の完成度や差別化まで意識して設計・実装を補助するSkillです。AIが生成するUIって「動くけどダサい」ことが多いですが、このSkillはそこを改善してくれます。
GitHub: anthropics/skills – frontend-design

4. ブランドガイドライン準拠

ブランドカラー、タイポグラフィ、表現ルールに沿ってUIや文章を整えるためのSkillです。複数人で制作していると「色やフォントがバラバラ」になりがちですが、このSkillを入れておくとAIがブランドガイドラインに沿った提案をしてくれるようになります。
GitHub: anthropics/skills – brand-guidelines

Anthropicの2つは、「AIの出力が無難すぎる」「ブランドトーンがぶれる」という悩みにピンポイントで効くSkillsです。特にfrontend-designは、見た目の「美意識」をAIに持たせるという発想が新しい。

デザインレビュー（Vercel Labs・Microsoft）

5. Webデザインガイドラインレビュー（Vercel Labs）

UIコードをデザイン / UX / アクセシビリティの観点でレビューするSkillです。コードレビューではなく「デザインガイドラインに沿っているか」の観点でチェックしてくれるのがポイント。
GitHub: vercel-labs/agent-skills – web-design-guidelines

6. フロントエンドデザインレビュー（Microsoft）

デザインシステム準拠、レスポンシブ対応、アクセシビリティ、UI品質の観点でレビューするSkillです。Vercel Labsの上記Skillと合わせて使うと、デザインレビューの網羅性が上がります。
GitHub: microsoft/skills – frontend-design-review

レビュー系のSkillsは、自分では見落としがちな「デザインの一貫性」や「アクセシビリティ」を自動で拾ってくれるのが大きな価値です。デザイナーがいないプロジェクトでも、一定の品質基準を維持できます。

サードパーティのおすすめSkills 5選

公式だけでなく、個人やコミュニティが公開しているSkillsにも実用的なものがあります。公式に比べるとメンテナンスの継続性は不確定ですが、中身がしっかりしているものは積極的に使って問題ありません。

7. Figma操作（dannote / figma-use）

FigmaをCLIから操作して、要素の作成・修正・エクスポートなどを行うためのSkillです。公式のfigmaが「読み取り」寄りなのに対し、こちらは「操作」に重点を置いています。Figma上でデザインを直接いじりたい場面で使います。
GitHub: dannote/figma-use

8. Figmaデザインレビュー（shomtsm）

Figmaのデザインをエンジニア観点でレビューし、Figma上にコメントを残すためのSkillです。「この要素、実装しづらいんだけど…」という指摘をAIが自動で行ってくれます。
GitHub: shomtsm/figma-review-skill

9. フロントエンドデザイン原則（joshuadavidthomas）

意図のあるUIを作るための設計原則をまとめたSkillです。「なんとなくそれっぽいUI」ではなく、「なぜこの配置なのか」「なぜこの余白なのか」を意識した提案をAIがしてくれるようになります。
GitHub: joshuadavidthomas/agent-skills – frontend-design-principles

10. デザイナー系Skill（joeseesun）

UI / UXの見た目改善やビジュアルpolishを進めるためのSkillです。「だいたいできたけど、もう少し洗練させたい」というフェーズで使うと効果的。最後の仕上げに向いています。
GitHub: joeseesun/claude-designer-skill

11. デザイン差分検出（nonlinear）

Figmaや仕様と実装済み画面との差分を洗い出すためのSkillです。「Figmaの通りに実装したつもりが、微妙にズレている」という問題を自動で検出してくれます。
GitHub: nonlinear/skills – design-discrepancy

実務で強い「組み合わせ」4パターン

Skillsは単体で入れても効果がありますが、役割の異なるものを組み合わせると、作業の「つなぎ目」がなくなって一気に楽になります。

Webデザイン領域で「これは強い」と感じた4つの組み合わせを紹介します。

パターン1 — Figma起点で実装までつなぐ

• figma（Figmaのデザイン情報を読み取る）
• figma-implement-design（production-readyなコードに変換）
• figma-use（Figma上の操作も自動化）

Figmaからの情報取得→コード変換→Figma上での微調整まで、一連のFigmaワークフローをSkillsでカバーする組み合わせです。デザイナーとの連携が多い現場では、Figmaまわりの手作業がかなり減るはずです。

パターン2 — 見た目の完成度を上げる

• frontend-design（見た目の美意識・差別化）
• frontend-design-principles（設計意図のあるUI）

Anthropic公式の「美意識」とサードパーティの「設計原則」を組み合わせることで、AIが生成するUIが「動くけどダサい」から「意図のある、洗練されたデザイン」に変わります。デザイナーがいないプロジェクトで特に効果を発揮します。

パターン3 — ブランド準拠で整える

• brand-guidelines（ブランドカラー・タイポグラフィ統一）
• web-design-guidelines（デザインガイドライン準拠のレビュー）

ブランドルールを守りながら、デザインガイドラインにも準拠しているかをチェックする組み合わせです。コーポレートサイトやサービスサイトなど、ブランドの一貫性が重要なプロジェクトで特に効きます。「色がなんか違う」「フォントがバラバラ」という事故を未然に防げます。

パターン4 — レビュー工程を強くする

• frontend-design-review（デザインシステム準拠・a11yレビュー）
• figma-review-skill（Figmaデザインのエンジニア観点レビュー）
• design-discrepancy（Figmaと実装の差分検出）

「作る」だけでなく「チェックする」側を強化する組み合わせです。Figma上のレビュー、コード上のレビュー、そしてFigmaと実装のズレ検出まで、レビュー工程を三重にカバーできます。品質事故を減らしたいチーム開発に向いています。

導入時の注意点

Webデザイン系のSkillsを使うときに、いくつか注意しておきたい点があります。

• Figma系SkillsはFigma MCPとの連携が前提 — figmaやfigma-useを使うには、Figma側のMCP設定が必要です。Skillを入れるだけでは動きません
• brand-guidelinesは自分で中身をカスタマイズする必要がある — Skill自体はテンプレートなので、自社のブランドカラーやフォント情報を書き込んで初めて機能します
• サードパーティ製はメンテナンス状況を確認する — 個人開発のSkillsは更新が止まることもあります。GitHubの最終更新日やIssueの状況をチェックしておきましょう
• 全部入れる必要はない — 11個すべてを入れるとAIのコンテキストが長くなりすぎます。まずは自分のワークフローに合う2〜3個から始めるのがおすすめです

まとめ

というわけで、2026年3月時点でWebデザインに使えるAIエージェントSkillsを11個紹介しました。

ポイントを振り返ると:

• Webデザイン系Skillsは「Figma起点」「見た目づくり」「ブランド準拠」「デザインレビュー」の4軸で整理できる
• 公式6個 + サードパーティ5個で、デザインワークフローの主要な場面をカバーできる
• 単体よりも「組み合わせ」で入れると、作業のつなぎ目がなくなって楽になる
• まずは自分のワークフローに合う2〜3個から始めるのがおすすめ

前回のWeb制作編と比べて感じたのは、「作る」だけでなく「レビューする」「ズレを見つける」側のSkillsがかなり充実してきたということです。AIにデザインを「作らせる」だけでなく、「チェックさせる」使い方が現実的になってきています。

Skillsの仕様は変化が速いので、この記事は定期的に見直して更新していく予定です。他のカテゴリ（コーディング・テスト・デプロイなど）のSkillsも順次整理していきますので、そちらもチェックしてみてください。

※ 本記事の情報は2026年3月9日時点のものです。各Skillsの仕様や公開状況は変更される可能性があります。最新情報は各GitHubリポジトリをご確認ください。