프론트엔드 디자인

[프론트엔드 디자인 스킬 활성화]

목표

탁월한 디자인 품질을 갖춘 독창적이고 프로덕션 수준의 프론트엔드 인터페이스를 생성함. 웹 컴포넌트, 페이지, artifact, 포스터, 애플리케이션 구축 시 활용하며, 일반적인 AI 생성 심미성을 피하고 창의적이고 세련된 코드와 UI 디자인을 제공함.

활성화 조건

사용자가 웹 컴포넌트, 페이지, 대시보드, React 컴포넌트, HTML/CSS 레이아웃 구축 또는 웹 UI 스타일링/미화 요청 시 활성화.

워크플로우

중요: 추가적인 파일 탐색이나 에이전트 위임 없이, 아래 디자인 원칙을 즉시 프롬프트로 출력하여 프론트엔드 작업에 적용하세요.

Design Thinking

코딩 전에 컨텍스트를 이해하고 대담한 심미적 방향을 결정:

• 목적: 이 인터페이스는 어떤 문제를 해결하는가? 누가 사용하는가?
• 톤: 극단적 선택 — 극도로 미니멀, 극도로 맥시멀, 레트로 퓨처리스틱, 유기적/자연적, 럭셔리/정제, 장난스러운/토이 같은, 에디토리얼/매거진, 브루탈리스트/원시적, 아르데코/기하학적, 소프트/파스텔, 산업적/실용적 등. 무수히 많은 풍미가 있으므로 이를 영감으로 사용하되 심미적 방향에 진정으로 부합하는 디자인을 고안.
• 제약: 기술 요구사항 (프레임워크, 성능, 접근성).
• 차별화: 무엇이 이것을 잊을 수 없게 만드는가? 사람들이 기억할 한 가지는 무엇인가?

핵심: 명확한 개념적 방향을 선택하고 정밀하게 실행. 대담한 맥시멀리즘과 정제된 미니멀리즘 모두 작동함 — 핵심은 의도성이며 강렬함이 아님.

그런 다음 작동하는 코드(HTML/CSS/JS, React, Vue 등)를 구현. 코드는 다음을 만족:

• 프로덕션 수준이며 기능적
• 시각적으로 인상적이며 기억에 남음
• 명확한 심미적 관점을 가진 응집력 있는 디자인
• 모든 세부 사항이 세심하게 정제됨

프론트엔드 심미성 가이드라인

다음에 집중:

타이포그래피

아름답고 독특하며 흥미로운 폰트를 선택. Arial이나 Inter 같은 일반적인 폰트를 피하고, 프론트엔드의 심미성을 향상시키는 독창적인 선택을 선호. 예상치 못한, 개성 있는 폰트 선택. 독특한 디스플레이 폰트와 정제된 본문 폰트를 페어링.

색상과 테마

응집력 있는 심미성에 전념. CSS 변수로 일관성 유지. 주요 색상과 날카로운 강조색이 소심하고 균등하게 분포된 팔레트를 능가함.

모션

효과와 마이크로 인터랙션에 애니메이션 사용. HTML의 경우 CSS 전용 솔루션 우선. React의 경우 가능하면 Motion 라이브러리 사용. 고임팩트 순간에 집중: 단계적 표시(animation-delay)가 있는 잘 조율된 페이지 로드가 흩어진 마이크로 인터랙션보다 더 많은 즐거움을 생성. 스크롤 트리거와 놀라움을 주는 호버 상태 사용.

공간 구성

예상치 못한 레이아웃. 비대칭. 겹침. 대각선 흐름. 그리드를 깨는 요소. 넉넉한 네거티브 스페이스 또는 통제된 밀도.

배경과 시각적 디테일

단색 기본값 대신 분위기와 깊이를 생성. 전체 심미성과 일치하는 맥락적 효과와 텍스처 추가. 그라디언트 메시, 노이즈 텍스처, 기하학적 패턴, 레이어드 투명도, 극적인 그림자, 장식적 테두리, 커스텀 커서, 그레인 오버레이 같은 창의적 형태 적용.

피해야 할 일반적인 AI 심미성

절대 사용 금지:

• 과도하게 사용된 폰트 패밀리 (Inter, Roboto, Arial, 시스템 폰트)
• 진부한 색상 조합 (특히 흰색 배경 위의 보라색 그라디언트)
• 예측 가능한 레이아웃과 컴포넌트 패턴
• 맥락 특정 개성이 부족한 쿠키 커터 디자인

창의적으로 해석하고 맥락에 진정으로 설계된 느낌을 주는 예상치 못한 선택을 하세요. 어떤 디자인도 동일해서는 안 됩니다. 라이트 테마와 다크 테마, 다양한 폰트, 다양한 심미성 간을 변화시키세요. 절대 공통적인 선택(예: Space Grotesk)으로 수렴하지 마세요.

중요: 구현 복잡도를 심미적 비전에 맞추세요:

• 맥시멀리스트 디자인 → 광범위한 애니메이션과 효과가 포함된 정교한 코드 필요
• 미니멀리스트 또는 정제된 디자인 → 절제, 정밀함, 간격/타이포그래피/미묘한 디테일에 대한 신중한 주의 필요

우아함은 비전을 잘 실행하는 것에서 나옵니다.

MUST 규칙

MUST NOT 규칙

검증 체크리스트

• frontmatter에 name, description 포함
• Design Thinking 섹션에 목적/톤/제약/차별화 정의
• 타이포그래피 가이드에 독창적 폰트 선택 강조
• 색상/테마 가이드에 응집력 강조
• 모션 가이드에 고임팩트 순간 강조
• 공간 구성 가이드에 예상치 못한 레이아웃 강조
• 배경 가이드에 분위기와 깊이 생성 강조
• 일반적인 AI 심미성 피하기 섹션에 금지 사항 명시
• 구현 복잡도 조정 가이드 포함