huashu-design
SHA-256한 문장으로 AI agent가 납품 가능한 디자인을 만들어 줍니다: 웹페이지, App 프로토타입, 편집 가능한 PPT, 애니메이션, 인포그래픽. 오픈소스이며 무료로 상업적 이용이 가능합니다.
AI에게 한마디만 하면, 대기업 수준의 디자인 완성품을 받아보세요.
주요 기능
- 한 문장으로 전달 가능한 디자인 생성: 웹페이지, App 프로토타입, PPT, 애니메이션, 인포그래픽
- 6개의 후보 방향을 먼저 썸네일로 제시하고, 그중 3개를 골라 실제 비주얼로 제작해 선택할 수 있게 제공
- 샘플이 포함된 84가지 HTML 네이티브 스타일 라이브러리, 중국어 및 동아시아 디자인 섹션 포함
- HTML 슬라이드를 실제로 편집 가능한 텍스트 상자가 있는 PPTX 파일로보내기 가능
- 타임라인 애니메이션 엔진, 클릭 한 번으로 MP4/GIF/60fps 프레임 보간보내기 및 배경 음악 추가
할 수 없는 것
- •이것은 독립 소프트웨어가 아니며, 그래픽 인터페이스도 없고, Claude Code, Cursor, Codex 등 skills를 지원하는 AI agent와 함께 사용해야 하므로, 단독으로 설치해서는 실행할 수 없습니다. 설치 시 주의할 점: skills CLI 1.5.15 이하 버전에는 단일 파일만 동기화하는 버그가 있어 소재 디렉터리가 유실되므로, 먼저 최신 버전으로 업그레이드한 후 설치하거나 git clone으로 해결하세요. 또한 Figma를 대체하는 제품도 아닙니다: 산출물은 HTML, PPTX, MP4 등의 완성 파일이며, .fig 소스 파일을보낼 수 없고 다자간 실시간 협업도 지원하지 않습니다. 특정 브랜드가 관련된 경우에는 먼저 로고, 컬러 팔레트 등의 에셋을 제공하는 것이 좋으며, 그렇지 않으면 스타일 라이브러리에만 의존해야 합니다. 애니메이션보내기와 자동 클릭 검증에는 로컬에 Node.js 환경이 필요하며, 기초가 전혀 없는 사용자는 먼저 공식 YouTube 튜토리얼을 보는 것이 좋습니다.
사용 사례
- 프로덕트 매니저의 아이디어 빠른 검증: 한 문장으로 클릭 가능한 App 프로토타입 생성
- 직장인의 보고 작성: 발표 슬라이드 자동 생성 및 편집 가능한 PPTX로보내기
- 콘텐츠 크리에이터: 하나의 로직을 60초 게시용 애니메이션 또는 인포그래픽으로 제작
- 독립 개발자: 디자인 팀 없이도 대기업 수준의 제품 페이지 제작 가능
- 디자인 리뷰: 기존 디자인을 5가지 차원으로 점검하고 수정 목록 제공
상세 설명
Huashu Design 3.0은 오픈소스 HTML 네이티브 디자인 skill로, Claude Code, Cursor, Codex 등 agent에 설치하면 한 문장만 입력해도 몇 분 안에 납품 가능한 디자인을 얻을 수 있습니다: 클릭 가능한 App/웹 프로토타입, 실제 편집 가능한 PPTX로보낼 수 있는 슬라이드, 음악이 포함된 MP4/GIF 애니메이션, 인쇄급 인포그래픽. 먼저 여섯 장의 썸네일을 제시한 뒤 세 가지 방향을 골라 실제 시안으로 만들며, 샘플이 포함된 84가지 스타일 라이브러리가 뒷받침하고, 디자인 건강 검진과 외관 장부 기능으로 AI 특유의 뻔한 느낌을 방지합니다. Canva, v0 같은 클로즈드소스 도구와 비교하면 MIT 오픈소스로 상업적 이용이 무료이고 여러 agent에서 공통으로 사용할 수 있으며, 실제 편집 가능한 PPTX를보낼 수 있는 몇 안 되는 솔루션이기도 합니다. 한 줄 명령으로 설치: npx skills add alchaincyf/huashu-design
문제 해결 & FAQ (2)
문제 해결GitHub Issues에 문서를 업로드해도 huashu-design이 PPT를 생성하지 않는 이유는 무엇이며, 어떻게 올바르게 사용하나요?
GitHub Issues는 런타임 진입점이 아닙니다—그곳에서는 어떤 에이전트도 실행되지 않으므로 업로드된 파일은 절대 읽히거나 실행되지 않습니다. huashu-design은 여러분 자신의 코딩 에이전트(Claude Code, Codex, Cursor, OpenClaw 또는 Hermes)에 직접 설치해야 하는 스킬입니다. 단계: 1) 설치: npx skills add alchaincyf/huashu-design. 2) 설치 디렉터리(예: ~/.claude/skills/huashu-design/)에 SKILL.md와 함께 references, assets, scripts, demos 하위 디렉터리가 있는지 확인하세요. SKILL.md만 있는 경우 skills CLI가 오래된 것입니다—npm i -g skills@latest를 실행하고 재설치하거나, 직접 클론하세요: git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design. 3) 소스 자료를 로컬 폴더에 넣고 해당 폴더에서 에이전트 세션을 시작한 다음, 자연어로 요구 사항을 설명하세요(예: 청중, 발표 시간, 구조를 알려주고 먼저 개요와 시간 배분을 요청). 참고: 이 스킬은 전체 덱을 제작하기 전에 선택할 수 있도록 항상 3가지 스타일 초안(여러 페이지로 구성된 덱의 경우 각각 2개의 샘플 페이지)을 출력합니다—스타일을 미리 지정해도 이 단계는 건너뛰지 않습니다.
문제 해결npx skills add 실행 시 "YAML parse error: Nested mappings are not allowed in compact mappings" 오류를 해결하는 방법
이 오류는 스킬 저장소의 SKILL.md frontmatter에 콜론이 포함된 값이 따옴표로 묶이지 않았음을 의미합니다 (예: description: Huashu-Design — HTML-based hi-fi prototypes, ... slides: ...). YAML은 내부의 text: text를 중첩 매핑으로 읽기 때문에 파싱에 실패하고 CLI는 "No valid skills found."라고 보고합니다. 해결 방법: SKILL.md에서 description 값을 따옴표로 묶으세요:
---
name: huashu-design
description: "Huashu-Design — HTML-based hi-fi prototypes, interactive demos..."
---대안: description에서 콜론을 제거하거나 YAML 블록 스칼라(description: > 뒤에 들여쓰기된 줄)를 사용하세요. 스킬을 사용하기만 하고 저장소를 소유하지 않은 경우, 저장소를 포크하여 frontmatter를 수정한 다음 npx skills add <your-username>/<fork-name>을 실행하거나, 잘못된 SKILL.md를 업스트림 작성자에게 보고하세요.
태그
시작하기
소프트웨어 설치
배포판에 맞는 패키지를 설치 (dpkg / rpm / AppImage)
먼저 Node.js(v18 이상)를 설치하고, 터미널에서 npx 명령을 사용할 수 있는지 확인하세요
터미널에서 npx skills add alchaincyf/huashu-design을 실행하여 설치를 완료하세요
설치 디렉터리(예: ~/.claude/skills/huashu-design/)를 확인하여 references, assets, scripts, demos 하위 디렉터리가 모두 갖춰져 있는지 확인하세요
- 먼저 Node.js(v18 이상)를 설치하고, 터미널에서 npx 명령을 사용할 수 있는지 확인하세요
- 터미널에서 npx skills add alchaincyf/huashu-design을 실행하여 설치를 완료하세요
- 설치 디렉터리(예: ~/.claude/skills/huashu-design/)를 확인하여 references, assets, scripts, demos 하위 디렉터리가 모두 갖춰져 있는지 확인하세요
SHA-256 체크섬 확인됨
GitHub 공식 Release 페이지에서 추출된 체크섬
SHA256 체크섬
388c726432c06b5f4e91d7e9b83556d3b44bb65fae06263f8a6b931d7dc19a38이 체크섬은 GitHub Release 페이지에서 추출되었습니다. 다운로드 후 파일 무결성을 확인하세요.
이 플랫폼의 모든 SHA-256 체크섬은 프로젝트의 공식 GitHub Release 페이지에서 추출되었으며, 어떠한 변경도 없습니다. GitHub Releases 페이지에서 직접 검증할 수 있습니다.
오픈소스 투명성
GitHub 소스 보기제거 정보
이 도구는 어떤 데스크톱 프로그램도 설치하지 않으며, 제거하려면 skill 디렉토리만 삭제하면 됩니다: 설치 위치(일반적으로 ~/.claude/skills/huashu-design 또는 해당 agent의 skills 디렉토리)를 찾아 폴더 전체를 삭제하면 됩니다. git clone으로 설치한 경우에도 클론된 디렉토리를 삭제하면 됩니다. 시스템의 다른 위치에 파일이 남지 않습니다.
추가 의존성 없음
다운로드 후 바로 사용 가능. 추가 런타임이 필요하지 않습니다.
문제 발생? 아래 FAQ 확인
2 FAQs