Sampo: UI 디자인, 모션 및 3D
화면의 모양이나 동작(웹 페이지, 앱 화면, 컴포넌트, 애니메이션, 3D 장면) 또는 "좋아 보이게" 만드는 모든 작업을 위한 단일 경로입니다. 이 경로는 UI 플레이북(아래 경로는 이 스킬 기준 상대 경로이며, 동일한 파일은 sampo playbooks show ui/NAME으로 출력됨)과 결과를 측정하는 sampo 동사로 연결됩니다. 목표는 절대 제네릭 카드 키트가 아닌 뷰포인트가 있는 UI입니다. 아래의 모든 단계는 결정을 내리거나 증명합니다. 터미널 UI 또는 Claude Code mod는 ../playbooks/references/ui/terminal-ui.md를 대신 사용합니다.
집중된 작업 내에서 작업하세요(각 단계에서 파일을 편집함). 각 단계에서는 해당 단계의 플레이북만 읽습니다.
1. 방향: 어떤 느낌이어야 할지 결정
- 저장소에 이미 방향이 있는 경우(
## Direction섹션이 있는DESIGN.md, 브랜드 가이드, 출시된 디자인 시스템): 이것이 우선합니다. 읽고 2단계로 가세요. 단, 사용자가 새로운 디자인을 요청한 경우는 예외입니다. - 방향이 없거나 사용자가 스타일 선택을 원하는 경우: Skill sampo:directions를 로드하세요(한 문장으로 여섯 개의 한 화면 카드 생성, 선택한 내용은 audacity 레벨과 함께
DESIGN.md로 저장됨). - 설명 대신 실제 견본을 보여주세요:
sampo page looks는 각 룩 카드당 하나의 실제 견본이 있는 갤러리를 작성합니다.sampo looks는 사용자의 과거 보관 및 되돌리기 기록을 바탕으로 상위 20개를 순위 매기므로, 상위 항목을 제안하세요. - 스탠스, 취향 단어, 방향 은행 및 "피해야 할 기본값":
../playbooks/references/ui/design-direction.md.
2. 토큰: 타입, 색상, 공간
../playbooks/references/ui/type-and-colour.md: 타입 스케일 및 페어링, OKLCH 팔레트 역할, 다크 모드는 별도 패스.- 기존 CSS:
sampo design extract SRC는 사용자 정의 속성에서 토큰 테이블을 추출하여 DESIGN.md의## Tokens섹션에 작성합니다(--out -은 대신 출력). 빈 상태에서:sampo design palette SEED --out tokens.css는 하나의 색상에서 라이트/다크 팔레트를 만듭니다(--format css|dtcg|tailwind). Figma 또는 DTCG.json의 토큰:sampo design tokens tokens.json --to md --out DESIGN.md. 하드코딩된 값:sampo design infer SRC가 토큰을 제안합니다. - 브랜드 에셋:
sampo design tokens DESIGN.md --to brand --out public/는 favicon.svg 및 card.svg를 작성합니다. - 토큰 드리프트:
sampo design xray PAGE --out xray.png는 각 요소의 윤곽선을 녹색(토큰 색상) 또는 빨간색으로 표시합니다. - 구축 전 검증:
sampo design contrast TOKENS는 역할 쌍을 확인합니다(다크 모드에서 본문 텍스트 7:1).
3. 구축: 레이아웃 및 동작
- 엄격한 템플릿에서 시작:
sampo new list, 그런 다음sampo new web DIR(페이지) 또는sampo new scene DIR(3D 장면);sampo new check PATH는 엄격함을 유지합니다. ../playbooks/references/ui/composition.md: 리듬, 그리드, 하나의 광원으로부터의 깊이, 히어로, 상태 아틀라스.../playbooks/references/ui/interaction.md: 피드백 데드라인, 키보드 워크, 양식 오류, 360px 터치 규칙.- 차트:
../playbooks/references/ui/data-viz.md. 스토리 페이지:../playbooks/references/ui/scrollytelling.md. - 코드 측 카드:
sampo lib show NAME(플레이북이 이름을 지정함).
4. 모션: 설계된 것, 뿌려진 것이 아님
../playbooks/references/ui/motion.md: 타이밍 토큰, 상태-모션 테이블, 스토리보드, 별도 경로로서의 reduced motion.- 모션 스코어 작성(
motion.toml을 저장소 루트에), 그런 다음sampo motion check(누락된 reduced form, 알 수 없는 easing, DESIGN.md에 없는 토큰) 및sampo motion compile --to css|waapi|three|lab --out FILE로 코드를 내보냅니다. - 게임 및 장난기 있는 UI:
../playbooks/references/ui/game-feel.md. 사운드:../playbooks/references/ui/sound-design.md.
5. 3D: 페이지를 절대 깨지 않는 장면
../playbooks/references/ui/scene-3d.md: 구성, 라이트 및 재질, 프레임 예산, 생존 계약(WebGL 없음, reduced motion, 컨텍스트 손실), 블랙 스크린 트라이어지.- 장면을 한 번 데이터로 설명(카메라, 라이트, 재질, 메시, 애니메이션)
scene.json에 작성한 후,sampo scene compile scene.json --to three --out scene.js(three.js 모듈) 또는--to component(컴포넌트)로 컴파일. - 의존성 없음: 단일 파일 WebGL2 템플릿
../playbooks/references/ui/templates/scene.html(sampo new scene). - 라이트 장비 및 PBR 프리셋:
sampo lib show light-and-material; 단일 표면용 셰이더 텍스처(전체 방향이 아님):sampo lib list --area looks, 그런 다음sampo lib show shader-NAME; 라이브러리:sampo lib show three-js,sampo lib show react-three-fiber.
6. 확인: 보고 증명하기
sampo design lint SRC: 일반 디자인 지적 및 기법 실수; 각각을 수정하거나 남겨두는 이유를 설명하세요. 마지막 줄은 사용되지 않는 DESIGN.md 토큰을 지목합니다. 사용하거나 테이블에서 제거하세요.sampo design check: DESIGN.md의 옵트인 게이트(## Gates,- brief: advisory|blocking): Knobs의 색상, 타입 패밀리 및 지속 시간이 코드에 있는지 확인합니다.- a11y: ...: 토큰 대비 쌍, reduced-motion 경로, 빠른 깜박임 없음, img alt 및 포커스 스타일 표시;- debt: advisory 40: 파일별 토큰화되지 않은 색상, 지속 시간 및 반경이 예산 내에 있는지 확인합니다.- 색상 변경 후
sampo design contrast TOKENS를 다시 실행하세요. 모션 변경 후sampo motion check을 다시 실행하세요. sampo critique URL: 페이지가 실제로 사용하는 스타일과 DESIGN.md의 토큰 비교(이름 없는 것, 거의 중복인 것, 일회성).--why SELECTOR는 어떤 규칙이 우선했는지 보여줍니다.--bingo는 템플릿 디자인의 9가지 징후를 점수화합니다(전체 라인일 경우 exit 1).--marks shot.png는 스크린샷에 그려진 빨간 연필 선을 표시된 요소당 하나의 캡처된 FIX로 변환합니다(--note는 각각이 요청하는 사항을 설명).--brief [ID]는 브리핑에 인용된 문구가 페이지에 있는지 확인합니다.../playbooks/references/ui/visual-qa.md:sampo smoke는 프레임 매트릭스(360/768/1440, 라이트/다크, reduced motion)를 촬영합니다. PNG를 읽고 확인하세요. 전후 비교:sampo img diff A.png B.png --out diff.png.- 컴포넌트 상태(기본, 호버, 오류, 빈 상태, 로딩):
sampo stories CHART는 각각을 하나의 매트릭스 페이지로 촬영합니다.sampo shot및sampo stories는--profile tv|eink|car|wrist(해당 표면의 크기 및 스케일) 및--reduced-motion(prefers-reduced-motion: reduce, 포스터 및 정적 상태용)을 지원합니다. - 각각을 작업 단계의 증거로 기록하세요. UI 변경은 녹색 테스트만으로 완료된 것이 아닙니다.
7. 취향
사용자가 디자인을 보관하거나 되돌립니다: sampo looks keep LOOK 또는 sampo looks revert LOOK을 사용하여 다음 순위가 이를 학습하도록 합니다.