← ClaudeAtlas

vibe.designlisted

UI 작업 전에 시각 품질 SSOT가 필요하거나 DESIGN.md를 생성·검증·동기화할 때 사용한다. Figma와 독립적으로 동작한다.
su-record/vibe · ★ 0 · Web & Frontend · score 75
Install: claude install-skill su-record/vibe
# /vibe.design ## 완료 기준 - [ ] DESIGN.md가 프로젝트 루트에 존재한다. - [ ] 선택한 subcommand의 lint 또는 drift 검사가 통과한다. - [ ] 색상·타이포그래피·간격 token에 placeholder가 없다. - [ ] `init --from=interview`이면 `.vibe/design-context.json`이 존재한다. **vibe 의 세 번째 SSOT — 시각 품질 계약 문서(`DESIGN.md`)** 의 라이프사이클을 전담한다. > `CLAUDE.md`(코드) · `AGENTS.md`(빌드) 에 이은 시각 규약. **Figma 에 종속되지 않는다** — Figma 는 4 가지 입력 소스 중 하나. ## Usage ``` /vibe.design init # 인터뷰 (디폴트) /vibe.design init --from=interview # 대화형 9 섹션 작성 /vibe.design init --from=code # 기존 코드 토큰 역추출 /vibe.design init --from=reference --reference=linear # awesome-design-md 시드 선택 /vibe.design init --from=figma --file=<key> # /vibe.figma 위임 (옵션) /vibe.design lint # Stitch 9 섹션 완전성 검증 /vibe.design verify [--files=<glob>] # 구현 ↔ DESIGN.md hex 드리프트 (v1) /vibe.design sync # Figma 연결 시 양방향 동기화 (Should, Phase 2) /vibe.design preview "description" # UI 프리뷰 (Antigravity 목업 또는 ASCII 폴백) ``` ## Philosophy - **Figma 독립**: 모든 서브커맨드는 Figma 없이 동작. Figma 연결 시에만 sync 활성. - **권유 > 강제**: DESIGN.md 부재 = 안내 메시지 1 회. `/vibe.run` · `/vibe.verify` 는 막지 않는다. - **Stitch 9 섹션 표준**: 외부 에이전트 호환 (Google Stitch, awesome-design-md 생태계). - **버전 frontmatter**: `<!-- design-md-version: 1 -->` 로 미래 호환. - **루트 배치**: `CLAUDE.md` · `AGENTS.md` 와 동일하게 프로젝트 루트. ## Process > **⏱️ Timer**: 시작 시 시스템 시각을 조회해 `{start_time}` 으로 기록. ### Subcommand: `init` **진입 조건**: 프로젝트 루트에 `DESIGN.md` 없음 (있으면 덮어쓰기 확인). **