제가 찾은 모든 것들이 실제로 Claude Code로 더 보기 좋은 프론트엔드를 출력하게 만듭니다. 스킬, 플러그인, MCP 서버, CLAUDE.md 트릭 등을 하려는 일별로 정리하세요.

April 2026 · 70+ tools · 10 sections

도움이 된다면 별표를 붙여 다른 사람들이 찾을 수 있게 하세요. PR 환영 — 기여 항목을 참조하세요.

---

목차

• 디자인 스킬 — AI 슬롭을 죽이기
• 사이트 전체 테마 — 모든 것을 맞추기
• 애니메이션 및 모션 — GSAP, 프레이머 모션, 스크롤 효과
• UI/UX 인텔리전스 — 패턴, a11y, 연구
• 설계-코드 — Figma 파이프라인
• 테스트 및 브라우저 자동화 — Claude에게 눈을 주다
• 문서 및 컨텍스트 — 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