프론트엔드 디자인 방향은(는) 무엇을 하나요?
이 스킬은 작업이 단순히 UI를 기능적으로 만드는 것이 아니라, 의도적이고 세련되며 제품 도메인에 적합한 느낌을 갖추도록 할 때 사용합니다.
출처: linus707의 오래된 커뮤니티 PR #1659에서 발췌.
참고: ECC는 공식 Anthropic frontend-design 스킬을 의도적으로 번들로 포함하지 않습니다. 공식 상위 스킬이 필요하면 anthropics/skills에서 설치하세요. 이 스킬은 #1659의 유용한 로컬 가이드라인을 ECC 특화 디자인 방향으로 추출한 것입니다.
사용 시기
- 사용자가 웹 페이지, 앱, 대시보드, 아티팩트, 컴포넌트 또는 UI를 구축하도록 요청할 때.
- 사용자가 인터페이스를 더 세련되고, 독특하며, 아름답거나 덜 평범하게 만들도록 요청할 때.
- 구현에 시각적 계층 구조, 타이포그래피, 색상, 모션, 레이아웃 및 상호작용 선택이 필요할 때.
- 현재 UI가 작동하지만 평평하고, 일반적이며, 템플릿 같거나 대상 사용자와 맞지 않을 때.
디자인 방향
코딩 전에, 구체적인 방향을 선택하세요:
- 목적: 인터페이스는 어떤 작업을 수행하나요?
- 대상 사용자: 이 워크플로우를 반복하는 사람은 누구이며, 무엇을 가장 먼저 확인해야 하나요?
- 톤: 실용적, 편집적, 장난기, 산업적, 정제됨, 기술적, 최대주의, 미니멀, 조밀함, 차분함 또는 다른 명확한 방향.
- 기억에 남는 디테일: 결과물이 의도적으로 느껴지게 하는 하나의 디자인 아이디어.
- 제약 조건: 프레임워크, 접근성, 성능, 반응형 및 기존 디자인 시스템.
방향을 도메인에 맞추세요. SaaS 운영 도구는 일반적으로 조밀하고, 조용하며, 스캔 가능해야 합니다. 포트폴리오, 런칭 페이지, 게임 또는 편집물은 더 표현적일 수 있습니다. 매일 반복 사용해야 하는 도구에 랜딩 페이지 구성을 강제하지 마세요.
구현 가이드라인
- 사용자가 명시적으로 마케팅 카피를 요청하지 않는 한, 첫 번째 화면으로 실제 사용 가능한 경험을 구축하세요.
- 새로운 시각 시스템을 도입하기 전에 기존 프로젝트 컴포넌트, 토큰, 아이콘 라이브러리 및 라우팅 패턴을 사용하세요.
- 인터페이스가 이미지, 제품, 장소, 사람, 게임플레이, 차트 또는 검사 가능한 미디어에 의존할 때는 실제 또는 생성된 시각적 자산을 사용하세요.
- 일반적인 과장된 히어로 텍스트보다 맥락에 맞는 타이포그래피와 간격을 선호하세요.
- 팔레트는 다차원적으로 유지하세요: 하나의 색조 계열이 UI를 지배하지 않도록 하세요.
- CSS 변수 또는 기존 디자인 토큰을 사용하여 상태 전반에 걸쳐 디자인 방향이 일관되게 유지되도록 하세요.
- 반응형 제약 조건을 명시적으로 설계하세요: 그리드, 종횡비, 최소/최대 크기, 안정적인 툴바 및 고정 형식 컨트롤은 레이블이나 호버 상태가 나타날 때 변경되지 않아야 합니다.
- 모션은 드물게 사용하지만 의도적으로 사용하세요. 상태를 명확히 하는 고신호 전환을 장식적 애니메이션보다 선호하세요.
- 모바일과 데스크톱에서 텍스트가 잘 맞는지 확인하세요. 긴 레이블은 넘치지 않고 깔끔하게 줄 바꿈되거나 크기가 조정되어야 합니다.
안티패턴
- 일반적인 생성 패턴(보라색 그라데이션, 장식용 블롭, 과장된 카드, 모호한 히어로 카피, 스톡 같은 분위기 미디어)을 기본값으로 사용하지 마세요.
- 다른 카드 안에 UI 카드를 추가하지 마세요.
- 도메인이 절제를 요구할 때 한 가지 장식 스타일을 모든 곳에 사용하지 마세요.
- 기본 제품, 도구, 개체 또는 워크플로우를 일반 마케팅 섹션 뒤에 숨기지 마세요.
- 디자인 효과를 위해 명확한 이점이 없는 한 새 의존성을 추가하지 마세요.
- 컨트롤이 스스로 설명할 수 있을 때 UI 내에서 UI의 기능을 설명하지 마세요.
리뷰 체크리스트
- 첫 번째 뷰포트는 즉시 제품, 워크플로우 또는 개체를 전달합니다.
- 시각적 계층 구조는 스캔 및 반복 사용을 지원합니다.
- 타이포그래피가 컨테이너에 맞고 인접 콘텐츠와 겹치지 않습니다.
- 색상 선택에 대비가 있으며 단일 톤 팔레트로 축소되지 않습니다.
- 사용 가능한 경우 익숙한 도구 작업에 아이콘이 사용됩니다.
- 반응형 레이아웃은 보드, 그리드, 툴바, 컨트롤, 타일 및 카운터에 대해 안정적인 치수를 가지고 있습니다.
- 자산이 렌더링되고 채우기 역할 대신 주제를 전달합니다.
- 모션은 방향성을 개선하고 지연을 가리지 않습니다.
- 명확한 이탈 이유가 없는 한 결과물은 리포지토리의 기존 프론트엔드 규칙과 일치합니다.