アプリ設計向けの Agent Skills
アプリデザインのスキルは、コードの前と周辺で行われる作業をカバーします：アプリが誰のためのものか、その人たちが代わりに何をしているかのリサーチ、重要なジョブごとに画面を通る道筋をマッピングするフロー、フローが固まった後に各画面の見え方を決めるUI、エンジニアリングがコミットする前にタップできるものを形にするプロトタイプ、人々がプロトタイプを試すのを観察してどこでつまずくかを見るユーザビリティセッション、そしてエンジニアリングにアートボードの山ではなく一貫した部品のセットを渡すハンドオフとシステムの作業です。ランク付けされたリストは、現在の段階を必要なサブトピックに照らし合わせて使い、スキルの説明を読んで、今取り組んでいる画面やフローに合うか確認してください。1つ選び、実際の画面に適用し、成果が持ちこたえたら次の段階に進んでください。
8 件から開始38 件のおすすめ候補
まずはこちらから。
App design is product design for a small screen: research, flows, UI, prototype, then handoff and a system so later screens match.
関連性の高い結果です。Skill の説明を読み、目的に合うか確認してください。
- 順位 01Agent Skill を見る直接一致
figma-implement-design
公式Figmaデザインを1:1の視覚的忠実度で本番投入可能なアプリケーションコードに変換します。FigmaファイルからUIコードを実装する場合、ユーザーが「デザインを実装」「コードを生成」「コンポーネントを実装」と言及した場合、Figma URLを提供した場合、またはFigma仕様に一致するコンポーネントの構築を求めた場合に使用します。`use_figma`によるFigmaキャンバスへの書き込みには`figma-use`を使用します。
前提条件（自己申告）: Node.js
- 順位 02Agent Skill を見る直接一致
figma-generate-design
公式アプリケーションのページ、ビュー、または複数セクションのレイアウトをFigmaへ変換するタスクでは、figma-useと併用してこのスキルを使用します。トリガー例:「Figmaに書き出して」「コードからFigmaで作成して」「ページをFigmaにプッシュして」「このアプリ/ページをFigmaで構築して」「画面を作成して」「Figmaでランディングページを構築して」「コードに合わせてFigma画面を更新して」。ユーザーがコードや説明からFigmaで完全なページ、画面、ビューを構築または更新したいときは常に、このワークフロースキルが推奨されます。search_design_systemでデザインシステムのコンポーネント、変数、スタイルを発見し、それらをインポートし、ハードコードされた値ではなくデザインシステムのトークンを使ってセクションごとに画面を段階的に組み立てます。
- 順位 03Agent Skill を見る直接一致
frontend-design
公式新規UI構築時や既存UI再形成時に、際立った意図的なビジュアルデザインを導く。美的方向性、タイポグラフィ、テンプレート然としない選択を支援。
765,703 · 人気度 - 順位 04Agent Skill を見る直接一致
frontend-design-review
公式> 高いデザイン品質とデザインシステム準拠を備えた、際立つプロダクショングレードのフロントエンドインターフェースをレビューし作成する。3つの柱で評価する：摩擦のないインサイトからアクションへの流れ、品質あるクラフト、信頼できる構築。USE FOR: PRレビュー、デザインレビュー、アクセシビリティ監査、デザインシステム準拠チェック、クリエイティブなフロントエンドデザイン、UIコードレビュー、コンポーネントレビュー、レスポンシブデザインチェック、テーマテスト、記憶に残るUIの作成。DO NOT USE FOR: バックエンドAPIレビュー、データベーススキーマレビュー、インフラまたはDevOps作業、UIを伴わない純粋なビジネスロジック、フロントエンド以外のコード。
- 順位 05Agent Skill を見る直接一致
impeccable
デザイン、リデザイン、批評、監査、磨き上げ、UXレビュー、階層、アクセシビリティ、モーション、デザインシステムをカバーするフロントエンドインターフェースデザインスキル。ウェブサイト、ダッシュボード、プロダクトUI、アプリシェル向け。アプリUIデザイン向けに広く深く対応。
前提条件（自己申告）: Node.js
319,215 · 人気度 - 順位 06Agent Skill を見る直接一致
design-mobile-apps
ユーザーがモバイルアプリやUI画面を設計したいとき、Sleek（sleek.design）プロジェクトに言及したとき、またはSleekデザインをコード（HTML、React Native、SwiftUI）で実装するときに使用。
前提条件（自己申告）: API key · Paid account
692,237 · 人気度 - 順位 07Agent Skill を見る直接一致
ui-ux-pro-max
Web、モバイル、デスクトップ向けのUI/UXデザイン知能。ページ、コンポーネント、デザインシステム、アクセシビリティ、インタラクション、レスポンシブレイアウト、タイポグラフィ、色、チャート、スタック固有のUI実装など、インターフェースの設計、構築、レビュー、修正時に使用。…
386,243 · 人気度 - 順位 08Agent Skill を見る直接一致
imagegen-frontend-mobile
iOS、Android、クロスプラットフォーム製品向けに、オンボーディング、認証、ダッシュボードなどの高品質なモバイルアプリ画面・フロー画像を、アプリネイティブな階層と一貫性をもって生成します。モバイルアプリのデザインコンセプトを直接対象とします。
340,357 · 人気度
ほか 30 件の Agent Skills を表示
- 順位 09Agent Skill を見る直接一致
penpot-build-screen
公式シニアビジュアルデザイナーとして、ブリーフからPenpotで本番品質の画面を設計します — 既存のデザインシステム（トークン＋コンポーネント）を再利用し、セクションごとに組み立て、決して一発で仕上げません。説明から画面/ページ/ランディング/ダッシュボードを作成する際に使用します。既存コードの変換には使用しません（penpot-build-from-codeを使用）。トリガー：「ダッシュボードをデザインして」「ランディングページを作成して」「このアプリ画面をデザインして」「このブリーフからUIを構築して」「設定ページをデザインして」「Penpotで画面をモックアップして」。
- 順位 10Agent Skill を見る直接一致
penpot-document-handoff
公式Penpotのデザインをハンドオフ用にドキュメント化する。デザインの上ではなく横に、クリーンな注釈レイヤーを構築する：左側にコンテキストカード（「How might we」のゴール、ビジネスルール、リンク、ステータス、求めるフィードバック／不要なフィードバック）、UI上に番号付きピンマーカー、右側に対応する観察／提案のノートカード、任意でツールチップ。すべてを1つの非表示可能なグループにまとめ、クリーンなデザインを表示できるようにする。注釈コンポーネントキットとトークンがあれば再利用し、なければ最小限のものを提案・作成する。監査（penpot-audit-*を使用）やレイヤー名の変更（penpot-rename-layersを使用）には非対応。トリガー：「document this design」「annotate this screen」「prepare this for handoff」「add design annotations」「explain this flow for devs」「add observation notes」「create a critique card」「spec this screen for handoff」。
- 順位 11Agent Skill を見る直接一致
prototype
注目アイデアを忠実度の階段（コンテンツ優先からコードまで）に沿って引き上げ、各段階での検証計画とユーザージャーニーマッピングを提供します。
- 順位 12Agent Skill を見る直接一致
design-review
注目Nielsenの10ヒューリスティックと優先順位付きの所見表を用いて、6つの重み付けされた観点からデザイン/UIをレビューする。
- 順位 13Agent Skill を見る直接一致
shadcn
注目shadcnのコンポーネントとプロジェクトを管理 — 追加、検索、修正、デバッグ、スタイリング、UIの構成（チャットインターフェースを含む）。プロジェクトのコンテキスト、コンポーネントのドキュメント、使用例を提供します。shadcn/ui、コンポーネントレジストリ、プリセット、--presetコード、またはcomponents.jsonファイルを持つプロジェクトを扱うときに適用します。「shadcn init」「create an app with --preset」「switch to --preset」でも起動します。
271,099 · 人気度 - 順位 14Agent Skill を見る直接一致
hallmark
新規ページ、監査、リデザイン、URLやスクリーンショットからのデザイン抽出のためのアンチAIスロップデザインSkill。構造的な多様性を重視。アプリ/ランディングUIのデザイン品質に強い。
60,409 · 人気度 - 順位 15Agent Skill を見る直接一致
high-end-visual-design
ハイエンドなエージェンシー風のビジュアルデザインを教える：フォント、スペーシング、シャドウ、カード構造、アニメーション。アンチ汎用のルールとレイアウトのアーキタイプを伴う。プレミアムなUIビジュアルディレクションに強い。
420,662 · 人気度 - 順位 16Agent Skill を見る直接一致
gpt-taste
エリートUX/UIおよびGSAPモーションエンジニアリング：レイアウトのバリエーション、AIDAページ構造、エディトリアルタイポグラフィ、隙間のないベントグリッド、スクロールアニメーションを徹底します。ハイエンドなウェブUIデザインとモーションに強み。
364,217 · 人気度 - 順位 17Agent Skill を見る直接一致
stitch-design-taste
Google Stitch向けのDESIGN.mdデザインシステムファイルを生成し、タイポグラフィ、色、レイアウト、モーション、アンチパターンルールをエンコードして、プレミアムで汎用的でないUIを実現します。アプリのデザインシステムや画面生成に有用です。
360,899 · 人気度 - 順位 18Agent Skill を見る直接一致
web-design-guidelines
公式Web Interface Guidelines への準拠について UI コードをレビューします。「review my UI」「check accessibility」「audit design」「review UX」「check my site against best practices」と依頼されたときに使用します。
- 順位 19Agent 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
- 順位 20Agent 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'。
- 順位 21Agent 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'。
- 順位 22Agent Skill を見る直接一致
design-tokens
注目3層アーキテクチャ(プリミティブ、セマンティック、コンポーネント)でDTCG形式のデザイントークンを生成、拡張、監査。
- 順位 23Agent Skill を見る一致の可能性
image-to-code
画像ファーストのWebサイトデザイン→コードのワークフロー。デザイン画像を生成し、それを分析してから、一致するフロントエンドを実装します。Web向けのビジュアルデザインとプロトタイピングをサポートし、ネイティブアプリUIは対象外です。
350,805 · 人気度 - 順位 24Agent Skill を見る一致の可能性
onboarding
サインアップ後のオンボーディング、アクティベーション、初回体験、タイムトゥバリューを最適化。空状態やオンボーディングチェックリストも含む。アプリのオンボーディングフロー設計に関連。
65,786 · 人気度 - 順位 25Agent Skill を見る一致の可能性
minimalist-ui
クリーンなエディトリアル調インターフェース。温かみのあるモノクロパレット、タイポグラフィのコントラスト、フラットな弁当グリッド、落ち着いたパステル。グラデーションなし、重い影なし。
388,176 · 人気度 - 順位 26Agent Skill を見る一致の可能性
industrial-brutalist-ui
スイス式タイポグラフィ印刷と軍事端末の美学を融合させた生のメカニカルインターフェース。厳格なグリッド、極端な書体スケールコントラスト、実用的な色、アナログエフェクト。機密解除された設計図のような雰囲気を必要とするデータ重視のダッシュボード、ポートフォリオ、編集サイト向け。
363,309 · 人気度 - 順位 27Agent Skill を見る一致の可能性
antfu-design
注目antfuスタイルのデザイン規約を拡張。UnoCSSファーストで、ツールや開発者ツールUI向けのライト/ダーク両対応のクラスベースのセマンティックトークンに加え、ランディングページやプロダクト画面向けのデザイン読解、アンチスロップ、マイクロインタラクションの磨き込み。UnoCSSでインターフェースを構築またはリファクタリングする際に使用。
- 順位 28Agent Skill を見る一致の可能性
frontend-ui-dark-ts
公式Tailwind CSSを使い、カスタムテーマ、グラスモーフィズム効果、Framer Motionアニメーションを備えたダークテーマのReactアプリケーションを構築します。洗練されたダークな美観を持つダッシュボード、管理パネル、データリッチなインターフェースを作成する際に使用します。
- 順位 29Agent Skill を見る一致の可能性
vercel-react-view-transitions
公式ReactのView Transition APIでネイティブ感のあるスムーズなアニメーションを実装する方法をガイド：ページ遷移、共有要素、ルート変更、リスト並べ替え。アプリUIのモーションとインタラクションデザインに関連します。
146,063 · 人気度 - 順位 30Agent Skill を見る一致の可能性
pick-ui-library
タスクに適したフロントエンドライブラリを選ぶための厳選された意見付きリファレンス：UIプリミティブ、モーション、チャート、ドラッグ&ドロップ、状態管理、スタイリング。アプリUI実装の選択を支援する。
144,655 · 人気度 - 順位 31Agent Skill を見る一致の可能性
web-artifacts-builder
公式モダンなフロントエンドWeb技術（React、Tailwind CSS、shadcn/ui）を用いて、精巧で多コンポーネントのclaude.ai HTMLアーティファクトを作成するためのツール群。状態管理、ルーティング、shadcn/uiコンポーネントを必要とする複雑なアーティファクト向け — 単純な単一ファイルのHTML/JSXアーティファクトには向かない。
106,698 · 人気度 - 順位 32Agent Skill を見る一致の可能性
higgsfield-websites
Higgsfield CLIを通じてフルスタックのウェブサイト、アプリ、ゲームを構築・編集・デプロイ。デザインブリーフとアプリレイアウトを伴う。アプリ構築は対象範囲だが、デザインはデプロイに次ぐ位置づけ。
113,070 · 人気度 - 順位 33Agent Skill を見る一致の可能性
clerk-custom-ui
注目カスタム認証フローとコンポーネントの外観 - フック（useSignIn、
51,131 · 人気度 - 順位 34Agent Skill を見る一致の可能性
agent-browser
AIエージェント向けのブラウザ自動化CLI: ページのナビゲート、フォーム入力、クリック、スクリーンショット、ウェブアプリの探索的テスト/QA。デザインそのものではなく、ユーザビリティテストとアプリQAをサポート。
985,975 · 人気度 - 順位 35Agent Skill を見る一致の可能性
webapp-testing
公式Playwright を使ってローカル Web アプリを操作・テストするためのツールキット。フロントエンド機能の検証、UI 挙動のデバッグ、スクリーンショットの取得、ログの確認ができる。アプリ UI のユーザビリティ/QA テストをサポート。
172,108 · 人気度 - 順位 36Agent Skill を見る一致の可能性
playwright-best-practices
Playwright テストの包括的なガイダンス：E2E、コンポーネント、API、ビジュアル、アクセシビリティ、セキュリティテストに加え、フレーキーテストのデバッグ。アプリ UI のユーザビリティ／QA テストを支援する。
90,886 · 人気度 - 順位 37Agent Skill を見る一致の可能性
ios-design
SwiftUI、UIKit、React NativeでiPhoneアプリのiOS UI/UXを設計・レビューします: ナビゲーションフロー、タイポグラフィ、フォーム、キーボード/セーフエリアレイアウト、Apple HIGに準拠したアクセシビリティ。モバイルアプリ設計を直接対象とします。
249,982 · 人気度 - 順位 38Agent Skill を見る一致の可能性
ui-taste
コーディングエージェントに優れたUIセンスを与える：WebとiOSインターフェースの構築、リデザイン、批評、磨き上げのためのアンチUIスロップのプレイブック。任意で実製品の参照を含む。UIデザインの品質を直接狙う。
452,376 · 人気度
このトピックの内容
各サブトピックは、特定の状況に合う Agent Skills をまとめたものです。
- Research
- Who this app is for, and what they already do instead.
- Flows
- The path through screens for each important job.
- UI
- How each screen looks once the flow is settled.
- Prototype
- Something tappable before engineering commits.
- Usability
- Watch people try the prototype and see where they stall.
- Handoff & system
- Give engineering a coherent set of parts, not a pile of artboards.
よくある質問
- アプリデザインのスキルはどれから始めればよいですか？
- 自分の作業が行き詰まっている場所に合うサブトピックから始めてください。アプリが誰向けか固まっていないならリサーチから始め、対象は明確でも画面を通る道筋が不明ならフローから始めてください。
- リストはどのように並べられていますか？
- このリストは観測された検索需要でランク付けされており、トピックに直接一致するものが先に来て、単一のパブリッシャーに上限があるため、1つの情報源がページを埋め尽くすことはありません。
- アプリを設計するのに6つのサブトピックすべてが必要ですか？
- 段階は research、flows、UI、prototype、usability、そして handoff and system と進み、それぞれが前の段階に依存します。単一の段階のスキルを読み込んでも有用な出力は得られますが、research や flows を飛ばすと、後の UI 作業の正当化が難しくなる傾向があります。
- プロトタイプスキルはユーザビリティテストの代わりになりますか？
- いいえ。プロトタイプのスキルはエンジニアリングが着手する前にタップできるものを生み出し、ユーザビリティの作業はそのプロトタイプを人が試すのを見てどこでつまずくかを見ることです。それらは別の段階であり、プロトタイプはユーザビリティセッションへの入力です。
Agent Skill のインストール方法
Agent Skills は SKILL.md ファイルです。適切な skills ディレクトリに置くと、多くのエージェントが自動で認識します。
- Claude Code — copy the SKILL.md for figma-implement-design into ~/.claude/skills/figma-implement-design/ for yourself, or .claude/skills/figma-implement-design/ to share it with a project.
- From the registry — run npx skills add openai/skills@figma-implement-design.
- Or download figma-implement-design from its source and place that SKILL.md in the directory above.
選び方 インストール前に出典と Skill 自身の説明を確認してください。Official と Notable は出所を示すラベルです。