클로드 코드에서 발표자료까지 뽑는 huashu-design 시작 가이드
Quick Start
huashu-design 은 Claude Code 같은 에이전트 안에서 HTML 로 고품질 시안·슬라이드·애니메이션을 만드는 스킬입니다.
새 디자인은 반드시 서로 다른 방향 세 가지 초안을 먼저 보여 주고, 고른 뒤에 본작업을 합니다.
MIT 라이선스라 개인·상업 용도 모두 무료입니다.
- STEP 1에서 스킬을 설치합니다.
- STEP 2에서 만들 것을 말하고 방향을 고릅니다.
- STEP 3에서 원하는 형식으로 뽑습니다.
STEP 1 · 2분스킬을 설치한다
이 단계에서는 작업할 프로젝트 폴더에서 설치 명령을 실행합니다.
에이전트 안에서 실행하면 확인 질문 없이 프로젝트 범위(./.claude/skills/huashu-design)로 들어갑니다.
모든 프로젝트에서 쓰려면 -g 로 전역 설치합니다.
npx skills add alchaincyf/huashu-design
성공하면 Found 1 skill 과 Done! 이 나오고, 폴더에 SKILL.md 와 references·assets·scripts·demos 폴더가 생깁니다.
README 는 네 폴더가 모두 있어야 제대로 동작한다고 안내합니다.
STEP 2 · 5분만들 것을 말하고 방향 세 가지 중 고른다
이 단계에서는 결과물의 용도와 대상을 한 문장으로 말합니다.
스킬은 새 디자인이면 스타일을 지정해도 먼저 방향 세 가지 초안을 보여 줍니다.
브랜드 로고·색·UI 스크린샷을 같이 주면 그 분위기를 읽고 시작합니다.
신규 고객 대상 서비스 소개 발표 슬라이드를 10장으로 만들어줘. 먼저 서로 다른 스타일 방향 세 가지를 초안으로 보여주고, 각 방향의 분위기와 어울리는 상황을 한 줄씩 적어줘. 내가 고른 방향으로만 끝까지 만들어줘.
성공하면 세 가지 초안이 나란히 나오고, 하나를 고르면 그 방향으로 전체 작업이 이어집니다.
STEP 3 · 15분원하는 형식으로 뽑는다
이 단계에서는 용도에 맞는 산출물을 지정합니다.
README 기준으로 클릭되는 앱·웹 시안(단일 HTML), 브라우저 발표용 HTML 슬라이드와 편집 가능한 PPTX, MP4·GIF 애니메이션, 인포그래픽, 5가지 기준 디자인 평가를 만들 수 있습니다.
고른 방향으로 HTML 슬라이드를 완성하고, 글상자를 편집할 수 있는 PPTX 로도 내보내줘.
성공하면 HTML 파일과 PPTX 파일이 폴더에 생기고, PowerPoint 에서 글자를 직접 고칠 수 있습니다.
FAQ
Claude Code 말고도 되나요? README 는 Cursor·Codex 등 스킬을 지원하는 에이전트에서 모두 쓸 수 있다고 안내합니다.
중국어 문서만 있나요? 영어 README(README.en.md)도 있습니다.
요청은 한국어로 해도 됩니다.
공식 참고 자료
이메일 남기고 전체 바로 보기