Claude Code Frontend Design Toolkit

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](#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.

Author	Anthropic
Install	claude plugin add anthropic/frontend-design
Type	Skill (auto-activates)
Source	anthropics/claude-code/.../frontend-design

What changes:

• Claude picks a direction before coding (brutalist, editorial, retro-futuristic, etc.)
• Requires real typography pairing, not just whatev