| name | frontend-design |
| description | 높은 디자인 품질을 갖춘 독특하고 운영 수준(production-grade)의 프런트엔드 인터페이스를 생성합니다. 웹 컴포넌트, 페이지, 아티팩트, 포스터 또는 애플리케이션(예: 웹사이트, 랜딩 페이지, 대시보드, React 컴포넌트, HTML/CSS 레이아웃 또는 모든 웹 UI의 스타일링/미화)을 구축할 때 이 SKILL을 사용하세요. 일반적인 AI 미학을 피하고 창의적이고 세련된 코드와 UI 디자인을 생성합니다. |
이 SKILL은 일반적인 "AI스러운" 미학을 피하고 독특하며 운영 수준의 프런트엔드 인터페이스를 생성하도록 안내합니다. 미적 세부 사항과 창의적인 선택에 각별한 주의를 기울여 실제로 작동하는 코드를 구현합니다.
사용자는 프런트엔드 요구 사항(빌드할 컴포넌트, 페이지, 애플리케이션 또는 인터페이스)을 제공합니다. 여기에는 목적, 대상 사용자 또는 기술적 제약 사항에 대한 컨텍스트가 포함될 수 있습니다.
디자인 사고 (Design Thinking)
코딩하기 전에 컨텍스트를 이해하고 대담한(BOLD) 미적 방향성을 정하세요:
- 목적: 이 인터페이스가 해결하려는 문제는 무엇인가요? 누가 사용하나요?
- 톤(Tone): 극단적인 스타일을 선택하세요: 브루털 미니멀(brutally minimal), 맥시멀리스트 카오스(maximalist chaos), 레트로 퓨처리즘(retro-futuristic), 오가닉/네이처(organic/natural), 럭셔리/리파인드(luxury/refined), 플레이풀/토이(playful/toy-like), 에디토리얼/매거진(editorial/magazine), 브루털리스트/로우(brutalist/raw), 아트 데코/기하학(art deco/geometric), 소프트/파스텔(soft/pastel), 인더스트리얼/유틸리티(industrial/utilitarian) 등. 선택할 수 있는 수많은 풍미가 있습니다. 이를 영감으로 삼되, 미적 방향성에 충실한 디자인을 하세요.
- 제약 사항: 기술적 요구 사항 (프레임워크, 성능, 접근성).
- 차별화: 무엇이 이 인터페이스를 잊을 수 없게(UNFORGETTABLE) 만드나요? 사람들이 기억하게 될 한 가지는 무엇인가요?
중요: 명확한 개념적 방향을 선택하고 정밀하게 실행하세요. 대담한 맥시멀리즘과 세련된 미니멀리즘 모두 효과적입니다. 핵심은 강도가 아니라 '의도성(intentionality)'입니다.
그 후, 다음과 같은 실제로 작동하는 코드(HTML/CSS/JS, React, Vue 등)를 구현합니다:
- 운영 수준의 기능적인 코드
- 시각적으로 인상적이고 기억에 남는 디자인
- 명확한 미적 관점과 정합성
- 모든 세부 사항에서 세심하게 정제된 마감
프런트엔드 미학 가이드라인 (Frontend Aesthetics Guidelines)
다음에 집중하세요:
- 타이포그래피 (Typography): 아름답고 독특하며 흥미로운 폰트를 선택하세요. Arial이나 Inter와 같은 일반적인 폰트는 피하세요. 대신 프런트엔드의 미학을 높여줄 개성 있는 폰트, 예상치 못한 캐릭터가 있는 폰트를 선택하세요. 독특한 디스플레이 폰트와 세련된 본문용 폰트를 조합하세요.
- 컬러 및 테마 (Color & Theme): 일관된 미학을 고수하세요. 일관성을 위해 CSS 변수를 사용하세요. 소심하게 골고루 분포된 팔레트보다 강렬한 강조점(accents)이 있는 주도적인 컬러 배합이 더 효과적입니다.
- 모션 (Motion): 효과와 마이크로 인터랙션을 위해 애니메이션을 사용하세요. HTML의 경우 가급적 CSS 전용 솔루션을 우선시하세요. React의 경우 사용 가능하다면 Motion 라이브러리를 사용하세요. 임팩트가 큰 순간에 집중하세요: 잘 조율된 페이지 로드와 순차적 노출(animation-delay)은 여기저기 흩어진 마이크로 인터랙션보다 더 큰 즐거움을 줍니다. 놀라움을 주는 스크롤 트리거와 호버 상태를 활용하세요.
- 공간 구성 (Spatial Composition): 예상치 못한 레이아웃. 비대칭. 겹침(Overlap). 대각선 흐름. 그리드를 깨는 요소들. 넉넉한 여백 혹은 통제된 밀도.
- 배경 및 시각적 세부 사항: 단색을 기본으로 사용하기보다 분위기와 깊이를 만드세요. 전체적인 미학에 어울리는 컨텍스트 효과와 질감을 추가하세요. 그래디언트 메시(gradient meshes), 노이즈 텍스처, 기하학적 패턴, 레이어드 투명도, 드라마틱한 그림자, 장식적인 테두리, 커스텀 커서, 그레인 오버레이(grain overlays)와 같은 창의적인 형태를 적용하세요.
자주 사용되는 폰트 패밀리(Inter, Roboto, Arial, 시스템 폰트), 진부한 컬러 스킴(특히 흰 배경의 보라색 그래디언트), 예측 가능한 레이아웃과 컴포넌트 패턴, 그리고 컨텍스트 고유의 캐릭터가 없는 일률적인 디자인과 같은 일반적인 AI 생성 미학을 절대 사용하지 마세요.
창의적으로 해석하고, 해당 컨텍스트를 위해 진정으로 디자인된 느낌을 주는 예상치 못한 선택을 하세요. 어떤 디자인도 똑같아서는 안 됩니다. 라이트 테마와 다크 테마, 서로 다른 폰트, 서로 다른 미학을 다양하게 적용하세요. 생성 결과물들이 공통적인 선택지(예: Space Grotesk)에 머무르게 하지 마세요.
중요: 구현 복잡도를 미적 비전에 맞추세요. 맥시멀리스트 디자인은 광범위한 애니메이션과 효과를 포함한 정교한 코드가 필요합니다. 미니멀리스트나 세련된 디자인은 절제, 정밀함, 그리고 간격, 타이포그래피, 미묘한 세부 사항에 대한 세심한 주의가 필요합니다. 우아함은 비전을 잘 실행하는 데서 나옵니다.
기억하세요: Claude는 비범하고 창의적인 작업을 수행할 수 있습니다. 주저하지 말고 틀에서 벗어나 생각하며, 독특한 비전에 온전히 몰입했을 때 진정으로 무엇이 창조될 수 있는지 보여주세요.
