Atelier UI — 디자인 오케스트레이터
컨텍스트를 가볍게 유지하세요. 모든 모듈을 한 번에 로드하지 말고, 인테이크 후 하나의 빌드 모듈로 라우팅하고 기계적 검사는 스크립트에 오프로드하세요.
아래 명령어와 경로에서 <skill>은 이 SKILL.md 파일이 포함된 디렉토리입니다(예: ~/.gemini/config/skills/atelier-ui, Windows의 경우 %USERPROFILE%\.gemini\config\skills\atelier-ui, 또는 작업 공간 로컬 .agents/skills/atelier-ui). 셸 명령에서 경로에 공백이 있을 수 있으므로 항상 "<skill>/..."를 따옴표로 묶으세요.
워크플로우
1. 환경 탐지 (한 번)
프로젝트 루트에서 기능 스캐너를 실행하세요:
node "<skill>/scripts/detect-env.mjs"
외부 도구(impeccable, agent-browser)가 존재한다고 가정하지 마세요. JSON 출력(project.framework, project.devCommand, tools.impeccableCmd, tools.agentBrowser, tools.browserBinary, tools.cdpSupported)을 사용하여 스택과 QA 등급을 선택하세요.
2. 인테이크 (1턴, 기본값 사용)
핵심 질문이 열려 있는 경우에만 <skill>/modules/01-intake.md를 읽으세요.
- 누락된 모든 질문을 하나의 번호가 매겨진 메시지에 기본값과 함께 질문하거나(또는 사용자가 전체 세부정보를 제공하거나
"defaults"/"go ahead"라고 말한 경우 즉시 시작하세요). - 확정된 계획을
.atelier/BRIEF.md에 작성하여 컨텍스트 압축이 요구사항을 잃지 않도록 하세요.
3. 하나의 빌드 모듈로 라우팅
브리프에서 표면 모드를 선택하고 해당 파일만 읽으세요:
- 브랜드 / 랜딩 / 포트폴리오 / 로컬 비즈니스 (
설득또는경험):<skill>/modules/02-brand-site.md를 읽으세요. - SaaS / 대시보드 / 문서 / 기존 앱 (
운영또는읽기):<skill>/modules/03-app-ui.md를 읽으세요. - 3D 세계 / WebGL / 셰이더 (
3D):<skill>/modules/04-3d-visual.md를 읽으세요.
4. 유니버설 크래프트 플로어 (항상 활성)
- 원시 16진수 대신 토큰: CSS 사용자 정의 속성(
:root) 또는 프로젝트의 기존 Tailwind/테마 토큰을 사용하세요. - 레이아웃 함정 금지:
html, body에overflow-x: clip(절대100vw사용 금지); 이미지 그리드 트랙에minmax(0, 1fr); 디스플레이 제목에min-width: 0; overflow-wrap: break-word. - 모션 및 접근성: 절대
transition: all을 사용하지 말고transform/opacity/clip-path/filter만 애니메이션 처리하세요.:focus-visible및@media (prefers-reduced-motion: reduce)를 추가하세요. - 안티-슬롭 금지 목록: 정당하지 않은 보라색에서 파란색 그라디언트, 본문/제목의 그라디언트 텍스트, 카드 안의 중첩 카드, 헤드라인 위의
01/02/03눈썹 킥커, UI 아이콘으로서의 이모지, 허위 사용후기, 로고, 메트릭을 사용하지 마세요. - 대비 및 상태: 본문 텍스트 >= 4.5:1, 큰 텍스트 >= 3:1; 모든 대화형 컨트롤은 기본, 호버, focus-visible, 비활성화, 로딩, 빈 상태 및 오류 상태를 포함해야 합니다.
- 깔끔한 카피: 버튼은
<동사> <목적어>형식이어야 합니다(절대 일반적인"자세히 알아보기"사용 금지). 절대 플레이스홀더 텍스트(Lorem ipsum,Acme,TODO)를 남겨두지 마세요.
(기계적 검사는 lint-ui.mjs와 check-ui.mjs에 있습니다. 중첩 카드 및 minmax(0, 1fr)와 같은 구조적 레이아웃 규칙은 사용자와 Tier 3 비평가가 확인합니다.)
5. 검증 및 비평가 게이트
빌드 후 <skill>/modules/05-qa-gate.md를 읽고 QA 사다리를 실행하세요:
- 정적 슬롭 린트 (감지된 경우
tools.impeccableCmd, 추가로node "<skill>/scripts/lint-ui.mjs" <target-dir>실행). - 브라우저 검사 (
agent-browser, 환경의 브라우저 도구, 또는node "<skill>/scripts/check-ui.mjs" <target> --out .atelier/shots --full --sheet)를 데스크톱(1440x900) 및 모바일(390x844) 해상도에서 실행하세요. - 선택 사항: 캡처된 스크린샷을 사용한 제로 컨텍스트 시각 비평가 리뷰 (
QA Depth가critic또는deep인 경우).
이 스킬의 파일
경로 (<skill>/ 아래) | 로드 시점 |
|---|---|
modules/01-intake.md | 2단계: 모호한 브리프 명확히 하기 및 .atelier/BRIEF.md 작성 |
modules/02-brand-site.md | 3단계: 새 마케팅, 회사, 로컬 비즈니스 또는 포트폴리오 페이지 |
modules/03-app-ui.md | 3단계: 대시보드, 도구, 문서 또는 기존 앱 개선 |
modules/04-3d-visual.md | 3단계: Three.js, WebGL 또는 셰이더 빌드 |
modules/05-qa-gate.md | 5단계: 린트, 브라우저 검사 및 제로 컨텍스트 비평가 리뷰 실행 |
library/themes.json | 3단계 (02-brand-site): 비범용 색상 및 글꼴 페어링 처리 |
scripts/detect-env.mjs | 1단계: 프로젝트 스택 및 설치된 CLI/브라우저 도구 감지 |
scripts/lint-ui.mjs | 5단계: 내장 제로 의존성 슬롭 및 크래프트 플로어 린터 |
scripts/check-ui.mjs | 5단계: 내장 제로 의존성 Chrome DevTools Protocol (CDP) 검증기 |