프론트엔드 & 디자인 플로우
모놀리스가 아닌 라우터입니다. 이 스킬은 디자인 작업 자체를 수행하지 않고, 언제 어떤 전문화된 스킬을 실행할지 결정하며, 출력물이 AI가 만든 것처럼 보이지 않도록 규율을 적용합니다. 실제 작업은 references/skill-registry.md에 나열된 기본 스킬들에 의해 수행됩니다.
운영 원칙
- 라우팅하되, 재발명하지 마세요. 각 단계는 해당 작업을 소유한 스킬을 명시합니다. 해당 스킬이 설치되지 않은 경우,
references/skill-registry.md에서 설치 위치를 확인하세요. 스킬의 작업을 인라인으로 재구현하지 마십시오. - 픽셀 작업 전에 리서치를 먼저. 빈 캔버스를 차갑게 열지 마십시오. 1단계는 실제 디자인 작업을 위한 필수 전제 조건입니다.
- 요청 시에만, 자동으로 실행되지 않음. 이 스킬은 의도적으로 호출됩니다(이름/슬래시 명령어로). 후크를 설치하거나 자체적으로 트리거하지 않습니다. 복제 단계(클론/추출)는 제안되며, 사용자가 실행을 결정합니다.
- 안티-슬롬은 제안이 아닌 게이트입니다. 3단계는 "완료" 전에 실행되어야 합니다. P0 안티-슬롬 규칙을 위반하는 것은 취향 차이가 아니라 회귀입니다.
- 별도 패스로 검증하세요. UI를 생성한 스킬은 결과물을 승인하지 않습니다. 리뷰는 별도의 레인입니다(
design-review/ 새로운 검토자).
플로우
┌── 4단계: 스택 & 어휘 (참조 레이어 — 전체 과정에서 참조) ──┐
│ tech-stack.md · design-vocabulary.md │
└──────────────────────────────────────────────────────────────┘
아이디어 ─▶ 1단계: 리서치 ─▶ 2단계: 결과물 ─▶ 3단계: 리뷰 ─▶ 출시
(리서치 + 클론 (방향성 + (안티-슬롬 +
결정) 하이파이 빌드) a11y 게이트)
1단계 — 리서치 + 클론 결정 → references/stage-1-research-and-clone.md
디자인 전에 경쟁사 모션 리서치를 한 라운드 수행한 후, 복제 경로(영감만 / 전체 사이트 클론 / 단일 효과 추출)를 결정합니다. 이 단계는 deep-research → web-clone → web-shader-extractor로 이어지는 결정 트리를 소유합니다.
2단계 — 디자인 결과물 + 방향성 → references/stage-2-design-output.md
하이파이 프로토타입/페이지/컴포넌트를 제작합니다. 요구사항이 모호할 경우 먼저 디자인 방향성 어드바이저 모드를 시작합니다. huashu-design / frontend-design 및 그 위성 스킬들(모션, 컬러, 차트, 슬라이드, 알고리즘 아트)로 라우팅합니다.
3단계 — 리뷰 + 안티-슬롬 게이트 → references/stage-3-review-anti-slop.md
일곱 가지 치명적 죄악 안티-슬롬 체크리스트, 애니메이션 규율 수치, 접근성 기준, 그리고 별도의 디자인 리뷰 패스를 실행합니다. 이것이 출시 게이트입니다.
4단계 — 스택 + 어휘 → references/stage-4-stack-and-vocab.md
순차적 단계가 아닌 참조 레이어입니다. tech-stack.md에서 라이브러리를 선택하고, 프롬프트 작성이나 리뷰 시 design-vocabulary.md를 사용하여 증상이 아닌 메커니즘을 명명합니다. 1~3단계에서 참조되며, 의존성이나 모호한 설명이 나타날 때 절대 건너뛰지 않습니다.
빠른 라우팅 테이블
| 사용자가… | 이동 | 주요 스킬 |
|---|---|---|
| 실제 UI 작업을 시작할 때 | 1단계 먼저 | deep-research |
| "이 사이트 전체를 복제해줘" | 1단계 → 클론 분기 | web-clone |
| "저 배경 효과만 가져와줘" | 1단계 → 추출 분기 | web-shader-extractor |
| "프로토타입/페이지/컴포넌트를 만들어줘" | 2단계 | huashu-design, frontend-design |
| "어떤 스타일을 원할지 모르겠어" | 2단계, 어드바이저 모드 | huashu-design, creative-director |
| "좋아 보이게 해줘 / AI 같지 않게 해줘" | 3단계 | design-review, 안티-슬롬 체크리스트 |
| "X에는 무엇을 사용해야 해?" | 4단계 | tech-stack.md |
| "이 효과 이름이 뭐야?" | 4단계 | animation-vocabulary |
출처에 관한 참고 사항
이 스킬은 독립적으로 소유된 스킬들을 순서대로 실행하기 위해 작성된 오케스트레이션 레이어입니다. 원본/큐레이션된 참조 자료(references/design-vocabulary.md, references/tech-stack.md 및 단계 가이드)만 번들로 제공합니다. 라우팅하는 모든 타사 스킬은 references/skill-registry.md에 출처가 명시되어 있으며, 여기에 재배포되지 않으므로 별도로 설치해야 합니다. 전체 출처 목록은 README.md를 참조하세요.