実際にClaude Codeでより良いフロントエンドを出力できるものはすべて見つけました。スキル、プラグイン、MCPサーバー、CLAUDE.md トリックを、何をしようとしているかごとに整理しています。

April 2026 ·70+ tools ·10 sections

もし役に立つなら、他の人も見つけられるように星印をつけてください。PR歓迎 — 「貢献」をご覧ください。

---

目次

• デザインスキル — AIの雑魚を潰す
• サイト全体のテーマ設定 — すべてを合わせる
• アニメーション&モーション — GSAP、フレーミングモーション、スクロールエフェクト
• UI/UXインテリジェンス — パターン、a11y、研究
• デザイン・トゥ・コード — Figmaパイプライン
• テストとブラウザ自動化 — クロードに目をつける
• ドキュメントとコンテキスト — APIの幻覚をやめる
• フレームワークスキル — React、Tailwind、Three.js、D3
• デプロイ&プレビュー — 出荷
• 推奨スタック — 一緒に設置すべきもの
• クイックリファレンス
• さらなる参考文献
• 貢献

---

デザインスキル

デフォルトのClaude出力は他のAI生成ページと同じように見えます。同じフォント、同じ紫色のグラデーション、同じカードレイアウト。これらがそれを修正します。

フロントエンドデザイン(公式)

最初に取り付けるものだ。

Claude Code Frontend Design Toolkit

Everything I’ve found that actually makes Claude Code output better-looking frontends. Skills, plugins, MCP servers, CLAUDE.md tricks, organized by what you’re trying to do.

April 2026 · 70+ tools · 10 sections

If this is useful, star it so others can find it. PRs welcome — see Contributing.

---

Table of Contents

• Design Skills — Kill the AI slop
• Site-Wide Theming — Make everything match
• Animation & Motion — GSAP, Framer Motion, scroll effects
• UI/UX Intelligence — Patterns, a11y, research
• Design-to-Code — Figma pipeline
• Testing & Browser Automation — Give Claude eyes
• Docs & Context — Stop hallucinating APIs
• Framework Skills — React, Tailwind, Three.js, D3
• Deploy & Preview — Ship it
• Recommended Stacks — What to install together
• Quick Reference
• Further Reading
• Contributing

---

Design Skills

The default Claude output looks like every other AI-generated page. Same fonts, same purple gradient, same card layout. These fix that.

Frontend Design (Official)

The one you install first. Anthropic’s own skill that tells Claude to pick an actual aesthetic direction before writing code instead of defaulting to Inter + purple gradient + rounded cards.

What changes:

• Claude picks a direction before coding (brutalist, editorial, retro-futuristic, etc.)
• Requires real typography pairing, not just whatever sans-serif
• Blocks generic component patterns and cookie-cutter layouts
• Enforces CSS variables and cohesive color systems

Install this first. Everything else on this list assumes you have it.

UI/UX Pro Max — 62.6k stars

240+ styles, 127 font pairings, 99 UX guidelines. Tell it “fintech dashboard” and it picks a design system that makes sense for fintech. The v2.0 reasoning engine does the style matching automatically.

Also works with Cursor, Windsurf, Codex, and a dozen other agents if you’re not locked into Claude Code.

Taste Skill