カテゴリ · フロントエンド・デザイン
Claude Code向けフロントエンド・デザインスキル
Claude Code・Codex・Cursorをはじめとするコーディングエージェント向けに、フロントエンド・デザインカテゴリのおすすめスキル・MCPサーバー・マーケットプレイスを実際のインストール数でランキングしています。React、Next.js、Vue、Svelteなどをカバーします。
フロントエンド・デザインカテゴリには何がありますか？
フロントエンド・デザインカテゴリには、エージェントスキル、MCPサーバー、マーケットプレイス、プラグインを含む6,266件のツールが集まっています。代表的なツールはFrontend Design、Vercel React Best Practices、Web Design Guidelinesです。リストは自動で更新され、実際の利用状況（まずインストール数、次にGitHubスター数）でランキングされるため、最も有力なツールが上位に表示されます。すべての掲載ツールがClaude Code、Codex、Cursorで動作します。最終更新：2026年11月8日。
下のフィルターで種類や開発対象を絞り込めます。種類別のハブを開くと、フロントエンド・デザインのツールをその種類のほかのツールと一緒に確認できます。
ツールを探す
タイプ
1Frontend Designありきたりな AI らしさを避けた、個性的で本番品質のフロントエンドのインターフェースやコンポーネントを生成します。フロントエンド・デザインスキル109.1万18.9万
2Vercel React Best Practicesコードの生成とレビューの際に、Vercel 公式の React と Next.js のパフォーマンスルールを自動で適用します。フロントエンド・デザインスキル88万3.4万
3Web Design Guidelines最新のVercel Web Interface Guidelinesに照らして、一貫性、アクセシビリティ、UX品質の観点からフロントエンドのコードを自動で監査します。フロントエンド・デザインスキル83.7万3.4万
5Slideshow分岐シーケンスやホットスポットによるナビゲーションを備えた、構造化されたナビゲーション可能なHyperFramesのスライドショー、ピッチデック、インタラクティブなプレゼンテーションを作成します。フロントエンド・デザインスキル48.9万8.1万
6Vercel Composition Patterns複雑さが増しても保守しやすく、boolean propが乱立しないReactコンポーネントを生成・リファクタリングします。フロントエンド・デザインスキル44.3万3.4万
7Ui Ux Pro MaxWebプロジェクトとモバイルプロジェクトのUI/UXの判断、コンポーネントの提案、スタイルのガイダンス、コードの改善を、すぐに質の高い形で得られます。フロントエンド・デザインスキル44万14.7万
9FigmaFigma のデザインを HyperFrames の動画コンポジションに取り込みます。静的アセット、ブランドトークン、コンポーネント、モーション、シェーダーまで対応し、すべてローカルに固定して再現性のあるレンダリングを実現します。フロントエンド・デザインスキル40万8.1万
10Impeccableありきたりなレイアウト、弱い視覚的階層、UX の抜け漏れがリリースの妨げになっているとき、洗練された個性あるウェブ / アプリ UI を実際のコードで仕上げます。フロントエンド・デザインスキル39.3万10.6万
12Apple DesignA frontend developer building gesture-driven UI, springs, or sheet interactions applies Apple's fluid-interface principles translated to CSS, Pointer Events, and Motion.フロントエンド・デザインスキル28.1万5.4万
13ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.フロントエンド・デザインスキル-27.1万12.8万
14Vercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.フロントエンド・デザインスキル27万3.4万
15Animation VocabularyMap vague motion descriptions to precise web animation terms so you can prompt designers or implement the right effect.フロントエンド・デザインスキル27万5.4万
21ArchifyGenerate polished architecture, workflow, sequence, and state diagrams as standalone HTML with export.フロントエンド・デザインスキル19万9.4万
22Vercel React View TransitionsGenerate consistent, high-quality React View Transition implementations that feel native and buttery smooth.フロントエンド・デザインスキル18.4万3.4万
23Ask SonnerImplement Sonner React toast notifications with theming promise and positioning patterns.フロントエンド・デザインスキル16.9万5.4万
24Xcode Project SetupAutomatically create and configure a new Xcode project with Swift Package Manager dependencies for iOS or macOS agent projects.フロントエンド・デザインスキル13.7万506
25Extract Design SystemPull live design tokens from any public website and generate ready-to-use CSS variables and JSON token files for their own project.フロントエンド・デザインスキル13.1万273
26Canvas DesignGenerate structured visual canvases that clarify product strategy, user flows, and feature priorities before writing code.フロントエンド・デザインスキル12.9万18.9万
27Web PerfAutomatically audit real browser performance and receive concrete optimization recommendations for Core Web Vitals and Lighthouse scores.フロントエンド・デザインスキル12.2万3302
28Higgsfield BrandkitBuild and extend full visual brand systems—palettes, SVG logos, typography, mockups, packaging, and brandbooks via Higgsfield CLI plus local tooling.フロントエンド・デザインスキル11.7万1914
29Brand GuidelinesInstantly apply Anthropic’s official colors, typography, and visual identity to UIs, documents, landing pages, and generated artifacts.フロントエンド・デザインスキル11.7万18.9万
32HallmarkAutomatically detect and remove signature AI-generated UI patterns before they ship as slop.フロントエンド・デザインスキル9.6万5万
33Gsap CoreWhen they need an agent that reliably generates correct GSAP tweens, timelines, easing, staggers, and responsive animation code for web projects.フロントエンド・デザインスキル8.4万1.8万
34AuditAudits a user interface for visual, UX, and accessibility problems before release so a solo builder can fix them first.フロントエンド・デザインスキル-8.2万10.6万
35Gsap ScrolltriggerGenerate correct ScrollTrigger code for pinning, scrubbing, parallax, and scroll-linked animations in GSAP projects.フロントエンド・デザインスキル8.1万1.8万
38Frontend Ui EngineeringGenerate production-quality, accessible, and visually polished user interfaces that avoid generic AI aesthetics.フロントエンド・デザインスキル7.7万11.4万
39Json CanvasCreate, edit, and maintain visual JSON Canvas diagrams, mind maps, and flowcharts directly through their coding agent.フロントエンド・デザインスキル7.7万5.1万
40Make Interfaces Feel BetterCreate smooth, responsive, and delightful interface animations that feel natural and never janky.フロントエンド・デザインスキル7.6万3938
41Gsap PluginsGet accurate GSAP plugin registration, usage examples, and implementation guidance for ScrollToPlugin, Flip, Draggable, SplitText, MorphSVG, CustomEase and otherフロントエンド・デザインスキル7.5万1.8万
42Gsap ReactGet correct, production-ready GSAP animation patterns when building React or Next.js interfaces.フロントエンド・デザインスキル7.4万1.8万
43Expo Dev ClientCreate custom development clients for Expo React Native apps that need native modules or Apple-specific targets.フロントエンド・デザインスキル7.4万4081
44Tailwind Design SystemGenerate consistent, scalable Tailwind v4 design systems with tokens, component variants, responsive patterns, and accessibility baked in.フロントエンド・デザインスキル7.3万4.2万
45Gsap FrameworksGet correct GSAP lifecycle, scoping, and cleanup patterns when building animations in Vue, Nuxt, Svelte, or SvelteKit.フロントエンド・デザインスキル7万1.8万
46AccessibilitySystematically audit and improve web accessibility so every user, including those using screen readers or keyboards, can successfully use the product.フロントエンド・デザインスキル6.8万3054
47Design MdAutomatically analyze existing Stitch screens and generate a reusable DESIGN.md that becomes the single source of truth for consistent visual output from Stitch.フロントエンド・デザインスキル6.6万8693
48Enhance PromptTurn vague UI descriptions into high-quality, Stitch-optimized prompts that generate better frontend components on the first try.フロントエンド・デザインスキル5.9万8693
49Clerk Custom UiCreate a fully custom sign-in and authentication UI instead of using Clerk's hosted components.フロントエンド・デザインスキル5.7万93
50Stitch LoopCreate an autonomous loop that iteratively generates, integrates, and hands off website pages using the Stitch MCP server.フロントエンド・デザインスキル5.7万8693
51Shadcn UiGet expert guidance on discovering, installing, and customizing shadcn/ui components with full code ownership.フロントエンド・デザインスキル5.4万8693
52Huashu DesignGenerate high-fidelity interactive HTML prototypes, design variants, motion demos, and presentation decks that avoid generic web tropes.フロントエンド・デザインスキル5.3万2.9万
53React:ComponentsTurn Stitch design files into production-ready, modular React and Vite components without manual translation.フロントエンド・デザインスキル-5万8693
55Angular DeveloperGenerate correct, version-aware Angular animation code whether using modern native CSS or the legacy animations package.フロントエンド・デザインスキル4.9万718
56Expo ModuleCreate custom config plugins that safely modify native Android and iOS projects generated by Expo prebuild.フロントエンド・デザインスキル4.8万4081
さらに探す
フロントエンド・デザインツールのよくある質問
Claude Code向けのフロントエンド・デザインツールとは？
フロントエンド・デザインツールとは、フロントエンド・デザインのタグが付いたスキル、MCPサーバー、マーケットプレイスのことで、Claude Code、Codex、Cursorなどのコーディングエージェントにフロントエンド・デザインの作業（React、Next.js、Vue、Svelte、Tailwindなど）のやり方を教えます。どれもエージェントにそのまま組み込め、コマンド1つでインストールできます。
フロントエンド・デザインのスキルやMCPサーバーはどうやってインストールしますか？
掲載ページを開き、1行のコマンドをコピーします。たとえばスキルなら npx skills add https://github.com/owner/repo --skill name、マーケットプレイスなら /plugin marketplace add owner/repo です。次回のClaude Code、Codex、Cursorのセッションから使えます。
フロントエンド・デザインではどのツールやフレームワークをカバーしていますか？
React、Next.js、Vue、Svelte、Tailwindなどです。Skillselionはskills.sh、GitHub、MCPレジストリからカタログ全体を取り込んでいるため、コミュニティが新しいフロントエンド・デザインツールを公開すると掲載されます。ランキングはインストール数とGitHubスター数に基づき、有料掲載で順位が変わることはありません。