suryxnshsingh/design-engineer

design-engineer: 어떤 디자인 작업에 어떤 스킬을 사용할까

~/.claude/skills/ 아래의 모든 전문 스킬은 라이브 업스트림 레포지토리를 가리키는 얇은 포인터입니다. 어떤 스킬도 복사본을 제공하지 않습니다. 각 스킬은 작업을 수행하기 전에 최신 버전을 가져오는 방법을 알려줍니다. 공유 페처는 다음과 같습니다:

bash ~/.claude/skills/design-engineer/scripts/upstream.sh <이름>   # 클론 또는 업데이트, PATH=<dir> 출력

이름: impeccable ui-ux-pro-max blender-mcp img2threejs video-shotcraft hyperframes penpot remotion lemo-opuscar diagram-design. 오프라인일 때는 --no-update를 추가하세요.

라우팅 테이블

사용자가 원하는 작업	스킬	선택 이유
새 제품 또는 페이지를 위한 스타일 방향, 팔레트, 폰트, 전체 디자인 시스템	ui-ux-pro-max	79개 스타일 / 192개 제품 유형을 검색하여 시스템을 생성합니다
기존 UI 개선, 리뷰, 폴리싱, 슬롭 제거, 더 대담하거나 조용하게 만들기	impeccable	24개의 조종/리뷰/완료 명령어 + 62개 규칙 감지기
UI 변경을 배포하기 전에 AI 슬롭 발견	impeccable detect	결정적, LLM 불필요
아키텍처, 흐름, 시퀀스, ER, 간트, 조직도, 모든 다이어그램	diagram-design	하나의 브랜드화된 HTML+SVG 파일, 45가지 유형
제품 UI 내부의 차트 (독립형 다이어그램이 아님)	dataviz (내장) 후 impeccable	차트 시스템에는 dataviz, 주변 UI에는 impeccable
실제 웹사이트 또는 앱의 프로모션 비디오	video-shotcraft	실제 페이지 캡처, 샷 카드, Remotion 렌더링
HTML/CSS 비디오, Figma의 브랜드 토큰, 기존 비디오 역공학, 슬라이드쇼	hyperframes	HTML to MP4, 450개 블록, /figma 하위 스킬
React 비디오 또는 기존 Remotion 레포지토리	remotion	공식 Remotion 스킬
회화적 또는 다큐멘터리 스타일의 나레이션 단편 영화 / 설명 영상, 푸티지 없음	lemo-opuscar	60개 이상의 코드 전용 영화 스타일 (악보 + TTS 포함)
참조 이미지를 코드 전용 Three.js 모델로	img2threejs	절차적, 애니메이션 준비 완료
실제 3D 모델링, 씬, 재질, 렌더, 에셋 임포트	blender-mcp	MCP를 통해 라이브 Blender 구동
Penpot 디자인 파일 읽기 또는 편집	penpot	공식 Penpot MCP
UI 작업을 위한 Figma 파일 읽기 (토큰, 프레임, 컴포넌트)	공식 Figma MCP (claude mcp add figma -t http https://mcp.figma.com/mcp)	이 세트에서 다루지 않음; HyperFrames의 figma 하위 스킬은 비디오 전용
Figma 브랜드 에셋을 비디오로 가져오기	hyperframes figma 하위 스킬	HyperFrames 모션 구축을 위해서만 Figma 읽음

의사 결정 규칙

1. 기존 UI vs 새 UI. 기존: 좁은 대상에 대해 impeccable critique로 시작. 디자인 시스템이 없는 새 UI: 먼저 ui-ux-pro-max를 사용하고, 결과를 DESIGN.md에 저장한 후, 빌드하고, impeccable로 리뷰. 배포된 UI에서는 리뷰 단계를 절대 건너뛰지 마세요.
2. 비디오: 소스 자료에 따라 선택.
   • 실제 제품 페이지 → video-shotcraft.
   • HTML/CSS 스킬, 브랜드 에셋 또는 Figma → hyperframes.
   • 팀이 React로 코딩하거나 레포가 이미 Remotion 사용 → remotion.
   • 스토리 또는 주제 영화, 코드로 그리기 → lemo-opuscar. 포팅하지 않는 한 하나의 프로젝트에서 두 개의 비디오 프레임워크를 혼합하지 마세요 (HyperFrames에는 remotion-to-hyperframes가 있음).
3. 3D: 코드 또는 DCC. 출력물이 코드로 빌드된 웹 에셋이어야 함 → img2threejs. 실제 모델링 도구, 렌더 또는 다운로드된 에셋이 필요한 모든 것 → blender-mcp. 둘 다 사용자가 호스트 설정(설치 프로그램 또는 Blender 애드온)을 확인해야 합니다. 사용자가 해야 할 작업을 알려주세요.
4. 다이어그램은 차트가 아닙니다. 시스템 다이어그램 → diagram-design. 앱 내 데이터 차트 → dataviz. 비디오 내 차트 → 비디오 스킬의 차트 블록.
5. 디자인 파일. Penpot → penpot. UI용 Figma → 공식 Figma MCP; 비디오용 Figma → hyperframes figma 하위 스킬. 토큰을 한 번 가져와 DESIGN.md에 기록하여 다른 모든 스킬이 재사용할 수 있게 하세요.
6. MCP 기반 스킬 (blender-mcp, penpot)은 실행 중인 호스트 앱이 필요합니다. 먼저 claude mcp list를 확인하세요. 없으면 사용자에게 설치 및 연결 단계를 알려주고 사용자가 확인할 때까지 중단하세요.

일반적인 체인

• 새 랜딩 페이지: ui-ux-pro-max (시스템) → 빌드 → impeccable detect + critique → polish.
• 런치 킷: ui-ux-pro-max 토큰 → 사이트 → video-shotcraft 프로모션 → diagram-design 아키텍처 (문서용), 모두 동일한 토큰 사용.
• 디자인 핸드오프: penpot 토큰/프레임 → DESIGN.md → 빌드 → impeccable audit.
• 다이어그램이 포함된 설명 영상: diagram-design 스틸 → hyperframes 또는 lemo-opuscar (모션).
• 히어로 3D 오브젝트: 제품 사진에서 img2threejs → 임베드 → impeccable overdrive (인터랙션).

디자인 작업을 시작하기 전에

1. 테이블에서 스킬을 선택하세요. 두 개가 해당되면 의사 결정 규칙을 따르세요. 여전히 명확하지 않으면 질문 하나를 하세요.
2. upstream.sh <이름>으로 최신 버전을 가져오고 스킬이 명명한 진입 파일을 읽으세요. 현재 단계에 필요한 것만 읽으세요.
3. 프로젝트에 기존 DESIGN.md, PRODUCT.md, .diagram-design 또는 토큰 파일이 있는지 찾아 재사용하세요.
4. 어떤 스킬을 선택했는지와 그 이유를 한 줄로 말한 다음 작업을 수행하세요.

유지보수

• upstream.sh는 ~/.cache/design-skills/에 스킬당 얕은 클론을 유지합니다. 해당 폴더를 삭제하여 재설정하세요.
• 스킬을 추가하려면: scripts/upstream.sh에 케이스를 추가하고, 포인터 SKILL.md를 작성하고, 위에 행을 추가하세요.
• 업스트림에서 플러그인 또는 npx skills add 경로를 제공하는 경우 실제 프로젝트 내에서는 해당 경로를 선호하세요. 포인터 스킬은 항상 사용 가능한 폴백입니다.