프론트엔드 디자인 디렉터

무엇을 해주나

• Claude를 '작은 디자인 스튜디오의 아트 디렉터'처럼 세팅해, 새 UI를 만들거나 기존 UI를 리디자인할 때 의도가 뚜렷한 선택을 하게 합니다.
• 색상 4~6개(헥스), 디스플레이/본문/유틸리티 서체 조합, 레이아웃 컨셉, 그리고 이 페이지를 기억하게 만들 시그니처 요소로 구성된 토큰 시스템을 먼저 설계합니다.
• 코드를 쓰기 전에 계획을 스스로 비평하는 2단계 프로세스를 강제합니다: 브레인스토밍 → ASCII 와이어프레임 비교 → 자기비평 → 구현 → 재비평.
• "AI가 만든 디자인" 특유의 3대 클리셰(크림색 배경+세리프+테라코타, 검정 배경+애시드 그린, 브로드시트 신문형 레이아웃)를 진단하고 회피하게 합니다.
• UI 카피 작성 규칙까지 포함: 능동태, "Submit" 대신 "Save changes", 에러/빈 화면 문구 작성법.
• 반응형, 키보드 포커스, reduced motion 같은 기본 품질 바닥선도 함께 챙깁니다.

이런 분께 추천

• 랜딩 페이지나 제품 페이지를 만들 때 "결과물이 늘 비슷하고 밋밋하다"고 느끼는 개발자
• 전담 디자이너 없이 프론트엔드까지 맡아야 하는 1인 개발자·스타트업 팀
• 포트폴리오, 이벤트 페이지, 데모 사이트에 개성 있는 톤을 입히고 싶은 분
• 디자인 시스템 초안(색·타이포 스케일)을 빠르게 잡고 싶은 프론트엔드 엔지니어

활용 예시

1. "핸드드립 커피 로스터리 랜딩 페이지 만들어줘" → 원두·드리퍼 등 소재 세계에서 팔레트와 서체를 끌어낸 디자인 플랜을 먼저 제시하고, 승인 후 HTML/CSS를 구현.
2. 기존 SaaS 대시보드 리디자인 → 현재 화면이 어떤 AI 클리셰에 걸려 있는지 지적하고, 타입 스케일과 시그니처 요소를 다시 정의한 개선안 제안.
3. UI 문구 정리 → "오류가 발생했습니다" 같은 모호한 메시지를 원인과 해결 방법이 담긴 문장으로, 버튼 라벨을 액션 전체 흐름에서 일관되게 재작성.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/anthropics/skills/HEAD/skills/frontend-design/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 anthropics/skills 의 skills/frontend-design 폴더를 내 ~/.claude/skills/frontend-design/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.