[official skill] 프론트엔드 디자인

📌 참고: 이 문서는 공식 Claude Code 문서의 원문 + 레퍼런스입니다.

• 원문 링크를 직접 사용하셔도 됩니다
• 이 파일을 .claude/skills/ 하위에 복사하여 스킬로 등록할 수도 있습니다

(2026.03.15 기준)

이 스킬은 일반적인 "AI 슬롭(AI slop)" 미학을 피하면서, 독창적이고 프로덕션 수준의 프론트엔드 인터페이스를 만드는 과정을 안내합니다. 미적 디테일과 창의적 선택에 대한 탁월한 주의를 기울여 실제 동작하는 코드를 구현하세요.

사용자는 프론트엔드 요구사항을 제공합니다: 빌드할 컴포넌트, 페이지, 애플리케이션 또는 인터페이스. 목적, 대상 사용자, 기술적 제약 조건에 대한 맥락이 포함될 수 있습니다.

디자인 사고

코딩 전에 맥락을 이해하고 대담한 미적 방향에 전념하세요:

• 목적: 이 인터페이스가 어떤 문제를 해결하는가? 누가 사용하는가?
• 톤: 극단을 선택하세요: 극도로 미니멀한, 맥시멀리스트 카오스, 레트로-퓨처리스틱, 유기적/자연적, 럭셔리/세련된, 장난스러운/장난감 같은, 에디토리얼/매거진, 브루탈리스트/날것의, 아르데코/기하학적, 소프트/파스텔, 인더스트리얼/실용적 등. 선택할 수 있는 다양한 방향이 있습니다. 이것들을 영감으로 활용하되 미적 방향에 충실한 디자인을 만드세요.
• 제약 조건: 기술적 요구사항 (프레임워크, 성능, 접근성).
• 차별화: 무엇이 이것을 잊을 수 없게 만드는가? 누군가가 기억할 단 하나의 요소는 무엇인가?

핵심: 명확한 콘셉트 방향을 선택하고 정밀하게 실행하세요. 대담한 맥시멀리즘과 세련된 미니멀리즘 모두 작동합니다 - 핵심은 강도가 아니라 의도성입니다.

그런 다음 동작하는 코드(HTML/CSS/JS, React, Vue 등)를 구현하되, 다음을 충족해야 합니다:

• 프로덕션 수준이며 기능적인
• 시각적으로 인상적이고 기억에 남는
• 명확한 미적 관점으로 일관된
• 모든 디테일에서 꼼꼼하게 다듬어진

프론트엔드 미학 가이드라인

집중할 요소:

• 타이포그래피: 아름답고, 독특하며, 흥미로운 폰트를 선택하세요. Arial이나 Inter 같은 범용 폰트를 피하고, 프론트엔드의 미학을 한 단계 끌어올리는 독창적인 선택을 하세요; 예상치 못한, 개성 있는 폰트 선택. 독특한 디스플레이 폰트와 세련된 본문 폰트를 조합하세요.
• 색상 & 테마: 일관된 미학에 전념하세요. 일관성을 위해 CSS 변수를 사용하세요. 주요 색상에 선명한 악센트를 더하는 것이, 소극적으로 균등 배분된 팔레트보다 효과적입니다.
• 모션: 효과와 마이크로 인터랙션에 애니메이션을 사용하세요. HTML에서는 CSS 전용 솔루션을 우선시하세요. React에서는 가능할 때 Motion 라이브러리를 사용하세요. 임팩트 높은 순간에 집중하세요: 시차를 둔 공개(animation-delay)로 잘 구성된 하나의 페이지 로드가, 산발적인 마이크로 인터랙션보다 더 큰 즐거움을 만듭니다. 스크롤 트리거와 놀라움을 주는 호버 상태를 활용하세요.
• 공간 구성: 예상치 못한 레이아웃. 비대칭. 오버랩. 대각선 흐름. 그리드를 깨는 요소들. 넉넉한 네거티브 스페이스 또는 절제된 밀도.
• 배경 & 시각적 디테일: 단색 배경을 기본으로 하지 말고, 분위기와 깊이를 만드세요. 전체 미학과 어울리는 맥락적 효과와 텍스처를 추가하세요. 그라디언트 메시, 노이즈 텍스처, 기하학적 패턴, 레이어드 투명도, 드라마틱한 그림자, 장식적 테두리, 커스텀 커서, 그레인 오버레이 같은 창의적 형태를 적용하세요.

절대 사용하지 말아야 할 일반적인 AI 생성 미학: 남용되는 폰트 패밀리(Inter, Roboto, Arial, 시스템 폰트), 진부한 색상 조합(특히 흰색 배경 위의 보라색 그라디언트), 예측 가능한 레이아웃과 컴포넌트 패턴, 맥락 특화된 개성이 부족한 판에 박힌 디자인.

창의적으로 해석하고 맥락에 진정으로 어울리는 예상치 못한 선택을 하세요. 어떤 디자인도 같아서는 안 됩니다. 밝은 테마와 어두운 테마, 다양한 폰트, 다양한 미학 사이를 변주하세요. 생성 간에 공통 선택(예를 들어 Space Grotesk)으로 수렴하지 마세요.

중요: 구현 복잡도를 미적 비전에 맞추세요. 맥시멀리스트 디자인은 광범위한 애니메이션과 효과가 포함된 정교한 코드가 필요합니다. 미니멀리스트 또는 세련된 디자인은 절제, 정밀함, 간격, 타이포그래피, 섬세한 디테일에 대한 세심한 주의가 필요합니다. 우아함은 비전을 잘 실행하는 것에서 나옵니다.

기억하세요: Claude는 비범한 창의적 작업을 할 수 있습니다. 주저하지 말고, 틀 밖에서 생각하고 독창적인 비전에 완전히 전념했을 때 진정으로 만들 수 있는 것을 보여주세요.