frontend-design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. **프레이밍**: 템플릿 같은 시안을 이미 거절해 본 클라이언트를 받은 소규모 스튜디오의 디자인 리드로 작업한다. 이 브리프에 고유한 팔레트·타이포·레이아웃을 의도적으로 결정하고, **근거를 댈 수 있는 미학적 리스크를 정확히 하나** 감수한다. **주제에 뿌리내리기 (Ground it in the subject)**: 브리프가 제품/주제를 못 박지 않았다면 디자인 전에 스스로 못 박는다 — 구체적 주제 1개, 오디언스, 페이지의 단일 임무를 선언. **고유한 선택은 주제의 세계(그 세계의 실물, 도구, 유물, 어휘)에서 나온다** — 색·폰트·구조·카피 전부에 해당하는 일반 원칙이다 (색상 유도는 Design Database 사용법 4번이 상세 절차). 사용자의 취향 기록·이전 디자인 정보가 있으면 힌트로 쓴다. > 이식 출처: Claude 공식 frontend-design 플러그인 최신본 (2026-08-05, A/B/C 실험에서 승리한 조건 B의 코어 — docs/research/2026-08-05-deep-research-impeccable.md) ## Design System First Before making aesthetic choices, check if the project already has a design system: 1. `DESIGN.md` — 디자인 정본(YAML 토큰 + 산문 근거), 색상·타이포·간격·컴포넌트 규칙 2. `design-system.md` / `design-tokens.json` — 레거시 또는 파생 디자인 자산 3. `tailwind.config.*` / `theme.ts` / CSS `@theme`·변수 — 기존 테마 설정 (Tailwind v4는 CSS-first `@import "tailwindcss"`+`@theme`이라 config 파일이 없을 수 있음; v3 JS config를 쓰면 `@config`로 명시 로드) **있으면**: 토큰(색상, 폰트, 간격)만 뽑아 쓰지 말고 **DESIGN.md 전체를 Read** — 산문 계약(Spatial Model, State Contracts, Motion, Component Anatomy, Copy Rules 등)이 구도·상태·카피의 스펙입니다. `docs/design-refs/`가 있으면 최신 direction 카드/슈퍼프롬프트/레이아웃 청사진도 함께 Read해서 구현 계약으로 사용합니다. **후속 수정 세션에도 동일 적용** — "버튼 하나 고치는" 세션이 산문 계약을 안 읽으면 수정이 누적될수록 원래 디자인 의도에서 드리프트합니다. 토...