철칙
디자인 사고 단계를 완료하지 않고 UI를 출력하지 마십시오 — 코드 한 줄을 작성하기 전에 목적, 톤(한 방향), 차별화 앵커를 정의하십시오. 진행하려면 DFII 점수가 8 이상이어야 합니다.
프론트엔드 디자인 스킬
목적
창의적인 프론트엔드 디자인 방법론, 시각적 원칙 및 품질 체크리스트를 제공하여 일반적인 AI 미학을 피하는 차별화된 프로덕션급 인터페이스를 구축합니다.
프로세스
- 디자인 사고 단계 (필수 — 건너뛰지 마십시오)
- 목적 정의: 이 인터페이스는 어떤 행동을 가능하게 합니까? 설득력, 기능적, 탐색적, 표현적 중 무엇입니까?
- 톤 정의: 하나의 지배적인 방향을 선택하십시오(브루탈리즘 / 에디토리얼 / 럭셔리 / 레트로-퓨처리스틱 / 인더스트리얼 / 오가닉 / 플레이풀 / 맥시멀리스트 / 미니멀리스트). 두 개 이상 혼합하지 마십시오.
- 차별화 앵커 정의: "로고가 제거된 스크린샷이라면 어떻게 알아볼 수 있습니까?"라는 질문에 답하십시오. 이것이 최종 UI에 보여야 합니다.
- DFII 점수 매기기 — 디자인 실현 가능성 및 영향 지수 계산(아래 참조). 점수가 8 미만이면 진행 전에 방향을 재고하십시오.
- 원칙 로드 --
reference/frontend-design-principles.md를 읽어 타이포그래피, 색상, 모션 및 레이아웃 지침을 확인하십시오. - 구현 -- 선택한 미학에 맞춰 작동하는 코드(Angular, Flutter 또는 HTML/CSS/JS)를 빌드하십시오. 작업 공간 디자인 토큰(Angular용 daisyUI, Flutter용 AppSpacing/colorScheme)을 따르십시오.
- 필요한 출력 구조로 전달 -- 디자인 방향 요약, 디자인 시스템 스냅샷, 구현 및 차별화 코멘트를 포함하십시오.
전체 디자인 원칙, 안티-패턴 및 품질 체크리스트를 보려면:
reference/frontend-design-principles.md를 읽으십시오.
오류 처리
대상 프레임워크가 지정되지 않은 경우 진행 전에 사용자에게 물어보십시오. 외부 글꼴/에셋 리소스를 사용할 수 없는 경우 대체 선택을 문서화하고 계속하십시오.
디자인 실현 가능성 및 영향 지수 (DFII)
코드를 작성하기 전에 디자인 방향에 점수를 매기십시오. 진행하려면 최소 8점이 필요합니다.
차원 (각 1~5점)
| 차원 | 질문 |
|---|---|
| 미학적 영향 | 이 방향이 시각적으로 얼마나 독특하고 기억에 남는가? |
| 맥락 적합성 | 이 미학이 제품, 대상 및 목적에 적합한가? |
| 구현 실현 가능성 | 사용 가능한 기술로 깔끔하게 구축할 수 있는가? |
| 성능 안전성 | 빠르고 접근성을 유지할 수 있는가? |
| 일관성 리스크 | 화면/컴포넌트에서 유지 관리할 수 있는가? (이것을 차감) |
공식
DFII = (영향 + 적합성 + 실현 가능성 + 성능) − 일관성 리스크
범위: −5 → +15
해석
| DFII | 의미 | 조치 |
|---|---|---|
| 12–15 | 우수 | 완전히 실행 |
| 8–11 | 강력 | 규율을 가지고 진행 |
| 4–7 | 위험 | 범위 또는 효과 축소 |
| ≤ 3 | 약함 | 미학 방향 재고 |
요구되는 출력 구조
모든 프론트엔드 디자인 출력은 다음 네 개의 섹션을 모두 포함해야 합니다:
1. 디자인 방향 요약
- 미학 이름 (예: "에디토리얼 브루탈리즘", "럭셔리 미니멀")
- DFII 점수
- 주요 영감 (개념적 — 시각적 표절 금지)
2. 디자인 시스템 스냅샷
- 글꼴 (근거 포함 — 이 제품에 왜 이 글꼴인가?)
- 색상 변수 (이름 지정:
--color-primary,--color-accent,--color-neutral) - 간격 리듬 (기본 단위 및 척도)
- 모션 철학 (드물게/의도적으로? 또는 없음?)
3. 구현
- 완전한 작동 코드
- 의도가 명확하지 않은 경우에만 주석
- Angular의 경우: daisyUI 시맨틱 토큰 사용 (
bg-primary,text-base-content) — 하드코딩된 16진수 금지 - Flutter의 경우:
Theme.of(context).colorScheme및AppSpacing.*토큰 사용 —Color(0xFF...)금지
4. 차별화 코멘트
명시적으로 명시:
"이것은 Y 대신 X를 함으로써 일반적인 UI를 피합니다."
이 문장을 완성할 수 없다면 디자인이 충분히 차별화되지 않은 것입니다.
운영자 체크리스트 (전달 전 게이트)
- 디자인 사고 단계 완료 (목적 + 톤 + 차별화 앵커 정의)
- DFII 점수 ≥ 8
- 최종 UI에 기억에 남는 디자인 앵커 하나가 보임
- 일반적인 글꼴 없음 (Inter, Roboto, Arial, system-ui 금지)
- 일반적인 색상 없음 (보라색-흰색 그라디언트, 평평한 회색 금지)
- 기본 레이아웃 없음 (대칭형 카드 그리드, 템플릿형 구조 금지)
- 코드가 디자인 야망과 일치 (맥시멀리스트 = 복잡한 코드; 미니멀리스트 = 정확한 간격)
- 접근 가능하고 성능이 좋음 (대비 ≥ 4.5:1, 포커스 상태, 키보드 내비게이션)
- 요구되는 출력 구조: 4개 섹션 모두 존재
- 이전 디자인과 비슷해 보이지 않아야 함 — 밝음/어두움, 글꼴 선택, 레이아웃 개성을 다양화
창의적 야망 명령
Claude는 뛰어난 창의적 작업을 할 수 있습니다. 망설이지 말고 — 독특한 비전에 온전히 헌신하여 진정으로 창조할 수 있는 것을 보여주십시오.
요구 사항을 창의적으로 해석하십시오. 맥락에 대해 진정으로 설계된 느낌을 주는 예상치 못한 선택을 하십시오. 두 디자인이 동일한 미학적 DNA를 공유해서는 안 됩니다.
세대를 걸쳐 일반적인 선택에 수렴하지 마십시오. Space Grotesk, 보라색 그라디언트 또는 대칭형 히어로 레이아웃이 "이전에 효과가 있었다"는 사실은 정확히 다시 사용하지 말아야 하는 이유입니다. 다양성은 선택 사항이 아니라 필수입니다.
시작 전 물어볼 질문 (필요한 경우)
- 이것은 감정적으로 누구를 위한 것입니까?
- 신뢰감, 흥미, 평온함 또는 도발적으로 느껴져야 합니까?
- 기억에 남는 것이 더 중요합니까, 명확성이 더 중요합니까?
- 이것이 다른 페이지/컴포넌트로 확장될 수 있습니까?
- 사용자가 처음 3초 안에 무엇을 느껴야 합니까?
작업 공간 통합
| 스택 | 디자인 토큰 규칙 | 참고 자료 |
|---|---|---|
| Angular | daisyUI 시맨틱 토큰만 사용 — bg-primary, text-base-content, border-base-300 | angular-spa/reference/daisyui-v5-components.md |
| Flutter | Theme.of(context).colorScheme.* + AppSpacing.* — 절대 Color(0xFF...) 또는 EdgeInsets.all(16) 사용 금지 | ui-standards-tokens/reference/ui-design-tokens.md |
| HTML/CSS | CSS 변수만 사용 — var(--color-primary) | :root 블록에 정의 |
| React Native | 이 스킬의 범위 밖 → mobile-developer 스킬 사용 | .claude/skills/mobile-developer/SKILL.md |
관련 스킬:
web-design-guidelines— 구현 후 실행하여 Vercel 웹 인터페이스 가이드라인 감사design-system— Angular 및 Flutter용 토큰 컴플라이언스 시행angular-spa— daisyUI를 사용한 Angular 구현 패턴ui-standards-tokens— Flutter 디자인 토큰 정의