imagile-dev/design

design은(는) 무엇을 하나요?

'생성된 것'이 아닌 '선택된 것'처럼 읽히는 인터페이스를 만드세요. 모든 기본값은 누군가가 건너뛴 결정입니다. 이 스킬은 각 결정을 의도적으로 내립니다. 먼저 브리핑을 작성하고, 품질 기준에 맞춰 빌드한 후, 실제 스크린샷으로 비평합니다.

두 가지 실패 모드가 있으며, 첫 번째가 더 나쁩니다:

1. 제너릭. 페이지가 해당 카테고리의 어떤 제품에도 속할 수 있습니다. 현재 AI 기본값을 따르거나, 너무 평범해서 아무도 기억하지 못합니다.
2. 노이즈. 모든 요소가 제 역할을 합니다. 모션, 그라디언트, 장식 요소가 경쟁하며, 어떤 것도 먼저 읽히지 않습니다.

두 경우 모두에 대한 해결책은 하나의 강력한 아이디어를, 규율 있는 시스템 안에서, 한 곳에 표현하는 것입니다. 절제가 목표가 아닙니다. 의도성이 목표입니다.

1. 모드 선택

모드	사용 시기	수행할 작업
Build	새 페이지, 화면, 컴포넌트, 덱 또는 이미지 세트	섹션 2~5
Refine	"더 대담하게, 더 조용하게, 더 간단하게, 더 화려하게, 더 생동감 있게" 만들기	섹션 6
Critique	"검토해 줘", "이게 맞아 보이나요?", 점수 매기기	references/critique.md
Polish	비주얼 작업을 출시하기 전에	섹션 7

Refine은 절대 리디자인하지 않습니다. 정체성, 복사본 및 요청 외의 모든 것을 유지합니다. 요청이 리디자인을 필요로 한다면 그렇게 말하고 중단하세요. 둘 사이를 절대 타협하지 마세요.

2. 컨텍스트 먼저 로드

1. 리포지토리 루트의 DESIGN.md, 리포지토리의 CLAUDE.md, 기존 토큰(global.css, tailwind.config.*, 테마 파일) 및 .claude/image-generation/style.md를 읽습니다.
2. 브리핑이 우선입니다. DESIGN.md나 사용자가 특정 스타일을 지정하면, 해당 스타일이 특징 목록(tells list)에 있더라도 정확히 따르세요. 아래 규칙은 아직 아무도 결정하지 않은 선택에 대해서만 적용됩니다.
3. DESIGN.md가 없으면 리포지토리를 탐색한 후, 지속적인 사실(누가 사용하는지, 무엇을 달성해야 하는지, 어떤 증거가 있는지)에 대해 최대 세 가지 질문을 합니다. 추상적으로 미적 감각을 선택하도록 요청하지 마세요. 대신 두세 가지 옵션을 보여주세요.
4. 배운 내용을 references/design-md.md의 DESIGN.md에 작성하세요. 다음 세션에서 다시 질문하지 않아도 됩니다.
5. 수정 사항은 상시 규칙입니다. 사용자가 시각적 선택을 수정하면, 같은 턴에 DESIGN.md의 "상시 규칙(Standing rules)"에 한 줄을 추가하세요.
6. 현재 확보된 증거만 사용하세요. 사용 후기, 고객 로고, 사용자 수, 지표 또는 인용구를 절대 만들어내지 마세요. 플레이스홀더 데이터를 표시하고 사용자가 확인하도록 나열하세요.

3. 브리핑 작성 (Build 모드)

코드를 작성하기 전에 채팅에 짧은 브리핑을 게시하세요. 1분이면 충분하며 제너릭 결과를 방지합니다.

1. 디자인 리드. 한 줄: "이것을 [대상]을 위한 [표면]으로, [모드] 모드로, [방향] 쪽으로 읽습니다."

2. 표면 모드. 제품별이 아닌 표면별로 하나를 선택하세요. 개발자 도구의 랜딩 페이지라도 여전히 Persuade입니다.

   모드	표면	표현	변동성 / 모션 / 밀도
   Persuade	랜딩, 가격, 출시, 포트폴리오 홈	하나의 큰 아이디어, 실제 이미지, 컬러 필드	7 / 6 / 3
   Operate	앱, 대시보드, 설정, 관리	시스템 자체가 디자인입니다. 과시하지 않음	3 / 2 / 7
   Read	문서, 기사, 수업	타이포그래피가 페이지를 이끕니다	3 / 2 / 5
   Experience	게임, 놀이 학습, 아동, 이벤트	캐릭터, 앰비언트 모션, 유머	8 / 8 / 4

   세 개의 다이얼은 1에서 10까지입니다. 변동성은 대칭에서 대담한 비대칭까지입니다. 모션은 정적에서 시네마틱까지입니다. 밀도는 갤러리에서 콕핏까지입니다. 분위기를 나타내는 단어를 읽어 반영하세요: "미니멀"은 변동성과 밀도를 낮추고, "화려한" 또는 "생동감 있는"은 모션을 높이며, "밀도 높은" 또는 "프로페셔널한"은 밀도를 높입니다. 다이얼 값을 DESIGN.md에 기록하세요.

3. 장면 문장. 누가, 어디서, 어떤 조명에서 사용하는지. "어두운 휴게실에서 핸드폰으로 일정을 확인하는 야간 간호사"는 다크 모드 또는 라이트 모드를 결정합니다. "개발자 도구는 다크 모드"와 같은 카테고리 레이블은 결정하지 않습니다.

4. 아이디어 문장. "[이 주제만이 가진 어떤 것]이 [시각적 장치]가 됩니다." 그런 다음 경쟁사 테스트를 실행합니다: 경쟁사 이름을 넣어보세요. 문장이 여전히 유효하면 아이디어가 제너릭한 것입니다. 다시 작성하세요.

5. 토큰. 4~6개의 명명된 색상과 색상 전략(references/color.md). 서체 패밀리와 역할(references/typography.md). 문장과 ASCII 와이어프레임으로 표현된 레이아웃 개념. 모션 수준.

6. 주장 (Persuade만 해당). 섹션당 하나의 주장, 각각 증거 포함. 주장이 없는 섹션은 삭제하세요. 히어로, 로고 스트립, 세 가지 기능, CTA로 기본 설정하지 마세요.

7. 특징 목록과 대조하세요. 브리핑이 자유롭게 남겨둔 모든 축에 대해 references/tells.md를 읽으세요. 테마가 카테고리만으로 추측될 수 있는지, 그런 다음 "일반적인 스타일이 아닌"을 추가했을 때 스타일이 추측될 수 있는지 물어보세요. 둘 중 하나라도 '예'라면 해당 부분을 수정하고 무엇이 변경되었는지 말하세요.

4. 품질 기준에 맞춰 빌드

대담함은 한 곳에만 사용하세요. 하나의 요소가 기억에 남는 것이 되게 하고, 주변의 모든 것은 조용히 유지하며, 아이디어에 도움이 되지 않는 장식은 제거하세요. 특징을 제거할 때는 그 공간을 실제적인 것으로 채우세요: 스케일, 이미지, 콘텐츠 또는 컬러 필드. 단순히 제거하기만 하면 얇고 텅 빈 페이지가 됩니다.

품질 기준은 발표하지 않고 모든 표면에 적용됩니다:

• 토큰, 리터럴이 아님. 색상, 서체, 간격, 모서리, 모션은 :root에서 토큰으로 존재합니다. 라이트 모드와 다크 모드는 prefers-color-scheme에서 오며, data-theme으로 재정의 가능합니다. 토글 스위치가 있으면 그것이 우선합니다.
• 대비. 텍스트는 4.5:1, 큰 텍스트, 아이콘, 컨트롤 및 포커스 링은 3:1. 색상이 있는 배경 위에 회색 텍스트를 사용하지 마세요.
• 서체. 최대 두 패밀리. 다섯 개 이하의 크기. 본문은 16px 이상, 한 줄에 45~75자. 제목은 모든 너비에서 두 줄을 넘지 않아야 합니다.
• 모바일 우선. 320px부터 작동하며 16px 거터, 가로 스크롤 없음. 터치 대상은 44px. 입력 필드는 16px (iOS 확대 방지). 확대/축소를 비활성화하지 마세요.
• 상태. 모든 컨트롤에는 기본, 호버, focus-visible, 활성, 비활성화, 로딩, 오류, 성공 상태가 있어야 합니다. 모든 비동기 영역에는 로딩, 빈 상태, 오류 상태가 있어야 합니다.
• 안정성. 레이아웃 이동 없음. 애니메이션 또는 비동기 패널은 고정된 높이를 유지합니다. 그리드의 카드는 높이가 같고 하단이 고정됩니다.
• 클릭 가능한 요소는 절대 기울이지 마세요. 기울임은 장식용 스탬프와 스티커에만 사용합니다.
• 모션. 목적이 있고, 중단 가능하며, transform과 opacity만 사용하고, prefers-reduced-motion에서는 더 부드럽게 처리합니다. 콘텐츠는 JavaScript 없이도 볼 수 있어야 합니다.
• 이미지. 일관된 스타일의 실제 또는 생성된 아트. 캐릭터와 장식 아트는 투명 컷아웃으로 제공되며, 절대 어두운 상자 안에 넣지 않습니다. 이미지에 텍스트를 포함하지 마세요.
• 복사본. 짧고 구체적이며 사용자 관점에서 작성되었습니다. 시각 자료가 단락보다 우선합니다.

세부 사항은 참조 파일에 있습니다. 작업에 필요한 것만 읽으세요:

파일	내용
references/typography.md	서체 선택, 스케일, 측정, 디스플레이 서체, 로딩
references/color.md	색상 전략, OKLCH 토큰, 다크 모드, 대비
references/layout.md	공간, 프레임, 그리드, 계층 구조, 반응형 및 터치
references/motion.md	애니메이션 여부, 이징, 지속 시간, 성능, 모션 감소
references/interaction.md	상태, 양식, 최악의 데이터, 인지된 속도
references/copy.md	UX 글쓰기, 오류, 빈 상태, 정직한 콘텐츠
references/imagery.md	아트 디렉션, 생성된 아트, 사진, 아이콘
references/decks.md	슬라이드 덱 및 발표
references/tells.md	구식 생성 디자인 기본값 목록

5. 확인하기

코드 리뷰는 디자인 리뷰가 아닙니다. 렌더링하고 확인하세요.

1. 페이지를 실행하고 375px와 1440px에서 스크린샷을 캡처하고, 레이아웃이 변경되는 경우 768px도 캡처하세요. 라이트 모드와 다크 모드가 모두 있으면 둘 다 캡처하세요. playwright-cli, 브라우저 창 또는 세션이 가지고 있는 브라우저 도구를 사용하세요.
2. 각 스크린샷을 눈을 가늘게 뜨고 보세요. 기본 요소, 보조 요소 및 그룹이 여전히 그 순서대로 읽혀야 합니다.
3. 충돌을 찾으세요: 겹침, 잘린 배너, 예상치 못한 곳에서 줄바꿈되는 텍스트, 정렬되지 않은 아이콘, 고르지 않은 그리드, 2x2여야 할 곳의 3+1 행.
4. references/critique.md로 비평하고, 수정 순서대로 수정한 후 다시 캡처하세요. 세 라운드 후에 중단하고 남은 것을 보고하세요.
5. 게임 및 인터랙티브 요소의 경우 직접 플레이해 보세요. 모바일 너비에서 서브 에이전트가 플레이 테스트하면 코드를 읽는 것만으로는 절대 찾을 수 없는 것을 발견합니다.
6. 개발 서버를 실행 중인 상태로 두고 사용자에게 URL을 제공하세요. 최종 스크린샷을 PR에 포함시키세요: 모바일 및 데스크톱, 라이트 및 다크.

방향이 열려 있는 경우(예: 폰트, 로고, 팔레트) 두세 개의 작은 목업을 나란히 만들고 사용자가 선택하게 하세요. 그런 다음 선택된 것을 빌드하세요.

6. 개선(Refine)

모든 개선은 하나의 방법을 따릅니다: 현재 상태를 평가하고, 한 문장으로 된 테제를 작성하고, 기존 시스템의 어휘로 적용하고, 스크린샷을 캡처한 다음, 다듬습니다.

요청	수행할 작업
더 대담하게(Bolder)	대상의 주변 요소 수준까지 자신감을 높이세요: 스케일, 두께, 색상의 확신, 이미지. 그런 다음 주변을 조용히 만드세요
더 조용하게(Quieter)	한 번에 하나씩 액세서리를 제거하세요. 모션 다이얼을 낮추세요. 색상을 더 적은 역할로 병합하세요
더 간단하게(Simpler)	주장이 없는 섹션을 자르세요. 단어 수를 절반으로 줄이세요. 단락을 하나의 시각 자료로 바꾸세요
더 많은 색상(More color)	색상 전략 사다리에서 한 단계 올라가세요. 절대 먼저 두 번째 악센트 색조를 추가하지 마세요
타이포그래피(Typography)	references/typography.md에서 스케일과 페어링을 재구축하세요
레이아웃(Layout)	references/layout.md에서 프레임, 왼쪽 가장자리 및 리듬을 수정하세요
애니메이션(Animate)	먼저 references/motion.md의 빈도 게이트를 통과하세요. 그런 다음 하나의 조율된 모션을 추가하세요
더 명확한 카피(Clearer copy)	references/copy.md를 적용하세요
반응형(Responsive)	먼저 375px용으로 재작업하세요: 단일 열, 실제 터치 대상, 잘리는 것 없음
견고하게(Harden)	최악의 데이터를 입력하고 references/interaction.md에서 누락된 상태를 추가하세요

7. 출시 체크리스트

비주얼 작업을 완료했다고 하기 전에 다음을 실행하세요:

• DESIGN.md에 결정된 사항과 주어진 수정 사항이 반영됨
• 375px 및 데스크톱, 라이트 및 다크 스크린샷에 충돌이나 잘림이 없음
• references/tells.md의 어떤 것도 브리핑에서 지정하지 않았다면 나타나지 않음
• 모든 컨트롤에 상태가 있고, 모든 비동기 영역에 로딩, 빈 상태 및 오류 상태가 있음
• 최악의 데이터가 올바르게 렌더링됨: 긴 이름, 0개 및 1개 항목, 큰 숫자
• 키보드로 모든 항목에 접근 가능, 포커스가 보이고, reduced motion이 준수됨
• accessibility 스킬이 주요 테마에서 심각한 위반 사항 0건을 보고함
• 이미지가 일관되고, 필요한 곳에서 잘려 있으며, web-optimize로 최적화됨
• 복사본이 사용자가 필요한 만큼만 줄어들었고, 지어낸 증거가 없음
• 개발 서버가 실행 중이고 PR에 스크린샷이 포함됨

관련 스킬

• accessibility는 axe-core를 사용하여 다양한 너비, 색상 구성표 및 테마에서 WCAG 2.2 AA를 감사합니다.
• image-generation은 팔레트가 고정된 style.md로 아트를 만듭니다. background-removal로 배경을 제거하고 web-optimize로 최적화하여 제공합니다.
• architecture는 웹 참조에 사이트의 스택 기본값을 보관합니다.

크레딧

이 스킬은 Anthropic의 frontend-design 스킬(Apache-2.0), Paul Bakaus의 Impeccable(Apache-2.0), Emil Kowalski의 디자인 엔지니어링 스킬(MIT) 및 Leonxlnx의 taste-skill(MIT)에서 아이디어를 차용하고 의역했습니다. 텍스트가 복사되지는 않았습니다. 각 참조 파일은 해당 규칙의 출처를 명시합니다.