디자인 (린)은(는) 무엇을 하나요?

인터페이스 작업은 세 가지 모드로 이루어지며, 일련의 게이트 순서로 실행됩니다. 각 게이트에는 통과 조건, 남겨지는 증거, 최대 재시도 횟수, 실패 시 처리 방법이 있습니다. 가상 제품 UI (히어로 데모, 벤토 타일, 커서 워크스루)는 design-demo 스킬이며, 이 스킬을 로드하여 규칙을 적용합니다.

이 스킬이 존재하는 이유. 모델의 기본 UI는 모델이 본 모든 UI의 평균입니다. 즉, 가운데 정렬된 헤드라인과 그 위의 레이블, 아이콘 카드 행, 부드러운 그라데이션, 모든 것에 적용되는 하나의 둥근 모서리와 하나의 회색 그림자가 그것입니다. 의도는 산문(prose)에 있지만 코드 생성은 패턴에서 가져오므로, "따뜻하고 구체적인"이라고 써도 템플릿이 생성됩니다. 따라서 모든 선택은 기록된 결정으로 추적되고 검사됩니다. 비슷한 프롬프트가 주어진 다른 모델이 실질적으로 동일한 화면을 생성한다면, 그 작업은 실패한 것입니다. 슬롭을 제거하는 것이 작업의 절반입니다. 어떤 제품에도 속할 수 있는 깔끔한 화면은 그 다음 템플릿입니다.

이 스킬보다 우선하는 것. (1) 실제 브랜드, 서면 사양 또는 명명된 시각적 방향: 이 스킬이 기본값이라고 부르는 것을 요구하더라도 정확히 따르고, 각 충돌 사항을 리포트에 나열하고 규칙을 적용할 원 라인 변경 사항을 작성하십시오. 보라색-파란색 그라데이션, 반짝임 또는 광선은 사용자가 브랜드라고 말하지 않는 한 로고에서도 슬롭으로 간주합니다. (2) .design/system.md (또는 레거시 .interface-design/system.md): 먼저 읽으십시오. 해당 결정은 이미 내려졌습니다. 이탈을 표시하십시오. (3) 이 스킬, 나머지 열린 부분에 대해.

워크플로

G0 라우팅

순서대로 질문하고, 첫 번째 '예'가 경로를 결정합니다.

변경 없이 결과만? → 검토
일러스트레이션으로서의 가상 제품 UI? → design-demo 로드
기능, 콘텐츠 및 섹션 순서가 유지되어야 하는 기존 UI? → 폴리싱
콘텐츠나 구조를 변경할 수 있는 리디자인을 포함한 기타 모든 경우 → 구축

표면: 페이지 (읽고 스크롤: 랜딩, 마케팅, 포트폴리오, 이벤트, 조직 사이트; 히어로, 카피, 이미지, 섹션 리듬 활용) 또는 앱 화면 (작업: 대시보드, 관리, 설정, 테이블, 받은 편지함, 도구; 계층 구조, 밀도, 상태, 토큰 활용). 앱을 보여주는 제품 사이트는 페이지이며, 그 안의 앱 조각은 앱 화면 규칙을 따릅니다.

게이트 레지스터

게이트	통과 조건	남겨지는 증거	최대 횟수	최대 횟수 실패 시
G1 방향	이름 제거 테스트 통과; 사용자 확인 또는 건너뛰기 규칙 적용	방향 블록	2번의 탐색 라운드	가장 강력한 옵션 선택, 리포트에 가정으로 표시
G2 계획 검토	유사한 프롬프트가 동일한 결과를 낼 수 있는 모든 부분 수정됨; `.design/decisions.md` 작성됨	decisions.md	1번의 수정	진행; 리포트에 남은 기본값 나열
G3 컴포넌트	`gate.js --only <name>`이 1440 및 390에서 통과하고, 컴포넌트가 decisions.md를 따르거나 예외를 기록함	게이트 로그 한 줄	검사당 2번의 수정 시도	원인과 함께 미해결 문제로 기록; 다른 것이 의존하지 않으면 계속 진행
G4 페이지	전체 `gate.js` 실행 통과; 네 가지 테스트 및 판단 체크리스트 통과	게이트 합계, 데스크톱 및 휴대폰 스크린샷	3번의 렌더링 라운드	여전히 실패하는 항목 보고
G5 리포트	리포트 템플릿의 모든 필드가 채워지거나 '없음'으로 표시됨	리포트	—	—
R1 결과 (검토)	각 결과에 기준, 위치, 심각도, 구체적인 수정 사항이 있음	결과 목록	—	증거 없는 결과 삭제

구축은 G1~G5를 실행합니다. 폴리싱은 G1, G4, G5를 실행합니다. 그 통과는 전체 화면을 가로지르므로, 컴포넌트별로 게이트를 실행하지 않고 마지막에 한 번 게이트를 실행합니다. 검토는 G0과 R1을 실행합니다.

G1 대기를 위한 건너뛰기 규칙: 사용자가 그냥 실행하라고 한 경우; 브랜드 또는 사양이 이미 방향을 고정한 경우; 기존 디자인 내의 단일 소규모 컴포넌트인 경우.

무인 실행. 응답할 사람이 없는 경우 (예약된 실행, 사용자가 나중에 확인하겠다고 한 경우, 또는 질문에 응답이 없는 경우), G1에서 대기하지 마십시오. 방향을 결정하고, 리포트 상단에 가정으로 명시하고 이를 변경할 한 줄을 함께 기록한 후 계속 진행하십시오. 유료 이미지 생성을 건너뛰고 비주얼의 다음 옵션을 사용하십시오. 슬롭을 찾지 못한 폴리싱 실행은 제안된 개선 사항을 적용하지 않고 보고합니다. 나중에 리디렉션하는 데는 하나의 메시지 비용이 있어야 합니다.

구축에서는 한 번에 하나의 컴포넌트만 진행합니다. 게이트를 실행하고, 기록한 후 다음 컴포넌트를 시작합니다. 실패는 나중에 모으지 않고 지금 수정합니다. 문제는 복합적으로 발생합니다.

방향

의도

시각적 결정 전에 답변하십시오. 간결한 브리핑을 유지하십시오.

이 사용자는 누구인가? 실제 사람: 그들이 어디에 있는지, 5분 전에 무엇을 했는지, 다음에 무엇을 할 것인지.
그들이 무엇을 성취해야 하는가? 동사: 이 제출물을 평가하고, 중단된 배포를 찾으십시오. 무엇이 이끌고, 무엇이 따르며, 무엇이 숨는지 결정합니다.
어떤 느낌이어야 하는가? 의미 있는 단어: 노트북처럼 따뜻함, 터미널처럼 차가움, 트레이딩 플로어처럼 빽빽함. "깔끔하고 현대적인"은 아무 의미도 없습니다.

브리핑이 주제를 명명하지 않은 경우, 구체적인 주제, 대상 및 주요 작업을 제안하고 확인하십시오. 컨텍스트가 책임 있는 가정을 허용하는 경우, 한 줄로 명시하고 진행하십시오. 의도는 체계적입니다. 느낌이 따뜻하다면, 표면, 텍스트, 테두리, 강조 색상 및 타이포그래피가 모두 따뜻해야 합니다. "흔하다" 또는 "작동한다"는 이유가 될 수 없습니다.

도메인 탐색

네 가지를 모두 생성하십시오: 도메인 (주제 세계의 5개 이상의 개념 및 은유); 색상 세계 (물리적 버전의 5개 이상의 색상); 시그니처 (이 제품만 가질 수 있는 한 요소, 적절한 위치에 일관되게 사용됨); 거부할 기본값 (가장 확실한 세 가지 선택, 각각에 대한 대안). 이름 제거 테스트: 제품 이름을 제거한 제안을 읽으십시오. 아무도 그것이 무엇을 위한 것인지 알 수 없다면, 다시 탐색하십시오 (최대 2회).

방향 블록

Product:    [무엇을 하는지, 누구를 위한 것인지, 한 문장]
Character:  [2–3개의 구체적인 단어, 깔끔/현대적/매끄러움/미니멀/프리미엄 제외]
World:      [속하는 장소 또는 재질; 중립적인 색조, 강조 색상, 비주얼 설정]
Moments:    [콘텐츠에서 선택한, 풍부한 색상과 디테일을 얻는 1–2곳]
Signature:  [이 제품만 가지고 있는 하나의 디테일]
Rejecting:  [기본값 → 대안] × 3

렌더링이 가능할 때 작은 샘플(실제 견본, 실제 글꼴의 타입 스케일, 실제 컴포넌트로서의 시그니처)과 함께 표시한 후, "그 방향이 맞습니까?"라고 질문하십시오 (G1).

기본값은 디자인 클러스터를 생성합니다. 각각은 특정 브리핑에 대해 합법적이지만 주제와 관계없이 나타납니다. 브리핑이 축을 열어둔 경우, 여기서 사용하지 마십시오: (1) #F4F1EA 근처의 웜 크림, 고대비 세리프 및 #D97757 근처의 테라코타 강조 색상; (2) 거의 검정색에 하나의 산성 녹색 또는 버밀리온 강조 색상; (3) 넓은 시트지 모양의 가는 선, 제로 둥근 모서리, 빽빽한 신문 칼럼; (4) SaaS 카드 키트: 동일한 둥근 카드, 하나의 둥근 모서리, 동일한 부드러운 회색 그림자, 그라데이션 워시; (5) 템플릿 크롬: 자간이 좁은 대문자 아이브로우, A · B · C 메타 문자열, WORD — fragment 레이블, 검정색 대신 착색된 거의 검정색, 고정폭 데이터 레이블, 버튼의 →, 보라색 또는 인디고 강조 색상.

결정 파일

방향 설정 후, .design/decisions.md를 한 번 작성하십시오: 팔레트 토큰과 그 이유, 글꼴과 스케일 및 그 이유, 깊이 전략과 그 이유, 간격 기준과 밀도 및 그 이유, 시그니처와 그것이 나타나는 위치, 거부된 세 가지 기본값. 이는 모든 컴포넌트를 다시 정당화하는 것을 대체합니다. G3에서 판단 질문은 한 줄입니다: 이 컴포넌트가 decisions.md를 따릅니까? 이탈하는 경우, 게이트 로그 라인에 예외와 그 이유를 기록하십시오.

제작 규칙

**(게이트 적용)**으로 표시된 규칙은 gate.js로 측정됩니다. G4 체크리스트는 나머지만 다룹니다.

계층 구조 및 구성

보기당 하나의 초점: 사람이 하러 온 것을 명명하고 크기, 대비, 위치 또는 공간을 통해 그것이 돋보이게 하십시오.
가중치와 색상이 크기보다 더 많은 역할을 합니다. 하나의 14px 크기는 세 가지 계층을 유지합니다: 값 600 기본, 레이블 500 보조, 메타 400 희미함.
밀도는 픽셀 단위의 결정이며, 미리 선택되어 반복됩니다: 도구 패널 12–16 패딩은 빡빡하게 느껴집니다. 24는 브로셔처럼 느껴집니다.
고르지 않게 숨을 쉬게 하십시오: 그룹 내부는 빡빡하게, 그룹 사이는 더 느슨하게.
비율이 말합니다: 280px 사이드바는 내비게이션이 콘텐츠에 봉사한다고 말합니다. 360은 동등하다고 말합니다.
절제: 약 60/30/10 중립, 보조 톤, 강조 색상. 대담함을 한 곳에 집중하고, 액세서리 하나를 제거하십시오.

간격

모든 여백, 패딩, 간격 및 고정 높이는 4의 배수입니다 (게이트 적용). 소규모 컨트롤 내부의 2px 미세 조정은 괜찮습니다.
동일한 것은 동일합니다: 목록당 하나의 행 높이와 간격, 카드 세트당 하나의 패딩. 콘텐츠가 요구하지 않는 한 대칭적인 패딩.
정렬: 아이콘은 한 열에, 레이블은 하나의 기준선에, 숫자는 오른쪽 정렬.
페이지: 섹션 간 데스크톱에서 80–128 간격, 섹션 내부 간격보다 확실히 더 큼. 앱: 페이지 패딩 24–32.

색상

배경, 표면, 테두리 및 텍스트를 위해 세계 쪽으로 착색된 하나의 중립 램프. 표면 전체에 걸쳐 하나의 색조, 명도만 변경. 앱에서 표면은 거의 중립을 유지하고 콘텐츠가 색상을 전달합니다.
네 가지 텍스트 역할: 기본, 보조, 희미함, 비활성화.
크롬에 하나의 강조 색상, 드물게 사용: 기본 작업, 선택, 중요한 하나의 숫자. 선택된 순간 내부에서는 각 색상이 의미가 있으면 색상이 풍부할 수 있습니다. 실제 브랜드 색상은 강조 색상이 되고 표면을 떠납니다.
본문 텍스트 및 강조 색상과 텍스트 조합의 대비 4.5:1, 큰 텍스트는 3:1 (게이트 적용).
의미론적 색상은 의미만 전달하며, 팔레트에 맞게 조정되고 어두운 곳에서 약간 채도가 낮아집니다. 본문 텍스트는 완전한 잉크로 표시됩니다.
색상은 토큰에서 가져와야 하며, 컴포넌트 CSS에서 원시 값을 사용하지 않습니다 (게이트 적용).
표면에 색조 간 그라데이션, 그라데이션 텍스트, 유색 광선 또는 그림자, 방사형 워시, 블롭 또는 네온 테두리가 없어야 합니다. 그라데이션은 하나의 중립 내에서 톤 이동으로만 허용되거나 사진 위 텍스트 아래 중립 스크림으로만 허용됩니다.

표면, 테두리 및 깊이

하나의 깊이 전략: 테두리만 (기술적, 조밀함), 미묘한 그림자 (접근하기 쉬움), 계층화된 그림자 (프리미엄), 또는 표면 톤 이동.
입면은 조용해야 합니다. 어두운 경우: 각 단계는 명도의 몇 포인트 (페이지 → 카드 → 떠오름)와 가는 선으로 구성됩니다. 밝은 경우: 정지 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05), 부동 0 8px 24px rgba(0,0,0,.06). 어두운 리프트: 0 0 0 1px rgba(255,255,255,.08).
가는 선: 기본 텍스트 색상 6–10% 불투명도 (어두운 곳에서 12%), 작은 진행: 구분선, 표준, 강조, 포커스 링.
사이드바: 페이지와 동일하거나 어두운 곳에서 한 단계 더 깊게, 가는 선으로 구분, 절대 다른 색조가 아님. 팝오버는 부모보다 한 단계 위. 입력은 주변보다 약간 더 어둡습니다.

타이포그래피

타입이 성격을 전달합니다. 하나의 패밀리가 일반적이며, 둘은 한계이고 명확히 구분됩니다. 디스플레이 서체는 큰 헤드라인에만 사용됩니다. 실제 브랜드 글꼴은 유지됩니다.
비율 단계: 조밀한 UI는 약 1.2, 대부분의 제품 UI는 1.25, 표현적인 페이지는 1.333. 페이지당 최대 5개 크기.
가중치 400 및 500, 600은 숫자 및 드문 강조, 700–900은 브랜드 사양이 명시하는 경우에만.
모든 곳에서 문장 케이스. 자간이 좁은 대문자 레이블, 이탤릭체 강조, 이탤릭, 굵게 또는 색상으로 구분된 단일 헤드라인 단어 없음.
16px 미만에서 자간 0, 40px부터 약 -0.02em, 56px부터 -0.03em. 본문 줄 높이 약 1.5, 세리프 본문은 약간 더 높음. 줄 길이 45–75자.
숫자: 표 모양 숫자 (게이트 적용), 전체적으로 하나의 형식.
제목에 text-wrap: balance, 본문에 pretty; 루트에 -webkit-font-smoothing: antialiased.

아이콘

데코레이션이나 아이콘으로 사용되는 이모지는 하나의 세트(프로젝트 자체 또는 lucide)에서 가져온 라인 아이콘이 되며, 16 또는 18px, 획 두께 1.5, 텍스트 역할 색상, 행당 동일한 상자 너비, 레이블에서 8–10px 떨어짐. 아무것도 추가하지 않는 아이콘은 제거하십시오. 색상이 필요한 카테고리는 상태 점을 가져옵니다.

카피

사용자 입장에서 작성하십시오 (웹훅 구성을 관리하는 것이 아니라 알림을 관리합니다). 설명하고, 판매하지 마십시오.
헤드라인은 페이지의 사실을 사용하여 제품이 누구를 위해 무엇을 하는지 말합니다. 경쟁사 이름이 여전히 들어맞는다면 다시 작성하십시오.
버튼은 일어날 일을 말합니다 ("변경 사항 저장"). 작업은 플로우 전반에 걸쳐 이름을 유지합니다 ("게시" → "게시됨").
오류는 무슨 일이 일어났고 어떻게 수정해야 하는지 말하며, 사과하지 않습니다. 빈 상태는 다음 작업을 초대합니다.
능동태, 평범한 동사. 느낌표, 인사말 헤드라인, 과장된 단어 (supercharge, seamless, unlock, magic, game-changing) 또는 도처에 AI-powered는 없습니다. 짧은 레이블 (검색). 변경 사항은 비교 대상을 명명합니다 (전월 대비 +12%). 헤드라인, 레이블, 버튼 또는 토스트에 마침표 없음.
증거를 절대 만들어 내지 마십시오: 고객, 인용문, 리뷰, 로고 또는 통계가 없습니다. 브리핑이 간격을 남긴 경우 샘플 콘텐츠는 괜찮으며 확인을 위해 리포트에 포함됩니다.

구조는 의미를 전달합니다

개요, 테두리, 번호 매기기, 아이브로우 및 구분선은 정보를 인코딩합니다. 01 / 02 / 03은 실제 시퀀스에만 사용됩니다. PRO, New ✨와 같은 배지는 의미를 전달하지 않으면 제거하고, 그렇지 않으면 조용한 텍스트가 됩니다. 카운트와 메타는 조용한 텍스트이며, 알약 형태가 아닙니다.

레이아웃: 페이지

히어로는 해당 주제 세계에서 가장 특징적인 것을 가장 적합한 형태로 엽니다. 큰 숫자와 작은 레이블, 그리고 그것이 진정으로 최고인 경우에만 그라데이션.
첫 화면은 방문자의 첫 번째 질문에 큰 타입으로 답하고, h1, 하나의 기본 작업, 최대 하나의 보조 작업을 전달합니다.
가장 강력한 히어로: 헤드라인이 차분한 부분에 있는 가장자리에서 가장자리까지의 단일 장면 이미지, 또는 시각적 요소가 절반 이상인 비대칭 분할. 가운데 정렬 스택은 시각적 요소 없이 짧은 히어로에만 사용됩니다.
내비게이션: 워드마크, 기존 링크, 하나의 버튼; 로그인은 텍스트 링크로. 떠 있는 알약이나 유리 효과 없음.
각 섹션: 제목, 이웃과 다른 구성, 전체 콘텐츠. 죽은 밴드 없음. 푸터는 사이트맵이 아닌 디자인된 마무리입니다.
작은 화면: 읽기 순서로 쌓고 재구성; 11px 미만 텍스트 없음; 가로 스크롤 없음 (게이트 적용).

레이아웃: 앱 화면

실제 비율: 셸이 뷰포트를 채우고, 사이드바 240–280, 콘텐츠는 유동적이며 1440–1600 부근에서 제한, 상단 바 56–64. 좁은 중앙 열 절대 사용하지 않음.
크기 다양화: 하나의 넓은 차트 위에 컴팩트한 통계, 동일한 카드 행 사용하지 않음. 메인 차트는 너비의 최소 2/3와 280–360 높이를 차지합니다.
통계 카드: 레이블, 수치, 비교 대상과의 변화; 채우기용 스파크라인 또는 아이콘 없음; 다른 곳에서 반복되는 수치 없음.
피커와 테이블은 명확한 계층 구조: 행에는 기본 레이블, 보조 데이터 및 액션이 있습니다. 상태는 색상이 지정된 점, 또는 드물게 레이블이 있는 점으로 표시됩니다. 모달은 중앙에 표시되며 거의 전체 너비가 아니고 제목, 작업 및 분리된 바닥글이 있습니다.
빈 상태, 오류 상태, 편집 상태 및 로딩 상태는 별도의 작업으로 설계되었으며 게이트 적용되지 않습니다.

시각적 규칙

이미지와 미디어. 미디어는 의도가 있습니다. 예시를 보여주거나(표시하다), 작업을 보여주거나(가르치다), 분위기를 설정하거나(설정하다). 명확한 의도가 없는 이미지는 없어야 합니다. 제품 스크린샷은 실제 또는 사실적인 목업(mockup)입니다. SVG 일러스트레이션은 프로젝트의 다른 부분과 일관된 스타일입니다. 사진은 편집되어 최종 콘텐츠로 렌더링됩니다. 스톡 사진은 없습니다. 선 그래프와 막대 차트는 하나의 선 굵기와 하나의 강조 색상을 사용합니다. 원형 차트는 없습니다. 데이터는 카피로 설명되지 않습니다. 지도는 장소와 컨텍스트만 표시하고, 마커는 하나만 사용합니다.

모션. 모션은 시스템 템플릿이 아닌 반응에 대한 답변입니다. 지속 시간은 부드러운 인터페이스의 경우 150–250ms, 표현적인 경우 300–500ms입니다. 이징: 표준 인터페이스는 ease-out, 진입은 ease-out, 퇴장은 ease-in. CSS 전환 및 애니메이션은 모든 곳에서 토큰을 사용합니다. 진입은 트리거 주변에서 확장되거나 나타납니다. 반짝임, 회전, 바운스 없음. 스켈레톤 로더는 실제 콘텐츠 모양과 일치합니다. 모션 선호도가 prefers-reduced-motion: reduce로 설정된 경우 비활성화됩니다.

사운드. 사운드는 선택 사항이며 작업에 연결되며 피드백 또는 알림에서 와야 합니다. 지속 시간 200ms 미만, 조용함. 기본적으로 음소거.

게이트 검사기

gate.js는 배포 파이프라인 (Prettier, ESLint, Stylelint의 장소)에서 실행됩니다. 린트 규칙은 구성 파일에서 나옵니다. 검사기 실행은 세 가지입니다:

컴포넌트 게이트 (gate.js --only <name>) – 주어진 컴포넌트에서 위반 사항을 확인합니다.
페이지 게이트 (gate.js) – 섹션 전체에 걸친 위반 사항을 확인합니다.
체크리스트 – 컴포넌트 게이트가 실행될 때마다 decisions.md를 확인합니다; 게이트가 페이지를 전체적으로 확인할 때는 여기에 있는 판단 규칙을 확인하고 데스크톱과 모바일 스크린샷을 생성합니다.

다음은 검사기가 측정하는 것입니다.

게이트 적용: 간격 4의 배수. 본문 텍스트 대비 4.5:1 / 큰 텍스트 3:1. 토큰 대 원시 값. 표 모양 숫자. 11px 미만 텍스트 없음. 가로 스크롤 없음.
판단: 컴포넌트가 decisions.md를 따르지 않는 예외가 게이트 로그에 기록됩니까? 페이지에 수직 리듬이 있습니까? 목록의 항목, 카드, 패딩이 일관됩니까? 행에 정렬된 항목이 있습니까? 하나의 초점이 돋보입니까? 페이지와 앱 레이아웃 규칙을 따릅니까? 한 줄에 해당됩니다.

게이트 로그 라인 형식: gate(<컴포넌트>): 이유.<예외> 있음/없음

비주얼

호스팅 가능한 SVG로 생성합니다. Luxe 및 Unsplash API는 승인된 소스이지만 게이트 체인의 일부가 아닙니다. 무인 실행에서 유료 이미지 생성은 건너뜁니다.

사진

먼저 제품과 관련된 사진을 시도하십시오. 관련 사진이 없는 경우 무인 실행에서 SVG 생성으로 대체합니다. 사진은 주제 세계에 속해야 합니다. "관련성"은 라이선스 비용이 없는 한 외부 API에서 가져온 사진에도 적용되며, 그렇지 않으면 SVG가 대체됩니다. 제품의 존재하는 브랜드가 먼저 사용됩니다.

SVG 일러스트레이션

히어로 이미지, 아이콘, 일러스트레이션을 생성합니다. SVG는 단순하고 기하학적이며 방향과 스타일 시스템을 따릅니다. 사진은 관련성이 있거나 주제에 맞을 때 SVG보다 우선합니다.

리포트 템플릿

모든 실행 유형에 다음 필드가 포함됩니다. 사용되지 않는 실행 유형의 필드는 값 — (엠 대시)를 가집니다.

필드	내용
방향	방향 블록, 거부된 기본값 및 G1에서의 결정에 대한 참고 사항
가정	무인 실행에서 선택되었거나 G1 건너뛰기 규칙이 적용된 결정 사항
수정된 파일	`.design/decisions.md`, 신규 또는 변경된 컴포넌트, 수정된 섹션
시각적 요소	생성된 SVG 이미지 (사진이 사용된 경우 출처)
게이트 요약	게이트 합계, 게이트 로그 라인, 가장 심각한 위반 사항 목록
열린 문제	게이트에서 캡처되었거나 게이트 실패로 인한 미해결 이슈
충돌	사용자 사양과 본 스킬의 충돌 (예: 브랜드 로고의 그라데이션)

디자인 시스템 파일

시스템은 세 가지 레벨로 구성됩니다.

브랜드 레벨 – .design/system.md (레거시 .interface-design/system.md): 도메인, 팔레트, 서체, 일러스트레이션 스타일. 이 스킬보다 우선합니다.
프로젝트 레벨 – .design/decisions.md: 방향 블록, 팔레트 토큰, 서체 선택, 깊이 전략, 간격 기준. 이 스킬의 일부로 G2에서 생성됩니다.
제품 레벨 – 컴포넌트 토큰: 실제 팔레트 변수, 서체 변수, 간격 변수. decisions.md에서 나옵니다.

레벨은 순서대로 적용됩니다: 브랜드 시스템이 프로젝트 시스템을 재정의하고, 프로젝트 시스템이 제품 토큰을 재정의합니다. 일관성은 가장 높은 적용 레벨에서 유지됩니다.

예외 처리

G3 컴포넌트 게이트 실패: 2회 수정 시도 후에도 실패하면, 게이트 로그 라인에 원인과 함께 미해결 문제로 기록합니다. 의존하는 컴포넌트가 없는 한 계속 진행합니다.
G4 페이지 게이트 실패: 3회 렌더링 후에도 실패하면, 여전히 실패하는 항목을 나열하고 진행합니다. 슬롭이 발견되었지만 차단되지 않는 경우에도 진행합니다.
G2 decisions.md 누락: 스킬이 결정 파일을 생성할 수 없으면, 기본 방향 블록을 구축하거나 이전 system.md에 의존합니다. G2 이후에도 빈 decisions.md가 있으면 게이트를 완전히 건너뜁니다.
G0 모호함: 여러 게이트가 같거나 유사한 경우, 가장 엄격한 모드를 선택합니다.

모범 사례

게이트를 일찍, 자주 실행하십시오. 컴포넌트별로 게이트를 실행하면 말미에 문제가 쌓이는 것을 방지합니다.
디자인 시스템 파일을 커밋하십시오. decisions.md 및 system.md는 실행 간 및 팀 구성원 간에 일관성을 제공합니다.
이미지 생성을 신중하게 사용하십시오. 유료 이미지 생성은 필요한 경우에만 사용하고, 무인 실행에서는 건너뜁니다.
이름 제거 테스트를 문서화하십시오. 탐색이 주제에 집중하도록 합니다.
리디렉션은 하나의 메시지 비용이 듭니다. 나중에 방향을 변경하는 것은 모델이 작업을 다시 시작해야 하므로 하나의 메시지 비용이 들어야 합니다.

즐겨 사용하는 AI에게 물어보기

문서