클로드 코드에서 발표자료까지 뽑는 huashu-design 시작 가이드

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

Quick Start

huashu-design 은 Claude Code 같은 에이전트 안에서 HTML 로 고품질 시안·슬라이드·애니메이션을 만드는 스킬입니다. 새 디자인은 반드시 서로 다른 방향 세 가지 초안을 먼저 보여 주고, 고른 뒤에 본작업을 합니다. MIT 라이선스라 개인·상업 용도 모두 무료입니다.

1. STEP 1에서 스킬을 설치합니다.
2. STEP 2에서 만들 것을 말하고 방향을 고릅니다.
3. 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 에서 글자를 직접 고칠 수 있습니다.

알아 둘 한계

• 이 글은 2026년 9월 22일 기준 README·SKILL.md 와 임시 폴더 설치 결과로 썼습니다. 설치 뒤 실제 생성은 직접 확인하지 못했습니다. 영상 속 결과물 장면은 README 의 데모 영상입니다.
• Claude Design 과 같은 결과를 보장하지는 않습니다. 작성자는 README 에서 Claude Design 은 더 나은 그래픽 도구이고, 이 스킬은 대화로 만드는 쪽이라고 두 길을 구분합니다.
• 운영용 웹앱이나 백엔드가 필요한 시스템에는 맞지 않는다고 SKILL.md 가 밝힙니다.
• 설치 화면의 보안 점검에서 Socket 경고 1건이 표시됐습니다. 스킬은 에이전트 권한으로 실행되니 설치 전에 내용을 훑어보는 편이 안전합니다.

FAQ

Claude Code 말고도 되나요? README 는 Cursor·Codex 등 스킬을 지원하는 에이전트에서 모두 쓸 수 있다고 안내합니다.

중국어 문서만 있나요? 영어 README(README.en.md)도 있습니다. 요청은 한국어로 해도 됩니다.

공식 참고 자료

• huashu-design 공식 저장소 — alchaincyf/huashu-design
• skills.sh 공식 페이지 — huashu-design

설치 명령과 출력은 2026년 9월 22일에 임시 폴더에서 직접 실행해 확인한 내용입니다.