Claude-Code-Frontend-Design-Toolkit
무엇인가
이 저장소는 단일 스킬이 아니라 Claude Code의 프론트엔드 산출물을 규율하는 스킬·플러그인·MCP 서버·CLAUDE.md 블록을 목적별로 묶은 색인이다. 규율 대상은 미학 방향 선택, 사이트 전역 테마와 디자인 토큰 생성, 애니메이션·모션, UI/UX 패턴과 접근성, Figma→코드 파이프라인, 브라우저 자동화 검증, API 문서 컨텍스트 주입, React·Tailwind·Three.js·D3 같은 프레임워크별 사용법, 배포·프리뷰다.
어떻게 동작하나
동작 방식은 항목마다 다르다. 대부분은 SKILL.md 형태의 규칙 파일이고, 일부는 플러그인이나 MCP 서버, 또는 CLAUDE.md에 붙여 넣는 텍스트 블록이다. Bencium UX Designer는 SKILL.md와 함께 ACCESSIBILITY.md(약 830줄), RESPONSIVE-DESIGN.md(약 600줄), MOTION-SPEC.md, DESIGN-SYSTEM-TEMPLATE.md를 두고 필요할 때 참조 파일을 로드하는 구조다. Tailwind CSS Kit은 자동 활성화 방식으로 CSS 우선 @theme 접근과 다크 모드 패턴을 다룬다. Design Tokens Skill은 --brand-hue 변수 하나에서 OKLCH 수식으로 팔레트를 파생해 Tailwind v4 @theme 블록을 출력한다.
무엇과 다른가
프롬프트에 미적 요구를 매번 다시 적거나 단일 CLAUDE.md 규칙 파일 하나로 모두 처리하는 방식과 다르다. 설치 단위가 목적별로 분리돼 있어 테마, 모션, 접근성, 프레임워크 지원 중 필요한 계층만 골라 붙인다. Anthropic 공식 Frontend Design 스킬을 바닥에 깔고 그 위에 토큰·테마 계층을 얹는 구성을 전제로 하며, Recommended Stacks 섹션이 함께 설치할 조합을 제시한다.
어떻게 쓰나
사용은 README의 섹션을 따라 필요한 항목을 고르고 각 항목 저장소의 설치 절차를 따르는 방식이다. 첫 단계는 Anthropic 공식 Frontend Design 스킬 설치이며, 목록의 나머지 항목은 이 스킬이 깔려 있다고 가정한다. 일부 항목은 Cursor, Windsurf, Codex 등 다른 에이전트에서도 동작한다고 명시돼 있다.
전제와 한계
전제는 Claude Code이고, 항목별 지원 에이전트 범위는 각각 다르다. 저장소 자체는 큐레이션된 색인이며 통일된 설치 명령이나 버전 관리를 제공하지 않으므로 개별 스킬의 동작과 유지보수는 각 원본 저장소에 달려 있다. CLAUDE.md Theme Blocks처럼 플러그인이 아니라 텍스트 블록으로만 배포되는 항목도 있다.