← ClaudeAtlas

design-planlisted

디자인 오케스트레이터. 프론트엔드 디자인 계획 수립부터 구현, 리뷰까지 디자인 관련 스킬을 순서대로 호출하여 일관된 디자인 품질을 보장. /aphrodite로 실행.
Dannykkh/skill-olympus · ★ 5 · AI & Automation · score 80
Install: claude install-skill Dannykkh/skill-olympus
# Aphrodite (아프로디테) — 디자인 오케스트레이터 > **아프로디테(Aphrodite)**: 미(美)의 여신. > 디자인 관련 스킬을 순서대로 호출하여 일관된 디자인 품질을 보장합니다. ## Quick Start ``` /aphrodite # 전체 디자인 파이프라인 /aphrodite --plan-only # 계획 단계만 (Phase 1~4, 구현 전까지) /aphrodite --review-only # 리뷰만 (Phase 6) ``` **공식 호출명:** `/aphrodite` (별칭: `아프로디테`, `디자인 계획`, `프론트 디자인`) ## 왜 이 순서인가 (실제 웹디자이너 프로세스 기준) Discovery → IA/사이트맵 → UX(플로우+와이어프레임) → UI(비주얼) → 구현 → QA — 에이전시 웹디자인 프로세스 문헌(Clique Studios, UXPin 등)과 교차 확인한 순서입니다. 와이어프레임은 UX 앞이나 뒤의 별도 단계가 아니라 **UX 설계의 산출물**이고, IA(정보구조·사이트맵·메뉴구성)는 스타일 결정보다 먼저 와야 합니다 — 뭘 만들지 모르는데 색부터 정하면 안 됩니다. 2026-07-22 감사에서 구버전(리서치가 스타일 결정 뒤에 오고, 사이트 단위 IA 단계 자체가 없던 구조)의 갭 2가지를 확인하고 재배열했습니다. ## 디자인 스킬 맵 ``` /aphrodite가 오케스트레이션하는 스킬: Phase 1: Discovery · 레퍼런스 자산화 → 제품/오디언스/근거 확인 → 레퍼런스 → 섹션 해부 슈퍼프롬프트 (references/reference-capture-guide.md) Phase 2: IA · 사이트맵 · 메뉴구성 → 페이지 목록 → 내비 구조 → 페이지 관계(사이트맵) (mermaid-diagrams 병행, 페이지 3개+일 때) Phase 3: 화면 유형 + 방향 컴파일 → 기능형/표현형 판별 → 구체 방향 3안 → 레시피/색상/폰트 → DESIGN.md (coder-interface-pattern-playbook + motion-first + style-recipes/ + CSV DB) Phase 4: 레이아웃 청사진 → 블록 시퀀스 + 블록별 anatomy 계약 + ASCII 와이어프레임 (frontend-design/references/layout-block-anatomy.md) Phase 5: frontend-design (구현) → DESIGN.md 토큰 + 청사진 + 슈퍼프롬프트 + technique-recipes 기반 코딩 Phase 6: design.md lint → 기계 검증 (broken-ref/orphan/대비 4.5:1) ui-ux-auditor →