Design Pro (디자인 프로)
7개의 출판된 컬렉션에서 가져온 328개의 디자인 플레이북을 위한 라우팅 레이어이며, 그 위에 UI 구축을 위한 조정된 파이프라인을 제공합니다. 각 플레이북은 독립적인 참조 파일입니다. 작업에서 요구하는 플레이북만 읽으십시오 — 전체 라이브러리를 로드하지 마십시오.
첫 번째 분기: UI 빌드인가요?
분류하기 전에, 요청이 두 경로 중 어느 것에 해당하는지 결정하십시오. 이것을 올바르게 판단하는 것이 일반적인 출력물과 차별화된 출력물을 가르는 기준입니다.
경로 A — UI 표면(페이지, 화면, 컴포넌트, 랜딩 페이지, 마케팅 사이트, 앱 뷰, 대시보드)을 빌드/디자인/개선하는 작업 (실제로 생성하거나 변경할 예정):
→ references/process/orchestrate.md를 읽고 따르십시오. 이것은 필수 파이프라인입니다. 번들로 제공되는 반-일반 엔진(tastemaker)을 핵심으로 구동하고, 다른 영역을 이에 종속되도록 라우팅하며, 최종적으로 반-슬롭 게이트를 강제합니다. UI 빌드를 단일 플레이북에 직접 전달하지 마십시오 — 그렇게 하면 '어떤 AI라도 만들 수 있는' 평범한 결과물을 생산하는 수동 스위치보드 방식이 됩니다.
경로 B — 그 외 모든 것(변경 없는 비평, 리서치 및 전략, 순수 Three.js/셰이더 씬, 모션 쇼릴, 게임 시스템, SVG 일러스트레이션, 'X를 다루는 스킬은 무엇인가요?' 등):
→ 아래의 스위치보드를 사용하십시오.
스위치보드 (경로 B)
- 요청을 아래 다섯 영역 중 하나로 분류하십시오.
- 해당 영역의
INDEX.md를 읽으십시오. 각 영역의 모든 플레이북과 전체 트리거 설명이 나열되어 있습니다. - 일치하는 한두 개의 플레이북을 읽으십시오. 작성된 그대로 따르십시오. 이 파일은 단순한 스위치보드일 뿐이며, 실제 전문 지식은 플레이북에 있습니다.
- 일치하는 항목이 없으면, 그렇게 말하고 억지로 맞추지 말고 자신의 판단에 따라 진행하십시오.
서로 다른 영역에서 두 개의 플레이북을 읽는 것은 정상적이고 올바릅니다. 여섯 개를 읽는 것은 요청을 여러 단계로 나눠야 한다는 신호입니다.
다섯 영역
| 영역 | 작업이 다음과 관련될 때 읽기 | 인덱스 |
|---|---|---|
| ui-craft (82개) | 폴리싱, 타이포그래피, 색상 시스템, 접근성, 레이아웃, 인터페이스 카피, 인터랙션 패턴, 애니메이션 및 모션 감각, 시각적 비평. '이것이 보기에도 느낌에도 적절한가'에 대한 레이어입니다. | references/ui-craft/INDEX.md |
| web-build (121개) | 랜딩 페이지, 마케팅 사이트, 디자인 엔지니어링, 스크롤 및 GSAP 스토리텔링, 참조나 화면 녹화를 프롬프트로 전환, 페이지 캡처, 아티클 및 이미지 생성. '페이지를 구축하는' 레이어입니다. | references/web-build/INDEX.md |
| process (63개) | 사용자 리서치, 인터뷰, 페르소나, JTBD, 여정 지도, 설문조사, 사용성 테스트, 디자인 시스템 거버넌스, 토큰, 디자인 옵스, 핸드오프 명세, 이해관계자 및 협업 작업. '작업이 결정되는 방식'에 대한 레이어입니다. | references/process/INDEX.md |
| motion-3d (36개) | Three.js 씬, 재질, 조명, 물, 갓 레이, 가상 투어, 모션 쇼릴, 웹 비디오 프레젠테이션, 손으로 그린 SVG 일러스트레이션 스타일. | references/motion-3d/INDEX.md |
| games (26개) | 게임 아키텍처, 게임플레이 루프, 전투 시스템, 스킬 VFX, 게임플레이 QA. | references/games/INDEX.md |
라우팅 힌트
다음은 잘못 판단하기 쉬운 요청들입니다:
- "더 좋아 보이게 해줘" / "AI가 만든 것처럼 보여" — 실제로 UI를 변경할 예정이라면 경로 A →
references/process/orchestrate.md입니다. 단순 비평만이라면ui-craft(tastemakeraudit동사 /better-interface)입니다. - "이 인터페이스를 검토해줘" (변경 없음) →
ui-craft(better-interface는 여섯 가지 렌즈 전체에 걸쳐 순위가 매겨진 하나의 보고서를 제공합니다). - 새 마케팅 페이지 구축 → 경로 A →
references/process/orchestrate.md.web-build+ui-craft를 두 개의 별도 엔진으로 직접 라우팅하지 마십시오. 오케스트레이터는 하나의 엔진을 실행하며, 근거를 가지고 게이트를 통과합니다. - 애니메이션이 이상하지만 이유를 설명할 수 없을 때 →
ui-craft의 애니메이션 플레이북. 일반적으로 이징과 지속 시간이 원인입니다. - "이걸 아예 만들지 말아야 할까요" →
ui-craft가 아니라process입니다. 리서치와 전략은 제작보다 먼저입니다. - 비디오가 되어야 하는 정적 디자인 →
motion-3d. - Figma 파일을 입력으로 받는 모든 작업 →
web-build(build-design).
지원 파일
일부 플레이북은 함께 제공되는 스크립트와 참조 자료를 <playbook>.files/라는 형제 폴더에 포함합니다. 플레이북이 자체 참조나 스크립트를 언급할 때는 해당 폴더를 찾으십시오. 데모 자산(비디오, 스크린샷, 텍스처)은 번들에 포함되지 않았습니다. 플레이북이 이를 가리키는 경우 예시용으로 간주하고 계속 진행하십시오.
출처
모든 플레이북에는 소스 저장소와 작성자를 명시하는 헤더가 포함되어 있습니다. 7개 컬렉션은 모두 MIT 라이선스로 제공되며 해당 헤더 외에는 수정되지 않은 상태로 번들되었습니다.
| 컬렉션 | 작성자 | 플레이북 수 |
|---|---|---|
| MengTo/Skills | Meng To | 178 |
| Owl-Listener/designer-skills | MC Dean | 111 |
| emilkowalski/skills | Emil Kowalski | 15 |
| jakubkrehel/skills | Jakub Krehel | 14 |
| ConardLi/garden-skills | ConardLi | 6 |
| codeswithroh/tastemaker | codeswithroh | 2 |
| elayadesign/ai-design-skills | Elaya | 2 |
플레이북의 내용을 클라이언트 대상 작업물에 인용할 때는 저작자 표시를 유지하십시오.