Webデザイン向けの Agent Skills
Webデザインのスキルは、サイトを訪問者が実際に使えるものに変える作業をカバーします。これはいくつかの認識しやすい領域に分かれます。情報アーキテクチャ——ページの地図とそのつながり方、ユーザーエクスペリエンス——訪問者が来た目的を達成できるか、ビジュアルデザイン——サイトが一貫した表面としてどう見えるか、レスポンシブレイアウト——小さな画面で壊れずに再配置されるレイアウト、アクセシビリティ——マウスだけでなく支援技術でも操作できること、コンテンツデザイン——ページに投げ込むのではなくページのために設計された言葉とメディア、インタラクションデザイン——ユーザーが操作したときの状態、動き、フィードバック。ランク付けされたリストは、現在のボトルネックをこれらの領域の1つに照合して使い、読み込む前にそのスキルの説明がその領域に対応していることを確認しましょう。
8 件から開始47 件のおすすめ候補
まずはこちらから。
Web design decomposes the same way as website design: structure, experience, visuals, responsiveness, and access — then the content and interactions that live on top.
関連性の高い結果です。Skill の説明を読み、目的に合うか確認してください。
- 順位 01Agent Skill を見る直接一致
impeccable
ウェブサイト、ダッシュボード、プロダクトUI向けのフロントエンドインターフェースデザインスキル。形状、批評、監査、仕上げ、レイアウト、タイポグラフィ、色、モーション、アクセシビリティ、レスポンシブ挙動、デザインシステムを網羅します。
前提条件（自己申告）: Node.js
319,215 · 人気度 - 順位 02Agent Skill を見る直接一致
ui-ux-pro-max
スタイル、パレット、フォントの組み合わせ、UX ガイドライン、アイコン、チャート、および Web・モバイル・デスクトップインターフェース向けのスタック別実装を網羅する、検索可能な UI/UX デザイン知見。
386,243 · 人気度 - 順位 03Agent Skill を見る直接一致
redesign-existing-projects
既存のWebサイトやアプリを監査し、ありがちなAIデザインパターンを検出し、機能を壊さずにハイエンドなタイポグラフィ、色、サーフェス、レイアウトのアップグレードを適用。
418,259 · 人気度 - 順位 04Agent Skill を見る直接一致
interface-design
ダッシュボード、管理パネル、SaaSアプリ、ツール、データインターフェース向けのクラフト重視のインターフェースデザインスキル。視覚的階層、トークン、状態、デザインシステムの一貫性をカバー。
28,822 · 人気度 - 順位 05Agent Skill を見る直接一致
frontend-design-direction
ウェブサイト、ダッシュボード、アプリ、コンポーネント向けに製品固有のフロントエンドデザインの方向性を設定し、目的、対象、トーン、階層、タイポグラフィ、色、モーション、レスポンシブ制約を扱う。
6,663 · 人気度 - 順位 06Agent Skill を見る直接一致
image-to-code
セクション設計画像を生成し、深く分析したうえでそれに合わせてフロントエンドを実装する、画像ファーストのWebサイト設計ワークフロー。プレミアムなランディングページやマーケティングサイト向け。
350,805 · 人気度 - 順位 07Agent Skill を見る直接一致
huashu-design
プロトタイプ、スライド、アニメーション、ビジュアライゼーション向けのHTMLベースの高忠実度デザインスキル。三方向のドラフトゲート、アートディレクションの役割、専門家による批評ワークフローを備えます。
47,980 · 人気度 - 順位 08Agent Skill を見る直接一致
ux-heuristics
Nielsenヒューリスティクス、Krugの法則、重大度評価、認知ウォークスルー、ダークパターン認識を用いてインターフェースのユーザビリティを評価・改善する。
7,967 · 人気度
ほか 39 件の Agent Skills を表示
- 順位 09Agent Skill を見る直接一致
imagegen-frontend-web
ランディングページや製品コンペ向けに、構成の多様性、一貫したパレット、コンバージョンを意識したアートディレクションを備えた、セクションごとのプレミアムなウェブサイトデザイン参考画像を生成します。
346,401 · 人気度 - 順位 10Agent Skill を見る直接一致
penpot-uiux-design
MCPツール経由でPenpotによるプロフェッショナルなUI/UXデザインを作成するためのガイド。デザインシステム、コンポーネント、ダッシュボード、フォーム、ナビゲーション、ランディングページ、アクセシビリティを網羅する。
12,684 · 人気度 - 順位 11Agent Skill を見る直接一致
interaction-design
マイクロインタラクション、モーションデザイン、トランジション、ローディング状態、ユーザーフィードバックのパターンを、タイミングとイージングの指針とともに設計・実装します。
15,330 · 人気度 - 順位 12Agent Skill を見る直接一致
site-architecture
Webサイトのページ階層、ナビゲーション、URL構造、内部リンクを計画するための情報アーキテクチャ専門スキル。サイトタイプ別テンプレートと階層設計のガイダンス付き。
113,956 · 人気度 - 順位 13Agent Skill を見る直接一致
accessibility-compliance
ARIAパターン、キーボードナビゲーション、フォーカス管理、スクリーンリーダー対応、インクルーシブデザインの実践を用いてWCAG 2.2準拠のインターフェースを実装する。
14,016 · 人気度 - 順位 14Agent Skill を見る直接一致
accessibility
Web、iOS、AndroidにわたるWCAG 2.2 AA準拠のアクセシブルなUIを設計、実装、監査する。ARIAロール、フォーカス管理、コントラスト、ターゲットサイズ、スクリーンリーダーを網羅。
8,244 · 人気度 - 順位 15Agent Skill を見る直接一致
wcag-audit-patterns
自動テスト、手動検証、POUR原則、重大度評価、改善ガイダンスを用いてWCAG 2.2アクセシビリティ監査を実施。
11,974 · 人気度 - 順位 16Agent Skill を見る直接一致
web-typography
Web書体の選定、組み合わせ、実装に関する実践ガイド。可読性、レスポンシブタイポグラフィ、フォント読み込み、階層、パフォーマンスを扱う。
8,413 · 人気度 - 順位 17Agent Skill を見る直接一致
ui-styling
shadcn/uiコンポーネント、Tailwind CSSユーティリティスタイリング、レスポンシブレイアウト、テーマ設定、ダークモード、デザインシステムトークンでアクセシブルなUIを構築する。
32,431 · 人気度 - 順位 18Agent Skill を見る直接一致
apple-design
Apple の流動的インターフェースデザインと物理モーションの原則を Web に翻訳し、ジェスチャー駆動 UI、スプリング、ドラッグ/スワイプ/シートのインタラクション、マテリアル、タイポグラフィ、低モーション設定を網羅する。
193,107 · 人気度 - 順位 19Agent Skill を見る直接一致
information-architecture
ビジュアルデザインの前に、製品やサイトの構造レイヤーを定義する。ナビゲーション、コンテンツ階層、ページ構造、URLパターン、ユーザーフローを扱う。サイト構造の計画、ナビゲーションの定義、ユーザーフローのマッピング、コンテンツの整理をしたい場合、または「IA」や「information…」に言及した場合に使用。
5,661 · 人気度 - 順位 20Agent Skill を見る直接一致
web-design-reviewer
このスキルはローカルまたはリモートで動作するWebサイトを視覚的に検査し、デザイン問題を特定・修正できるようにする。「review website design」「check the UI」「fix the layout」「find design problems」などのリクエストでトリガー。レスポンシブデザイン、アクセシビリティ、視覚的一貫性などの問題を検出…
13,744 · 人気度 - 順位 21Agent Skill を見る直接一致
web-design-engineer
HTML/CSS/JavaScript/Reactで、洗練されたブラウザレンダリングの視覚成果物を構築または再設計。ページ、ダッシュボード、プロトタイプ、スライドデッキ、アニメーション、UIモックアップ、データ可視化。視覚的なフロントエンド作成、デザインシステムの探索、デザイン批評、明示的なブラウザ受け入れ/…に使用。
7,763 · 人気度 - 順位 22Agent Skill を見る直接一致
high-end-visual-design
AIにハイエンドエージェンシーのようなデザインを教える。ウェブサイトを高級感のあるものにする正確なフォント、余白、シャドウ、カード構造、アニメーションを定義。AIデザインを安っぽく凡庸に見せる一般的なデフォルトをすべてブロック。
420,662 · 人気度 - 順位 23Agent Skill を見る直接一致
frontend-design
公式新規UI構築時や既存UI再形成時に、際立った意図的なビジュアルデザインを導く。美的方向性、タイポグラフィ、テンプレート然としない選択を支援。
765,703 · 人気度 - 順位 24Agent Skill を見る直接一致
web-design-guidelines
公式Web Interface Guidelines への準拠について UI コードをレビューします。「review my UI」「check accessibility」「audit design」「review UX」「check my site against best practices」と依頼されたときに使用します。
- 順位 25Agent Skill を見る直接一致
frontend-design-review
公式> 高いデザイン品質とデザインシステム準拠を備えた、際立つプロダクショングレードのフロントエンドインターフェースをレビューし作成する。3つの柱で評価する：摩擦のないインサイトからアクションへの流れ、品質あるクラフト、信頼できる構築。USE FOR: PRレビュー、デザインレビュー、アクセシビリティ監査、デザインシステム準拠チェック、クリエイティブなフロントエンドデザイン、UIコードレビュー、コンポーネントレビュー、レスポンシブデザインチェック、テーマテスト、記憶に残るUIの作成。DO NOT USE FOR: バックエンドAPIレビュー、データベーススキーマレビュー、インフラまたはDevOps作業、UIを伴わない純粋なビジネスロジック、フロントエンド以外のコード。
- 順位 26Agent Skill を見る直接一致
firecrawl-website-design-clone
Firecrawlのスクレイプ証拠を用いて、あらゆるウェブサイトのデザインシステムをエージェント対応のDESIGN.mdに抽出します。ユーザーがウェブサイトから色、フォント、スペーシング、コンポーネント、レイアウトパターン、ブランド/UIガイダンスを取得し、AIエージェントが新しいウェブサイトを作成したり、見た目をクローンしたり、その…にインスパイアされたページを構築できるようにしたい場合に使用します。
32,746 · 人気度 - 順位 27Agent Skill を見る直接一致
penpot-audit-accessibility
公式PenpotデザインをWCAG 2.1/2.2 AA（任意でAAA）に照らして監査し、構造化された重大度レポートを作成します。対象は色のコントラスト、タッチ/ターゲットサイズ、テキスト代替、見出し階層、キーボード/フォーカス順序です。修正案を提示しますが自動適用はしません。brief-to-screenループではEvaluatorとしても機能します。トリガー: 'check accessibility'、'accessibility audit'、'WCAG check'、'contrast audit'、'a11y review'、'check color contrast'、'is this accessible'。
- 順位 28Agent Skill を見る直接一致
antfu-design
注目antfuスタイルのデザイン規約を拡張。UnoCSSファーストで、ツールや開発者ツールUI向けのライト/ダーク両対応のクラスベースのセマンティックトークンに加え、ランディングページやプロダクト画面向けのデザイン読解、アンチスロップ、マイクロインタラクションの磨き込み。UnoCSSでインターフェースを構築またはリファクタリングする際に使用。
- 順位 29Agent Skill を見る一致の可能性
figma-generate-design
公式アプリケーションのページ、ビュー、または複数セクションのレイアウトをFigmaへ変換するタスクでは、figma-useと併用してこのスキルを使用します。トリガー例:「Figmaに書き出して」「コードからFigmaで作成して」「ページをFigmaにプッシュして」「このアプリ/ページをFigmaで構築して」「画面を作成して」「Figmaでランディングページを構築して」「コードに合わせてFigma画面を更新して」。ユーザーがコードや説明からFigmaで完全なページ、画面、ビューを構築または更新したいときは常に、このワークフロースキルが推奨されます。search_design_systemでデザインシステムのコンポーネント、変数、スタイルを発見し、それらをインポートし、ハードコードされた値ではなくデザインシステムのトークンを使ってセクションごとに画面を段階的に組み立てます。
- 順位 30Agent Skill を見る一致の可能性
figma-implement-design
公式Figmaデザインを1:1の視覚的忠実度で本番投入可能なアプリケーションコードに変換します。FigmaファイルからUIコードを実装する場合、ユーザーが「デザインを実装」「コードを生成」「コンポーネントを実装」と言及した場合、Figma URLを提供した場合、またはFigma仕様に一致するコンポーネントの構築を求めた場合に使用します。`use_figma`によるFigmaキャンバスへの書き込みには`figma-use`を使用します。
前提条件（自己申告）: Node.js
- 順位 31Agent Skill を見る一致の可能性
figma-create-design-system-rules
公式ユーザーのコードベース向けにカスタムデザインシステムルールを生成します。ユーザーが「create design system rules」「generate rules for my project」「set up design rules」「customize design system guidelines」と言った場合や、Figma-to-codeワークフロー向けのプロジェクト固有の規約を確立したい場合に使用します。Figma MCPサーバー接続が必要です。
前提条件（自己申告）: MCP server
- 順位 32Agent Skill を見る一致の可能性
penpot-design-md
公式PenpotファイルからDESIGN.mdデザインドキュメントファイルを抽出する：design-md形式のポータブルなMarkdown仕様（色・タイポグラフィ・角丸・スペーシング・コンポーネントのトークンマップを含むYAMLフロントマター＋Overview、Colors、Typography、Layout、Shapes、Components、Do's & Don'ts、Iteration Guide、Known Gapsの散文セクション）。ファイルの実際のトークン、ライブラリアセット、サンプリングしたコンポーネントスタイルに基づき、決して創作しない。キャンバスは読み取り専用で、ローカルのMarkdownファイルを1つ書き出す。トリガー：'generate DESIGN.md'、'create a design.md'、'document the design system as markdown'、'export design guidelines'、'extract design documentation'、'design system spec file'、'make a style guide file from this design'。
- 順位 33Agent Skill を見る一致の可能性
penpot-design-to-code-review
公式Penpotデザインを実装コード（ソースコンポーネントまたはStorybookストーリー）と照合してレビューし、構造化されたDRIFTレポートを出力します。エンジニアがビルドがデザインと一致するか確認する必要があるときに使用します。選択範囲からHTML/CSSを抽出し、そのトークン/構造/状態をコードコンポーネントにマッピングし、差分を取り、各側に欠けているものを重大度と調整案とともに列挙します。コードソースが提供されない場合は、デザインシステムトークンのチェックに優雅にフォールバックします。トリガー: 'design to code review'、'does my code match the design'、'design code parity'、'compare Penpot to my component'、'check this against Storybook'、'extract HTML/CSS from this selection'、'find design drift'、'design implementation diff'。
- 順位 34Agent Skill を見る一致の可能性
penpot-audit-tokens
公式Penpotデザインのデザインシステム／トークンガバナンス問題（アクセシビリティとは別）を監査する：トークンが存在するのにハードコードされた色、グリッドから外れた間隔、孤立／未解決／未使用のトークン、重複した値、コンポーネントインスタンスであるべき分離されたパーツ。重大度レポートを生成し、セマンティックトークンへの置き換えを提案する。トリガー：「audit tokens」「find hardcoded colors」「token governance」「check design system consistency」「find off-grid spacing」「detect raw values」「are we using tokens correctly」。
- 順位 35Agent Skill を見る一致の可能性
brand-guidelines
公式Anthropicの公式ブランドカラーとタイポグラフィを、Anthropicのルックアンドフィールが役立つあらゆる成果物に適用します。ブランドカラーやスタイルガイドライン、視覚的フォーマット、企業のデザイン標準が該当する場合に使用します。
- 順位 36Agent Skill を見る一致の可能性
theme-factory
公式テーマで成果物をスタイリングするためのツールキット。成果物はスライド、ドキュメント、レポート、HTMLランディングページなど。色やフォントを設定した10個のプリセットテーマがあり、作成済みの任意の成果物に適用できるほか、その場で新しいテーマを生成することも可能。
- 順位 37Agent Skill を見る一致の可能性
web-artifacts-builder
公式モダンなフロントエンドWeb技術（React、Tailwind CSS、shadcn/ui）を用いて、精巧で多コンポーネントのclaude.ai HTMLアーティファクトを作成するためのツール群。状態管理、ルーティング、shadcn/uiコンポーネントを必要とする複雑なアーティファクト向け — 単純な単一ファイルのHTML/JSXアーティファクトには向かない。
106,698 · 人気度 - 順位 38Agent Skill を見る一致の可能性
web-component-design
CSS-in-JS、コンポジション戦略、再利用可能なコンポーネント設計など、React、Vue、Svelteのコンポーネントパターンを習得。UIコンポーネントライブラリの構築、コンポーネントAPIの設計、フロントエンドデザインシステムの実装時に使用。
12,687 · 人気度 - 順位 39Agent Skill を見る一致の可能性
design
ブランドアイデンティティ、デザイントークン、UIスタイリング、ロゴ生成、CIPモックアップ、プレゼンテーション、バナー、アイコン、ソーシャル写真を網羅する統合デザインSkill。
34,174 · 人気度 - 順位 40Agent Skill を見る一致の可能性
extract-design-system
公開ウェブサイトからデザインプリミティブ（色、フォント、スペーシング、角丸、シャドウ）を抽出し、プロジェクトのデザインシステム用のスタータートークンファイルを生成します。
129,921 · 人気度 - 順位 41Agent Skill を見る一致の可能性
onboarding
初回体験、空の状態、チェックリスト、サインアップ後のユーザーフローにおけるタイム・トゥ・バリューの最適化を扱う、オンボーディングとアクティベーションの CRO スキル。
65,786 · 人気度 - 順位 42Agent Skill を見る一致の可能性
cro-methodology
ウェブサイトとランディングページのコンバージョン問題を監査し、エビデンスに基づく A/B テストを設計します。ファネルマッピング、説得アセット、反論処理を網羅。
5,526 · 人気度 - 順位 43Agent Skill を見る一致の可能性
performance
Core Web Vitals、クリティカルレンダリングパス、リソース読み込み、パフォーマンスバジェットをカバーする、エビデンス主導のWebパフォーマンス最適化スキル。計測ワークフローを伴う。
38,617 · 人気度 - 順位 44Agent Skill を見る一致の可能性
lark-apps
注目妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。
659,164 · 人気度 - 順位 45Agent Skill を見る一致の可能性
animation-vocabulary
ウェブのモーションエフェクトの曖昧な説明を正確なアニメーション用語に対応付ける逆引き用語集。エフェクトの設計や構築ではなく、命名のため。
194,627 · 人気度 - 順位 46Agent Skill を見る一致の可能性
firecrawl-workflows
構造化されたウェブデータ成果物（調査レポート、SEO監査、QAレポート、ウェブサイトデザインシステム）を生み出す、成果重視のFirecrawlワークフロー。
32,186 · 人気度 - 順位 47Agent Skill を見る一致の可能性
ui-taste
WebとiOSインターフェースの構築、再設計、批評、仕上げのためのアンチUIスロップ・プレイブック。レイアウト、階層、ディテールのワークフローと、任意の実プロダクト参照を備える。
452,376 · 人気度
このトピックの内容
各サブトピックは、特定の状況に合う Agent Skills をまとめたものです。
- Information architecture
- The map of pages and how they connect.
- User experience
- Whether a visitor can complete the job they came for.
- Visual design
- How the site looks as a coherent surface.
- Responsive layout
- Layouts that reflow instead of breaking on small screens.
- Accessibility
- Operable with assistive technology, not only a mouse.
- Content design
- Words and media designed for the page, not dumped into it.
- Interaction design
- States, motion, and feedback when the user acts.
よくある質問
- このリストはどのように並べられていますか？
- 観測された検索需要でランク付けされ、トピックに直接一致するものが先頭に配置されます。単一のパブリッシャーに上限を設けることで、1つの情報源がページを埋め尽くすのを防ぎます。
- どのサブトピックから始めるべきですか？
- 自分が名付けられる問題から始めましょう。不明瞭なページ構造は情報アーキテクチャを指し、小画面での壊れたレイアウトはレスポンシブレイアウトを指します。上のサブトピックはそれらの問題に直接対応します。
- 1つのスキルでこれらの領域のいくつかをカバーできますか？
- トピックは、構造、体験、ビジュアル、レスポンシブ、アクセスの各領域に分解され、さらにその上にコンテンツとインタラクションが乗ります。1つのSkillが複数の領域に関わることがあるため、必要な特定の領域と照らし合わせて説明を確認してください。
- これらのスキルはデザインの決定を置き換えますか？
- いいえ。これらはここに挙げられた領域（アーキテクチャ、UX、ビジュアルデザイン、レスポンシブレイアウト、アクセシビリティ、コンテンツデザイン、インタラクションデザイン）で機能します。サイトが何をすべきかは依然としてあなたが決めます。
Agent Skill のインストール方法
Agent Skills は SKILL.md ファイルです。適切な skills ディレクトリに置くと、多くのエージェントが自動で認識します。
- Claude Code — copy the SKILL.md for impeccable into ~/.claude/skills/impeccable/ for yourself, or .claude/skills/impeccable/ to share it with a project.
- From the registry — run npx skills add pbakaus/impeccable@impeccable.
- Or download impeccable from its source and place that SKILL.md in the directory above.
選び方 インストール前に出典と Skill 自身の説明を確認してください。Official と Notable は出所を示すラベルです。