이 스킬은 일반적인 'AI 슬롭' 미학을 피한, 독창적이고 프로덕션 수준의 프론트엔드 인터페이스를 만드는 방법을 안내합니다. 미적 디테일과 창의적인 선택에 탁월한 주의를 기울여 실제 동작하는 코드를 구현하세요.
사용자가 프론트엔드 요구사항(컴포넌트, 페이지, 애플리케이션 또는 인터페이스)을 제공합니다. 사용자는 목적, 대상 또는 기술적 제약 조건에 대한 맥락을 포함할 수 있습니다.
디자인 사고
코딩 전에 맥락을 이해하고 대담한 미학적 방향을 결정하세요:
- 목적: 이 인터페이스가 해결하는 문제는 무엇인가요? 누가 사용하나요?
- 톤: 극단 중 하나를 선택하세요: 극단적 미니멀리즘, 맥시멀리스트 혼돈, 레트로-미래주의, 유기적/자연적, 고급스러움/세련됨, 장난기/장난감 느낌, 에디토리얼/매거진, 브루탈리스트/원시적, 아르데코/기하학적, 부드러움/파스텔, 산업적/실용적 등. 선택할 수 있는 스타일은 많습니다. 영감을 얻되, 미학적 방향에 충실한 디자인을 만드세요.
- 제약 조건: 기술적 요구사항 (프레임워크, 성능, 접근성).
- 차별화: 이 인터페이스를 잊을 수 없게 만드는 요소는 무엇인가요? 사람들이 기억할 한 가지는 무엇인가요?
중요: 명확한 개념적 방향을 선택하고 정밀하게 실행하세요. 대담한 맥시멀리즘과 정제된 미니멀리즘 모두 효과적입니다. 핵심은 강도가 아닌 의도성입니다.
그런 다음 실제 동작하는 코드(HTML/CSS/JS, React, Vue 등)를 구현하세요:
- 프로덕션 수준이며 기능적일 것
- 시각적으로 눈에 띄고 기억에 남을 것
- 명확한 미학적 관점으로 일관성을 유지할 것
- 모든 디테일이 세심하게 정제될 것
프론트엔드 미학 가이드라인
다음에 집중하세요:
- 타이포그래피: 아름답고 독특하며 흥미로운 폰트를 선택하세요. Arial이나 Inter와 같은 일반적인 폰트는 피하고, 대신 차별화된 선택으로 프론트엔드의 미학을 높이세요. 예상치 못하고 개성 있는 폰트 선택이 좋습니다. 독특한 디스플레이 폰트와 정제된 본문 폰트를 짝지어 사용하세요.
- 색상 및 테마: 일관된 미학을 고수하세요. 일관성을 위해 CSS 변수를 사용하세요. 지배적인 색상에 선명한 악센트를 더하는 것이 균일하게 분포된 팔레트보다 효과적입니다.
- 모션: 효과와 마이크로 인터랙션에 애니메이션을 사용하세요. HTML에는 CSS 전용 솔루션을 우선시하세요. React에서는 가능할 때 Motion 라이브러리를 사용하세요. 임팩트가 큰 순간에 집중하세요: 지연된 등장(animation-delay)으로 잘 구성된 페이지 로드 한 번이 분산된 마이크로 인터랙션보다 더 큰 즐거움을 줍니다. 스크롤 트리거와 놀라움을 주는 호버 상태를 사용하세요.
- 공간 구성: 예상치 못한 레이아웃. 비대칭. 겹침. 대각선 흐름. 그리드를 깨는 요소. 넉넉한 여백 또는 통제된 밀집도.
- 배경 및 시각적 디테일: 단색에 의존하지 말고 분위기와 깊이를 만드세요. 전체 미학에 어울리는 맥락적 효과와 텍스처를 추가하세요. 그라디언트 메시, 노이즈 텍스처, 기하학적 패턴, 레이어드 투명도, 드라마틱한 그림자, 장식용 테두리, 커스텀 커서, 그레인 오버레이 등 창의적인 형태를 적용하세요.
절대 일반적인 AI 생성 미학을 사용하지 마세요: 남용된 폰트 패밀리(Inter, Roboto, Arial, 시스템 폰트), 진부한 색상 구성(특히 흰색 배경에 보라색 그라디언트), 예측 가능한 레이아웃 및 컴포넌트 패턴, 그리고 맥락에 맞는 특성이 결여된 획일적인 디자인.
창의적으로 해석하고, 맥락에 맞게 진정으로 디자인된 느낌의 예상치 못한 선택을 하세요. 어떤 디자인도 같아서는 안 됩니다. 라이트/다크 테마, 다양한 폰트, 다른 미학을 번갈아 사용하세요. 세대를 거쳐 공통된 선택(Space Grotesk 등)에 수렴하지 마세요.
중요: 구현 복잡성을 미학적 비전에 맞추세요. 맥시멀리스트 디자인은 광범위한 애니메이션과 효과가 포함된 정교한 코드가 필요합니다. 미니멀리스트 또는 정제된 디자인은 절제, 정밀함, 간격, 타이포그래피 및 미묘한 디테일에 세심한 주의가 필요합니다. 우아함은 비전을 잘 실행하는 데서 옵니다.
기억하세요: Claude는 뛰어난 창의적 작업을 할 수 있습니다. 주저하지 말고, 상자 밖에서 생각하고 독특한 비전에 완전히 헌신할 때 진정으로 창조할 수 있는 것을 보여주세요.
작업 중심의 디자인 워크플로우
모니터/운영/작성 분류, 맥락 발견, 변형, 상태 및 검증을 위한 전체 디자인 워크플로우를 읽으세요. 기존 제품에서는 디자인 시스템과 사용자 작업이 위의 미학적 탐구보다 우선합니다: 운영 UI에 비정상적인 폰트, 겹침, 장식 배경 또는 마케팅 구성을 강제하지 마세요. 사용 가능한 브라우저 및 파일 도구를 사용하고, 특정 모델 제품을 사용하지 마세요. 선택적 참조 카탈로그는 prismer-popular-web-designs와 prismer-design-md입니다. 사용자가 요청한 작업에 대해서만 로드하세요.