TL;DR

Huashu Design은 Claude Code를 중심으로 Cursor와 Codex 등 skills 호환 agent에 설치하는 agent-agnostic plugin-extension-skill입니다. 자연어 요청을 받아 HTML-native 방식으로 클릭형 프로토타입, HTML Slides, 편집 가능한 PPTX, MP4·GIF 애니메이션, 인쇄용 인포그래픽을 만들며, Stage·Sprite 시간축과 형식 변환 스크립트를 사용합니다. 브랜드 자산을 공식 출처에서 수집해 CSS 변수로 고정하고, 자료가 부족하면 세 가지 디자인 방향과 40종의 스타일 라이브러리로 시안을 비교하는 작업 흐름을 적용합니다. 핵심 경로는 로컬 실행이지만 일부 음성·AI 평가 기능은 선택적 클라우드 경로이며, 복잡한 물리·입자 애니메이션과 Figma 레이어 편집은 지원하지 않습니다.

핵심 포인트

• Claude Code에서 사용하는 plugin-extension-skill이며 Claude Code, Cursor, Codex, OpenClaw, Hermes처럼 skills를 지원하는 여러 agent에서 작동합니다. `npx skills add alchaincyf/huashu-design`으로 설치한 뒤 자연어 요청만으로 디자인 작업을 시작합니다. 특정 GUI나 Figma 플러그인에 의존하지 않는 대화형 제작 방식이 핵심입니다.
• 입력한 브랜드 자산을 먼저 묻고 공식 페이지나 SVG에서 색상값을 수집한 뒤 `brand-spec.md`와 CSS 변수로 고정합니다. 브랜드 자료가 없으면 세 가지 방향을 병렬 생성하고 40종의 HTML-native 스타일 라이브러리에서 실제 시안을 만듭니다. 이 흐름은 임의의 색상과 반복적인 AI 디자인 패턴을 줄이는 데 초점을 둡니다.
• 단일 파일 HTML 기반의 클릭형 App·Web 프로토타입, 브라우저용 HTML Slides, 편집 가능한 PPTX, MP4·GIF 애니메이션, PDF·PNG·SVG 인포그래픽을 생성합니다. Motion Design은 Stage와 Sprite 시간축, `useTime`, `useSprite`, `interpolate`, `Easing` API를 사용하고 Playwright로 브라우저 결과를 확인합니다. 렌더링과 주요 형식 변환은 로컬 스크립트로 처리합니다.
• 핵심 제작·렌더링·내보내기 경로는 100% 로컬에서 동작하며 telemetry가 없고 클라우드 기능은 선택적으로 분리되어 있습니다. 설치 시 `SKILL.md`뿐 아니라 `references/`, `assets/`, `scripts/`, `demos/`가 함께 필요하므로 오래된 `skills` CLI에서는 전체 디렉터리가 누락될 수 있습니다. Framer Motion 수준의 복잡한 3D·물리·입자 애니메이션과 Figma로 가져가 레이어 단위 편집하는 PPTX는 지원 범위 밖입니다.

이미지 분석