design-range

Design Range

기본 설정에 맡기면 Claude는 모든 제품을 똑같은 방식으로 디자인합니다: Inter나 Geist, 인디고/바이올렛 그라데이션, 버튼 두 개가 있는 가운데 정렬 히어로, 색상이 들어간 원 안에 아이콘이 있는 세 개의 기능 카드, 모든 곳에 rounded-2xl, 부드러운 회색 그림자. 괜찮아 보이긴 하지만 다른 AI가 만든 사이트와 똑같아 보입니다. 이 스킬은 의도적으로 그 패턴을 깨기 위해 존재합니다.

핵심 동작은 간단합니다: 스타일을 직접 고르지 말고 굴리세요. '스타일을 선택'하라는 모델은 매번 같은 몇 가지 선택지에 도달하므로, 선택권은 일관된 방향의 라이브러리에서 샘플링하고 이 프로젝트에서 최근에 사용한 것에서 멀어지는 스크립트에 넘겨집니다. 당신의 임무는 그 방향을 완전히 따라 세심하게 실행하는 것입니다.

워크플로우

1. 상황 파악

• 무엇을 구축하나요? 제품 유형 중 하나에 매핑하세요: marketing (랜딩 페이지, 사이트, 포트폴리오도 여기에 포함), saas (사용자가 작업하는 앱 화면), dashboard (분석, 관리, 모니터링), ecommerce (스토어, 제품 및 카테고리 페이지), mobile (네이티브 또는 모바일 우선 앱 화면), portfolio.
• 기존 브랜드나 디자인 시스템이 있나요? 프로젝트에 이미 정해진 토큰, design-direction.md 파일이 있거나 사용자가 기존 앱에 기능을 요청하는 경우, 그 방향을 유지하세요. 다양성은 새 프로젝트, 리디자인, 사용자가 다른 것을 요청할 때를 위한 것입니다. 하나의 제품 내에서의 일관성은 기능입니다. 제품 간의 동일함이 버그입니다.
• 사용자가 특정 분위기를 언급했나요? ('고급스러운', '장난기 있는', '어둡고 테크한'). 그것을 필터(--energy, --mode) 또는 특정 --show <id>로 변환하되, 구체적으로 지정하지 않았다면 대안도 함께 보여주세요.
• 취향 파일. references/taste.md에 내용이 있으면 읽으세요. 사용자의 개인적인 좋아함과 싫어함을 담고 있으며, 충돌 시 라이브러리를 재정의합니다. exclude:와 favor: 줄은 롤 스크립트에 의해 자동으로 적용됩니다. 나머지 내용(좋아하는 폰트, 색상, 마음에 들었던 기술)은 구축할 방향에 반영하기 위해 참고하세요.

2. 방향 롤링

python3 <skill-dir>/scripts/roll.py --product <type> [--count 3] [--mode light|dark] [--energy quiet|medium|loud]

프로젝트 루트에서 실행하세요. 두 가지 히스토리, 프로젝트의 .design-history.json과 모든 프로젝트를 포괄하는 공유 ~/.claude/design-range-history.json을 읽고, 둘 모두에서 멀어져 다음 제품이 이전 제품과 같은 모양을 받지 않도록 합니다. 또한 악센트 색상을 분산시킵니다: 각 옵션의 팔레트는 악센트 색상이 다른 옵션 및 최근에 사용된 악센트 색상과 멀리 떨어지도록 선택되어 '다양성'이 다른 폰트의 동일한 색상군으로 축소되는 것을 방지합니다. 대비되는 세 가지 옵션을 출력하며, 각 옵션은 완전한 브리프입니다: 분위기, 준비된 CSS URL이 있는 폰트, 명명된 팔레트, 레이아웃 원형, 형태 언어, 모션, 시그니처 무브, 피해야 할 것, Tailwind v4 @theme 블록.

기타 명령어: --list (모든 방향), --show <id> --product <type> (하나의 방향 전체, 선택적으로 --font N --palette N --layout <id>).

3. 사용자가 선택하도록 하기 (주변에 있을 때)

옵션을 간결하게, 각각 짧은 블록으로 제시하세요: 이름, 한 줄 분위기, 폰트 쌍, 16진수 값의 팔레트, 레이아웃 아이디어. 어떤 것을 원하는지 물어보고, 혼합('옵션 2의 폰트와 옵션 3의 팔레트')하거나 다시 롤링할 수 있다고 언급하세요.

사용자가 '그냥 만들어 줘'라고 하거나 인간 개입 없이 실행 중인 경우, 당신이 선택하되 적합성을 위해 선택하세요. 무작위성은 습관을 깨기 위한 것이지, 저녁 식사 플래너에 나이트클럽 미학을 입히기 위한 것이 아닙니다. 각 옵션에 대해 질문하세요: 이 브랜드의 고객이 이 디자인에서 자신을 알아볼까요? 분위기가 제품의 용도에 맞을까요?(웰빙과 금융에는 차분함, 스포츠와 나이트라이프에는 활기참, 데이터에는 정확함, 음식과 홈에는 따뜻함). 가장 잘 맞는 옵션을 고르세요. 맞는 것이 없으면 한 번 다시 롤링하고(--count 4, 또는 --energy/--mode로 필터링) 새 세트에서 고르세요. 놀라운 선택은 한 문장으로 왜 제품에 적합한지 설명할 수 있을 때 좋습니다. 그 문장을 어떤 방향을 사용했는지 보고할 때 함께 말하세요. 아무도 선택하지 않을 결정을 기다리며 구축을 지연시키지 마세요.

4. 기록하고 방향 파일 작성하기

python3 <skill-dir>/scripts/roll.py --record <id> --font N --palette N --layout <layout-id> --product <type>

이 명령은 프로젝트 히스토리와 공유 히스토리 모두에 기록합니다. 그런 다음 선택한 브리프를 프로젝트 루트에 design-direction.md로 저장하세요. 향후 세션(그리고 한 시간 후의 당신)은 이 파일을 읽어 이 제품 내에서 일관성을 유지하고, 공유 히스토리는 다음 제품이 같은 모양을 받지 않도록 합니다.

5. 구축하기

구축하기 전에 일치하는 플랫폼 참조를 읽으세요. 각 제품 유형에는 고유한 제작 규칙이 있기 때문입니다:

제품	읽을 파일
marketing, portfolio	references/marketing.md
saas	references/saas.md
dashboard	references/dashboard.md
ecommerce	references/ecommerce.md
mobile	references/mobile.md

스택: 기본적으로 React + Tailwind (아래 '스택 설정' 참조). 그런 다음:

• 먼저 토큰을 연결하세요. 폰트를 로드하고, @theme 블록을 붙여넣고, 의미론적 이름으로 스타일을 지정하세요(bg-bg, bg-surface, text-text, text-muted, border-border, bg-accent, font-display). 스크립트가 이미 대비를 확인했습니다: bg나 surface 위에 악센트 색상 텍스트가 있을 때는 text-accent-ink를 사용하고(악센트가 이미 읽을 수 있을 때는 악센트와 같음), 악센트로 채워진 버튼과 배지의 레이블에는 text-on-accent를 사용하세요. 브리프에 Contrast 줄이 있으면 조정된 내용을 알려줍니다. indigo-500이나 slate-100과 같은 원시 Tailwind 팔레트 클래스는 기본 모양이 다시 새어 나오는 방법이므로 컴포넌트에서 사용하지 마세요.

• 방향에 충실하세요. 시그니처 무브 중 적어도 두 가지를 눈에 띄게 사용하고, '피해야 할' 목록을 엄격한 제약 조건으로 취급하세요. 방향이 소심하게 적용되면(올바른 폰트, 나머지는 기본값) 다시 일반적인 모양으로 돌아갑니다. 브리프에서 반경 0이라고 하면 둥근 것은 없습니다. 하드 오프셋 그림자를 말하면 흐릿한 그림자는 없습니다.

• 레이아웃 원형이 페이지를 형성하도록 하세요. 롤링된 레이아웃(예: sticky-scroll-story, three-pane, hub-and-sheet)은 가운데 정렬 히어로 + 세 개의 카드 뼈대를 깨기 위해 있습니다. 이를 중심으로 구축하세요.

• 팔레트를 확장하되, 교체하지 마세요. 호버, 활성, 미묘한 색조가 필요합니다. 새로운 색조를 사용하기보다는 주어진 색상에서 파생시키세요(color-mix(in oklch, var(--color-accent) 85%, black) 또는 bg-accent/10과 같은 불투명도 수정자).

• 실제 콘텐츠. 제품에 대해 그럴듯하고 구체적인 카피를 작성하세요. Lorem ipsum과 '기능 1'은 디자인이 실제로 작동하는지 숨깁니다.

• 움직임을 만드세요. 정적 페이지는 템플릿처럼 느껴지며, 사용자의 취향 파일은 모든 빌드에서 모션을 요구합니다. 각 빌드는 방향 고유의 motion 성격(브루탈리스트와 스포츠는 스내피, 토이박스는 스프링, 시네마틱은 느리고 필름같이, 오거나닉은 부드럽게, 레트로 OS는 스텝 방식)으로 표현된 다음 네 가지를 모두 포함합니다:

  1. 로드 시 엔트리 안무: 히어로의 조각들이 짧은 순차적 간격(헤드라인, 그다음 카피, 그다음 액션, 60-120ms 간격)으로 도착하며, 한 번에 모두 오거나 하나의 느린 페이드가 아닙니다.
  2. 클릭 가능한 모든 것에 대한 호버 및 프레스 피드백: 방향 스타일에 따라 (하드 섀도우 프레스, 스프링 스케일, 밑줄 슬라이드, 글로우, 워블).
  3. 브리프의 motion 또는 signature 필드에서 가져온 하나의 시그니처 애니메이션 (반짝임, 회전하는 글리프, 변형하는 블롭, Ken Burns, 타자기, 마키, 회전하는 모양). 사람들이 기억하는 순간이므로 눈에 띄는 자리를 주세요.
  4. 접힌 부분 아래 섹션에 맞는 스크롤 리빌 (IntersectionObserver 또는 폴백이 있는 CSS animation-timeline: view()).

  레이아웃 속성보다는 transform과 opacity에 애니메이션을 적용하여 부드럽게 유지하고, UI 피드백은 ~300ms 미만으로 유지하며, 장식적인 모든 것은 @media (prefers-reduced-motion: no-preference) 뒤에 넣어(또는 reduce 아래에서 끄기) 모션을 끈 사람들이 차분하고 완전한 페이지를 얻도록 하세요.

6. 마무리 전 동일성 점검

구축한 것을 보고, 방향에서 명시적으로 요구하지 않는 한 다음 중 어떤 것이라도 수정하세요:

• 표시용 디스플레이 폰트로 Inter, Roboto, Arial 또는 system-ui 사용
• 보라색/인디고/파란색-바이올렛 그라데이션이 어디든 있음
• 가운데 정렬 히어로, 헤드라인 + 서브헤드 + 두 개의 버튼, 그다음 3열 아이콘 카드 그리드
• 모든 컨테이너가 rounded-xl/2xl에 shadow-md/lg
• 파스텔 색상 원 안에 있는 아이콘
• 회색-50 페이지에 흰색 카드가 전체 시각적 아이디어인 경우
• 모든 텍스트가 동일한 몇 가지 크기; 타이포그래피 대비 없음
• 헤드라인의 그라데이션 텍스트 (Y2K 크롬 또는 글래스 오로라가 아닌 경우)

그런 다음 빠른 제작 점검: 텍스트 대비가 WCAG AA(4.5:1 본문, 3:1 큰 텍스트)를 충족하는지, 모든 인터랙티브 요소에 호버, focus-visible 및 disabled 상태가 있는지, 375px 너비에서 작동하는지, 애니메이션이 prefers-reduced-motion을 존중하는지 확인하세요.

스택 설정

Tailwind v4 (기본값): 폰트 <link>를 index.html에 넣거나 (또는 next/font / CSS 상단의 @import url(...)), 메인 CSS 파일의 @import "tailwindcss"; 뒤에 롤링된 @theme 블록을 넣으세요. bg-accent, font-display, text-muted와 같은 클래스가 자동으로 작동합니다.

Tailwind v3: 동일한 값을 tailwind.config.js의 theme.extend.colors와 theme.extend.fontFamily 아래에 같은 이름으로 넣으세요.

Next.js: Google Fonts의 경우 next/font/google을 선호하고(같은 이름, 공백은 밑줄), CSS 변수에 매핑하세요. Fontshare 폰트는 CSS URL을 통해 로드됩니다.

React Native / Expo (mobile의 경우): tailwind.config.js에 팔레트를 사용하여 NativeWind를 사용하고, @expo-google-fonts/<font-name> 또는 expo-font로 폰트를 로드하세요. Fontshare 폰트는 폰트 파일을 assets/fonts에 다운로드해야 합니다. 사용자가 시각적 목업만 원한다면, 모바일 크기의 React 웹 페이지(390x844 프레임)도 괜찮고 훨씬 빠릅니다. 불확실하면 물어보세요.

단일 파일 미리보기: 아직 프로젝트가 없고 사용자가 보고만 싶다면, Tailwind CDN(<script src="https://cdn.tailwindcss.com"></script> (v3 설정) 또는 인라인 <style type="text/tailwindcss">@theme {...}</style>이 있는 @tailwindcss/browser@4)과 ESM을 통한 React가 포함된 단일 HTML 파일도 허용됩니다.

사용자가 더 많은 범위를 원할 때

• 다시 롤링: 스크립트를 다시 실행하세요. 이미 최근 선택을 피합니다.
• 리믹스: 한 방향의 유형을 다른 방향의 팔레트와 결합하세요. 결과가 여전히 일관성 있는지 확인하세요 (픽셀 폰트와 럭셔리 팔레트는 농담이며, 그것이 의도인 경우에만 괜찮습니다).
• 새로운 방향: 사용자가 라이브러리에 없는 모양을 설명하면, 같은 형식으로 assets/directions.json에 추가하여 향후 롤에 포함되도록 하세요. 해당 폰트가 Google Fonts 또는 Fontshare에 있는지 확인하세요.
• 취향: 사용자가 좋아하거나 싫어하는 것을 말할 때('세리프 절대 사용하지 마', '브루탈리즘 사랑해'), references/taste.md에 추가하여 매번 적용되도록 제안하세요.