alchaincyf/huashu-design

_{🌐 <b>中文</b> · <a href="README.en.md">English</a>}

<div align="center">

Huashu Design

「타이핑. 엔터. 바로 납품 가능한 디자인.」

"Type. Hit enter. A finished design lands in your lap."

<br>

당신의 agent에 한 문장을 입력하면, 납품 가능한 디자인을 받아보세요.

<br>

3분에서 30분 안에 제품 발표 애니메이션, 클릭 가능한 App 프로토타입, 편집 가능한 PPT, 인쇄 품질의 인포그래픽을 ship할 수 있습니다.

'AI가 그럭저럭 괜찮게 만들었다'는 수준이 아니라 — 대기업 디자인 팀이 만든 것처럼 보입니다. skill에 브랜드 자산(로고, 색상 팔레트, UI 스크린샷)을 제공하면 브랜드 분위기를 읽어내고; 아무것도 제공하지 않아도 세 가지 로직 컨설턴트 + 40가지 HTML 네이티브 스타일 라이브러리가 AI slop을 방지합니다.

이 README에 있는 모든 애니메이션은 huashu-design이 직접 만든 것입니다. Figma가 아니고, AE도 아닙니다. 단 한 줄의 프롬프트 + skill로 실행되었습니다. 다음 제품 발표를 위한 홍보 영상이 필요하신가요? 이제 직접 만들 수 있습니다.

npx skills add alchaincyf/huashu-design

크로스 agent 호환 — Claude Code, Cursor, Codex, OpenClaw, Hermes 모두 설치 가능.

📣 MIT 라이선스로 변경되었습니다. 2026-05-14부터 이 skill은 완전히 오픈소스(MIT License)이며, 개인 및 상업적 사용 모두 무료이고 사전 승인이 필요하지 않습니다. 기존의 '개인 사용 무료, 기업 상업 사용은 승인 필요' 조항은 폐기되었습니다. (변경 사항 확인)

효과 보기 · 설치 · 할 수 있는 것 · 핵심 메커니즘 · Claude Design과의 관계

</div>

<p align="center"> <img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.gif" alt="huashu-design Hero · 타이핑 → 방향 선택 → 갤러리 펼쳐짐 → 포커스 → 브랜드 드러남" width="100%"> </p>

<p align="center">_{▲ 25초 · Terminal → 4방향 → Gallery ripple → 4회 Focus → Brand reveal<br> 👉 <a href="https://www.huasheng.ai/huashu-design-hero/">음향 효과가 포함된 HTML 인터랙티브 버전 방문</a> · <a href="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4">MP4 다운로드 (BGM+SFX 포함 · 10MB)</a>}</p>

📺 초보자 튜토리얼 (화슈 친필 녹화)

사용 방법을 모르시나요? 화슈가 녹화한 huashu-design上手 튜토리얼을 확인하세요:

<p align="center"> <a href="https://www.youtube.com/watch?v=m-BlUdcIvw"><img src="https://img.youtube.com/vi/m-BlUdcIvw/maxresdefault.jpg" alt="huashu-design 사용 튜토리얼" width="70%"></a> </p>

<p align="center">_{👉 <a href="https://www.youtube.com/watch?v=m-_BlUdcIvw">YouTube에서 전체 튜토리얼 보기</a>}</p>

설치 후 바로 사용

npx skills add alchaincyf/huashu-design

그런 다음 Claude Code에서 바로 말하세요:

「AI 심리학에 관한 발표 PPT를 만들어 줘, 3가지 스타일 방향을 추천하고 선택하게 해줘」
「AI 뽀모도로 iOS 프로토타입을 만들어 줘, 4개의 핵심 화면이 실제로 클릭 가능해야 해」
「이 로직을 60초 애니메이션으로 만들어서 MP4와 GIF로 내보내 줘」
「이 디자인에 대해 5차원 평가를 해줘」

버튼도, 패널도, Figma 플러그인도 없습니다.

Star 추세

<p align="center"> <a href="https://star-history.com/#alchaincyf/huashu-design&Date"> <img src="https://api.star-history.com/svg?repos=alchaincyf/huashu-design&type=Date" alt="huashu-design Star History" width="80%"> </a> </p>

할 수 있는 것

Demo 갤러리

디자인 방향 컨설턴트

모호한 요구사항에 대한 fallback: 세 가지 상호 보완적 로직 병렬 — 초 단위 룰렛(20개 중 1개 선택, 관성 깨기) + 실제 참조(세계적 수상 사이트 마이그레이션) + 최고 디자이너(최고 스튜디오 철학), 3가지 실제 시각 자료를 직접 출력하여 보고 선택하게 하며, 텍스트로 블라인드 스타일 선택을 강요하지 않습니다. 그 뒤에는 40가지 HTML 네이티브 스타일 라이브러리(웹 20 + PPT 20, 순수 CSS, 이미지 생성 불필요)가 있습니다.

<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w3-fallback-advisor.gif" width="100%"></p>

iOS App 프로토타입

iPhone 15 Pro 정확한 본체 (다이내믹 아일랜드 / 상태 표시줄 / Home Indicator) · 상태 기반 다중 화면 전환 · 실제 이미지는 Wikimedia/Met/Unsplash에서 가져옴 · Playwright 자동 클릭 테스트.

<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c1-ios-prototype.gif" width="100%"></p>

Motion Design 엔진

Stage + Sprite 시간 조각 모델 · useTime / useSprite / interpolate / Easing 네 가지 API로 모든 애니메이션 요구 충족 · 한 명령으로 MP4 / GIF / 60fps 프레임 보간 / BGM 포함 완성본 내보내기.

<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c3-motion-design.gif" width="100%"></p>

HTML Slides → 편집 가능한 PPTX

HTML deck 브라우저 발표 · html2pptx.js가 DOM의 computedStyle을 읽어 요소별로 PowerPoint 객체로 변환 · 내보내기는 실제 텍스트 상자이며, PPT에서 더블 클릭하여 편집 가능.

<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c2-slides-pptx.gif" width="100%"></p>

Tweaks · 실시간 변형 전환

색상 / 글꼴 / 정보 밀도 등 매개변수화 · 사이드 패널 전환 · 순수 프론트엔드 + localStorage 지속성 · 새로고침해도 유지.

<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c4-tweaks.gif" width="100%"></p>

인포그래픽 / 데이터 시각화

잡지 수준 레이아웃 · CSS Grid 정확한 컬럼 분할 · text-wrap: pretty 타이포그래피 디테일 · 실제 데이터 기반 · PDF 벡터 / PNG 300dpi / SVG 내보내기 가능.

<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c5-infographic.gif" width="100%"></p>

5차원 전문가 리뷰

철학적 일관성 · 시각적 계층 구조 · 디테일 실행 · 기능성 · 혁신성 각 0–10점 · 레이더 차트 시각화 · Keep / Fix / Quick Wins 목록 출력.

<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c6-expert-review.gif" width="100%"></p>

Junior Designer 워크플로우

처음부터 큰 작업을 하지 않음: 먼저 assumptions + placeholders + reasoning을 작성하고, 가능한 한 빨리 사용자에게 보여준 후 반복합니다. 잘못 이해한 것을 일찍 고치는 것이 늦게 고치는 것보다 100배 저렴합니다.

<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w2-junior-designer.gif" width="100%"></p>

브랜드 자산 프로토콜 5단계 하드 프로세스

특정 브랜드가 관련될 때 강제 실행: 질문 → 검색 → 다운로드 (세 가지 fallback) → grep 색상 값 → brand-spec.md 작성.

<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w1-brand-protocol.gif" width="100%"></p>

Showcase · 실제 사례

앵무새 진화사 웹사이트 · 디자인 방향 컨설턴트 세 가지 로직 실전 (2.0)

Live demo · https://www.huasheng.ai/parrots/

한 문장 "앵무새 진화사를 소개하는 웹사이트를 만들어 줘", 추가 요구사항 없이, skill이 자동으로 전체 2.0 컨설턴트 프로세스를 실행: 먼저 이미지가 콘텐츠에 필수적이라고 판단 → 공개 도메인 자연사 삽화(Edward Lear / John Gould의 앵무새 도감)를 가져옴 → 세 가지 로직 병렬(초 단위 룰렛 + 실제 참조 수상 사이트 + Kenya Hara 'White' 철학) 각각 실제 시각 자료를 한 버전씩 출력. 자료가 준비된 후 디자인하며, 디자인하면서 색상 블록으로 자리 표시하지 않습니다.

「聊聊 skill」 · PM after-party 발표 deck

Live demo · https://skill-huasheng.vercel.app

13페이지 HTML deck, 모두 huashu-design으로 완성:

• 검은 배경 미니멀 세리프 비주얼 시스템 (cover / about / hook / what / why / closing)
• BGM + SFX가 포함된 2개의 22초 시네마틱 데모 (Nuwa skill workflow + Darwin skill workflow), 각각 완전히 독립적인 비주얼 언어 사용:
• Nuwa: 3D 지식 orbit + Pentagon 추출 + SKILL.md typewriter + 「21분」 hero reveal
• Darwin: autoresearch loop spin + v1/v5 나란히 diff + Hill-Climb 전체 화면 곡선 + Ratchet gear lock
• 각 시네마틱은 기본적으로 전체 정적 workflow dashboard 표시 (시청자가 언제든지 skill이 어떻게 실행되는지 볼 수 있음), ▶를 클릭해야 애니메이션 트리거, 실행 후 자동으로 dashboard로 fade
• huasheng.ai의 25초 hero 애니메이션 임베드 (iframe 로컬 fallback)
• 실제 데이터: 14,495 stargazers 실제 곡선 (gh API 가져오기) + DeepSeek V4 실제 사양 (WebSearch 검증)
• 실제 AI 자료: huashu-gpt-image로 4×2 그리드 큰 이미지 실행, extract_grid.py로 8개의 독립적인 투명 PNG 추출, 3D orbit 부동에 사용

• /slides/slide-04b-nuwa-flow.html · 정적 dashboard + cinematic overlay 이중 레이어 아키텍처
• /slides/slide-06b-darwin-flow.html · 완전히 독립적인 비주얼 언어의 대조 사례
• /slides/slide-03b-deepseek-cover.html · AI slop vs 실제 디자이너 관점 비교 페이지

참고할 만한 페이지:

자세한 cinematic 패턴은 references/cinematic-patterns.md 참조.

핵심 메커니즘

브랜드 자산 프로토콜

skill에서 가장 엄격한 규칙 세트. 특정 브랜드(Stripe, Linear, Anthropic, 자사 등)가 관련될 때 5단계 강제 실행:

A/B 테스트 (v1 vs v2, 각각 6 agent 실행): v2의 안정성 분산이 v1보다 5배 낮음. 안정성의 안정성, 이것이 skill의 진정한 해자입니다.

디자인 방향 컨설턴트 (Fallback)

사용자 요구사항이 모호하여 시작할 수 없을 때 트리거 (2.0 재작업):

• 먼저 대화로 명확히 하고 + 적극적으로 참고 자료 요청 (이름 / 로고 / 브랜드 색상 / 좋아하는 참고 사이트)
• 콘텐츠에 필요한 실제 이미지(공개 도메인 / 저작권 무료, 스크립트로 한 번에 가져오기)를 확보한 후 작업 시작
• 세 가지 상호 보완적 로직 병렬 subagent, 각각 실제 시각 자료 한 버전 출력: ① 초 단위 룰렛 (date +%S로 초 가져오기, 20개 중 1개 선택, 모델이 미니멀을 선호하는 관성 깨기) ② 실제 참조 (세계적 수상 웹사이트 / PPT / iOS 프로토타입 마이그레이션) ③ 최고 디자이너 (예산 무제한일 때 가장 적합한 스튜디오 철학)
• 절대 시각 자료를 보지 않고 블라인드 스타일 선택을 강요하지 않음 — 세 가지 버전을 펼쳐 놓고 보고 선택
• 선택 후 메인 Junior Designer 프로세스로 진입
• 기본은 40가지 HTML 네이티브 스타일 라이브러리(웹 20 + PPT 20, 대담 / 중립 / 조용함으로 분류, 순수 CSS, 이미지 생성 불필요)를 탄약으로 사용, 교리가 아님

Junior Designer 워크플로우

기본 작업 모드, 모든 작업에 적용:

• 작업 시작 전에 질문 목록을 한 번에 사용자에게 보여주고, 일괄 답변을 기다린 후 작업 시작
• HTML에 먼저 assumptions + placeholders + reasoning comments 작성
• 가능한 한 빨리 사용자에게 보여줌 (회색 블록일지라도)
• 실제 콘텐츠 채우기 → variations → Tweaks 이 세 단계에서 각각 다시 한 번 보여줌
• 납품 전에 Playwright로 브라우저에서 육안으로 한 번 확인

반 AI slop 규칙

눈에 띄는 AI의 시각적 최대 공약수(보라색 그라데이션 / 이모지 아이콘 / 둥근 모서리+왼쪽 border accent / SVG로 얼굴 그리기 / Inter를 display에 사용)를 피합니다. text-wrap: pretty + CSS Grid + 정성스럽게 선택된 serif display 및 oklch 색상을 사용합니다.

Claude Design과의 관계

솔직히 인정합니다: 브랜드 자산 프로토콜의 철학은 Claude Design에서 유출된 프롬프트에서 배운 것입니다. 그 프롬프트는 좋은 고품질 디자인은 백지에서 시작하는 것이 아니라 기존 디자인 컨텍스트에서 자라는 것이라고 반복해서 강조합니다. 이 원칙이 65점 작품과 90점 작품을 가르는 기준입니다.

포지셔닝 차이:

Claude Design은 더 나은 그래픽 도구이고, huashu-design은 그래픽 도구 계층을 없애는 것입니다. 두 가지 길, 다른 사용자.

Limitations

• 레이어 수준에서 편집 가능한 PPTX에서 Figma로의 변환은 지원하지 않습니다. HTML을 출력하며, 스크린샷, 화면 녹화, 이미지 내보내기는 가능하지만 Keynote로 가져와서 텍스트 위치를 수정할 수는 없습니다.
• Framer Motion 수준의 복잡한 애니메이션은 불가능합니다. 3D, 물리 시뮬레이션, 입자 시스템은 skill 범위를 벗어납니다.
• 완전히 빈 브랜드의 처음부터 디자인 품질은 60–65점으로 떨어집니다. 백지에서 hi-fi를 그리는 것은 어쩔 수 없는 최후의 수단입니다.

이것은 80점짜리 skill이지 100점짜리 제품이 아닙니다. 그래픽 인터페이스를 열고 싶지 않은 사람들에게 80점짜리 skill이 100점짜리 제품보다 더好用합니다.

저장소 구조

huashu-design/
├── SKILL.md                 # 메인 문서 (agent가 읽음)
├── README.md                # 중국어 README (기본, 이 파일)
├── README.en.md             # 영어 README
├── assets/                  # Starter Components
│   ├── animations.jsx       # Stage + Sprite + Easing + interpolate
│   ├── ios_frame.jsx        # iPhone 15 Pro 베젤
│   ├── android_frame.jsx
│   ├── macos_window.jsx
│   ├── browser_window.jsx
│   ├── deck_stage.js        # HTML 슬라이드 엔진
│   ├── deck_index.html      # 다중 파일 deck 결합기
│   ├── design_canvas.jsx    # 나란히 변형 표시
│   ├── showcases/           # 24개의 사전 제작 샘플 (8개 시나리오 × 3개 스타일)
│   └── bgm-*.mp3            # 6개의 시나리오 배경 음악
├── references/              # 작업별로 깊이 읽을 하위 문서
│   ├── animation-pitfalls.md
│   ├── design-styles.md     # 40가지 HTML 네이티브 스타일 라이브러리 (웹 20 + PPT 20)
│   ├── slide-decks.md
│   ├── editable-pptx.md
│   ├── critique-guide.md
│   ├── video-export.md
│   └──...
├── scripts/                 # 내보내기 도구 체인
│   ├── render-video.js      # HTML → MP4
│   ├── convert-formats.sh   # MP4 → 60fps + GIF
│   ├── add-music.sh         # MP4 + BGM
│   ├── export_deck_pdf.mjs
│   ├── export_deck_pptx.mjs
│   ├── html2pptx.js
│   └── verify.py
└── demos/                   # 9개의 기능 데모 (c*/w*), 중영 이중 버전 GIF/MP4/HTML + hero v10

기원

Anthropic이 Claude Design을 발표한 날 새벽 4시까지 가지고 놀았습니다. 며칠 후 다시는 열어보지 않았다는 것을 깨달았습니다. 그것이 나쁘다는 것이 아니라 — 이 분야에서 현재 가장 성숙한 제품입니다 — 제가 그래픽 인터페이스를 전혀 열고 싶지 않고 agent가 터미널에서 작업을 대신해 주는 것을 선호하기 때문입니다.

그래서 agent가 Claude Design 자체(커뮤니티에 유출된 시스템 프롬프트, 브랜드 자산 프로토콜, 컴포넌트 메커니즘 포함)를 분해하고, 구조화된 spec으로 증류한 다음, skill로 작성하여 자신의 Claude Code에 설치하도록 했습니다.

Anthropic이 Claude Design의 프롬프트를 명확하게 작성해 준 것에 감사드립니다. 다른 제품의 영감을 바탕으로 한 이러한 2차 창작은 AI 시대 오픈소스 문화의 새로운 형태입니다.

huashu-design으로 만든 제품

FanBox · Coding Agent의 조종석 의 세 가지 인터페이스 스킨은 huashu-design으로 디자인되었습니다. Claude Code / Codex를 지휘하여 작업하고, 그것이 접촉한 모든 파일, 모든 변경 사항을 확인하세요.

!FanBox · Coding Agent의 조종석

License

2026-05-14부터 MIT 라이선스로 변경되었습니다. 이전 버전은 '개인 사용 무료, 기업 상업 사용은 승인 필요'의 Personal Use License를 사용하여 상업적 사용에 제한을 두었습니다 — 이제 이 제한이 완전히 해제되었습니다.

MIT License에 따라, 이 skill을 자유롭게 사용, 수정, 배포할 수 있으며, 상업적 용도 — 회사 내부 사용, 고객 주문 납품, 유료 제품으로 만들어 판매 — 모두 문제없습니다. 사전 승인, 비용 지불, 인사가 필요하지 않습니다. 출처 표시는 필수가 아니지만 환영합니다.

Connect · 화셩 (화슈)

화셩은 AI Native Coder, 독립 개발자, AI自媒体 블로거입니다. 대표작: 고양이 손전등 앱 (AppStore 유료 차트 1위), 《한 권으로 DeepSeek 마스터하기》, Nuwa.skill (GitHub 12000+ star).自媒体 전 플랫폼 30만+ 팔로워.

협업 문의,自媒体 원고 의뢰 → 위 플랫폼 중 하나에서 화셩에게 DM 보내주세요.