huashu-design

🌐 中文 · English

Huashu Design

「타이핑. 엔터. 납품 가능한 디자인이 나온다.」
"Type. Hit enter. A finished design lands in your lap."

에이전트에 한 문장만 입력하면, 납품 가능한 디자인을 돌려받습니다.

3~30분이면 제품 출시 애니메이션, 클릭 가능한 앱 프로토타입, 편집 가능한 PPT, 인쇄급 인포그래픽을 ship할 수 있습니다.

「AI가 만든 것치고는 괜찮네」 수준이 아닙니다——대기업 디자인 팀이 만든 것처럼 보입니다. skill에 브랜드 자산(로고, 색상 팔레트, UI 스크린샷)을 주면 브랜드 기질을 읽어냅니다. 아무것도 주지 않아도, 여섯 장의 썸네일에서 고른 세 가지 실제 방향 + 92종 샘플 포함 스타일 라이브러리가 AI slop이 나오지 않도록 받쳐줍니다.

이 README의 모든 페이지 디자인은 huashu-design이 직접 만든 것입니다. Figma도, AE도 아니고, 한 문장 프롬프트 + skill로 완성했습니다. 다음 제품 출시 홍보 영상이 필요하다고요? 이제 당신도 만들 수 있습니다.

npx skills add alchaincyf/huashu-design

크로스 에이전트 범용——Claude Code, Cursor, Codex, OpenClaw, Hermes 모두 설치 가능.

📣 MIT 라이선스로 변경되었습니다. 2026-05-14부터 이 skill은 완전 오픈소스(MIT License)이며, 개인 및 상업적 사용 모두 무료이고 사전 허가가 필요 없습니다. 기존 「개인 사용 무료, 기업 상업적 사용은 라이선스 필요」 조항은 폐기되었습니다.(변경 사항 보기)

🆕 3.1: 샤오홍슈 이미지-텍스트 추가. 3:4 세로 이미지 한 세트의 여덟 가지 패러다임——표본지, 스티커북, 인덱스, 장권(長卷), 일보, 트레이딩 카드, 여백, 인포그래픽. 각 샘플은 동시에 바로 수정 가능한 템플릿이며, 한 명령으로 완성 이미지로 잘라내고 글자 크기, 경계 초과, 장권 이음새, 글자 겹침까지 점검합니다. 샘플 보기

3.0: 세 방향이 더 과감해졌고, 프로젝트끼리 더 이상 똑같이 생기지 않습니다. 먼저 여섯 장의 썸네일을 낸 뒤 세 버전을 골라 실제 시안으로 만들고, 스타일 라이브러리는 84종으로 확장(App, 중문·동아시아 두 구역 신설)되어 각각 샘플이 있습니다. 참조 작품은 먼저 스크린샷을 찍고 나서 착수하며, 사실만 측정하는 디자인 검진과 당신이 만들어온 모습을 기억하는 외관 장부를 갖췄습니다. 자세히는 핵심 메커니즘

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

▲ 3.0 출시 영상 · 32초 · 영상 속 모든 페이지 디자인은 3.0이 직접 만든 것이고, 편집은 huashu-motion 사용

👉 MP4 다운로드(1080p · 배경음악 포함 · 24MB) ·
2.0의 음향 효과 포함 HTML 인터랙티브 버전

3.0 사례
아래는 모두 3.0으로 뽑아낸 것입니다. 앞의 다섯 개는 출시 당시 새로 돌린 6개 과제에서 고른 것으로, 각 과제에는 한 문장 요구사항만 주어졌고 방향은 에이전트가 스스로 골랐으며 저자는 개입하지 않았습니다. 뒤의 두 개는 하나는 3차 블라인드 선정에서 이긴 버전, 하나는 출시 후 저자가 실제 프로젝트에 사용한 것입니다.

웹 · 《후가쿠 36경》 온라인 전시

「가쓰시카 호쿠사이의 《후가쿠 36경》으로 온라인 전시 웹사이트를 만들어줘」

세 버전은 각각 Rijksmuseum 공식 사이트식 암전 전시장, 다나카 잇코식 삼각창, 민국 서책 표지식 제첨 틀입니다. 디자인 검진이 한 번 충돌을 보고했습니다. 두 버전의 첫 화면이 모두 《가나가와 해변의 파도 뒤》를 썼기에, 암전 버전을 《산 아래 백우》로 바꿨습니다.

다음 장에서는 프러시안 블루를 다루는데, 근거는 메트로폴리탄 미술관의 스펙트럼 연구입니다. 전체 46점 모두 시카고 미술관과 메트로폴리탄의 오픈 컬렉션에서 가져왔습니다.

앱 · 鸣迹(조류 관찰 기록)

「조류 관찰 기록 앱 프로토타입을 만들어줘」

현실 참조로는 2025년 애플 디자인 어워드를 받은 CapWords를 찾았고, ref_board.py가 먼저 이를 참조 보드로 캡처해 에이전트가 직접 본 뒤 착수했습니다. 빌려온 것은 「사진에서 스티커 한 장을 떼어내는」 방식입니다. 새 한 마리마다 Wikimedia의 실제 사진에서 분할해 일 년짜리 노트에 붙였고, 울음소리 파형은 실제 녹음으로 계산했습니다.

앱 · 오늘 뭐 먹지(가정식 레시피)

「가정식 레시피 앱을 만들어줘」

초 카운터 룰렛이 마침 뤼징런의 서적 디자인을 뽑아, 최종적으로 레시피북이 되었습니다. 요리 하나에 레시피 한 페이지, 재단선 옆에 방주 칼럼을 두어 「닦아야 튀지 않는다」「노추는 몇 방울만」을 적고, 주사(朱砂)는 「시작하기」 도장 하나에만 썼습니다. 외관 장부에서 최근 6개 납품 중 5개가 산세리프 제목임을 보고, 이 버전은 송체를 골랐습니다.

PPT · 《천리강산도》 강연
최고의 디자이너 Abbott Miller식 암전 진열장을 따랐고, 어두운 바탕은 비단 바탕에서 가장 어두운 곳의 색을 취했습니다. 표지 아래 가느다란 위치 막대가 바로 전체 두루마리 썸네일로, 이 페이지가 11.9미터 장권의 어느 구간인지 표시합니다.

PPT · 블랙홀 사진은 어떻게 찍히는가
현실 참조는 Jonathan Corum의 강연 슬라이드입니다. 검은 바탕, 사진이 주인공, 주석은 그림 위에 직접. 모든 페이지에 출처를 표기했고, 사실은 검증을 거친 뒤 페이지에 올렸습니다.

앱 · 그린 썸(3차 블라인드 선정에서 이긴 버전)
식물을 숨 쉬는 생명 징후로 읽습니다. 앱 프로토타입은 구도가 있는 전시 보드로 만들어, 여러 대의 폰을 어긋나게 배치했습니다.

웹 · 여거 기록(저자 본인의 프로젝트)
3년간의 모든 여행 사진 지도입니다. 가사이 카오루식 흰 종이 명조체 장권을 골라, 시작에 위성 지도 한 장으로 모든 여정을 엮고 아래로 여정 한 단락씩 이어집니다. 고른 뒤 저자가 무심코 「최대한 빠뜨리지 않게」라고 말하자, 그것을 경험에 기록했습니다. 개인 회상류 아카이브 사진은 빠짐없이, 그리고 사진 아카이브에만 적용되고 제품 인터페이스로 번지지 않는다고 명시했습니다.

📺 초보자 튜토리얼(화수 직접 녹화)
어떻게 쓰는지 모르겠다고요? 화수가 녹화한 huashu-design 입문 튜토리얼을 보세요:

👉 YouTube에서 전체 튜토리얼 보기

설치하면 바로 사용
npx skills add alchaincyf/huashu-design

설치 후 먼저 자가 점검: 이 skill은 SKILL.md 파일 하나가 아니라, references/, assets/, scripts/, demos/ 네 하위 디렉터리에 99곳에서 참조되는 레시피, 스크립트, 소재가 있어 하나도 빠져서는 안 됩니다. 설치 후 설치 디렉터리(예: ~/.claude/skills/huashu-design/)를 확인해, SKILL.md만 있고 그 하위 디렉터리가 없다면 skills CLI 버전이 너무 오래된 것입니다(≤1.5.15에 단일 파일만 동기화하는 버그가 있었고, 1.5.19에서 수정됨). 업그레이드 후 다시 설치하면 됩니다:

npm i -g skills@latest # 또는 npx skills@latest add alchaincyf/huashu-design
업그레이드 후에도 이상하면 git clone으로 대체 설치하세요. 저장소를 아무 skills 디렉터리에 클론하면 됩니다:

git clone https://github.com/alchaincyf/huashu-design.git ~ /.claude/skills/huashu-design

그런 다음 Claude Code / Codex / Cursor 등 skills를 지원하는 아무 에이전트에서 바로 말하면 됩니다:

「AI 심리학 강연 PPT를 만들어줘, 스타일 방향 3개를 추천해서 고르게 해줘」
「AI 뽀모도로 iOS 프로토타입을 만들어줘, 4개 핵심 화면이 실제로 클릭돼야 해」
「이 로직을 60초 애니메이션으로 만들어줘, MP4와 GIF로 내보내줘」
「이 디자인에 대해 5차원 리뷰를 해줘」

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

Star 추세

할 수 있는 것

능력
산출물
일반적 소요 시간

인터랙티브 프로토타입(App / Web)
단일 파일 HTML · 실제 iPhone bezel · 클릭 가능 · Playwright 검증
10–15 min

강연 슬라이드
HTML deck(브라우저 강연) + 편집 가능 PPTX(텍스트 상자 유지)
15–25 min

타임라인 애니메이션
MP4(25fps / 60fps 보간) + GIF(palette 최적화) + BGM
8–12 min

디자인 변형
3+ 나란히 비교 · Tweaks 실시간 조정 · 차원 간 탐색
10 min

인포그래픽 / 시각화
인쇄급 조판 · PDF/PNG/SVG 내보내기
10 min

샤오홍슈 이미지-텍스트 / 커버
3:4 한 세트 이미지(≤18장) · 8가지 패러다임 템플릿 · 장권 연속 슬라이드 · 한 명령으로 자르기 및 검진
10–15 min

디자인 방향 컨설턴트
세 가지 로직이 각각 두 후보 (최고의 디자이너 + 동일 매체 수상작 + 초 카운터 룰렛) · 여섯 장 썸네일에서 세 버전 실제 비주얼 선택, 나머지 세 장은 대안
10 min

5차원 전문가 리뷰
레이더 차트 + Keep/Fix/Quick Wins · 실행 가능한 수정 목록
3 min

Demo 갤러리
디자인 방향 컨설턴트
요구가 모호할 때의 fallback: 세 가지 상호 보완 로직이 각각 두 후보——최고의 디자이너(예산 무제한일 때 가장 적합한 디자이너) + 현실 참조(동일 매체의 수상작, 먼저 스크린샷으로 직접 확인) + 초 카운터 룰렛(스타일 라이브러리에서 무작위 추출, 관성 타파). 여섯 후보를 먼저 한 페이지 썸네일로 그리고, 가장 강하고 가장 다른 세 버전을 실제 비주얼로 만들어 보면서 고르게 하며, 나머지 세 장도 대안으로 함께 줍니다. 배경에는 92종 HTML 네이티브 스타일 라이브러리(웹 20 + PPT 20 + 인포그래픽 20 + App 12 + 중문·동아시아 12 + 샤오홍슈 8, 순수 CSS로 이미지 생성 불필요)가 있고, 각각 샘플이 한 장씩 있습니다.

움짤은 2.0 흐름(세 가지 로직이 바로 각각 한 버전)

3.0에서 신설된 두 구역, 각 칸이 한 장의 샘플(모두 순수 HTML/CSS, 소재와 숫자는 허구):

3.1에서 신설된 샤오홍슈 구역, 각 칸이 한 패러다임의 커버＋내지(장권은 세 장이 이어진 한 폭). 샘플은 한 번의 실제 게시에서 나왔고, 여덟 버전이 같은 노트를 다룹니다:

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

Motion Design 엔진
Stage + Sprite 타임 슬라이스 모델 · useTime / useSprite / interpolate / Easing 네 API로 모든 애니메이션 요구 커버 · 한 명령으로 MP4 / GIF / 60fps 보간 / BGM 포함 완성본 내보내기.

HTML Slides → 편집 가능 PPTX
HTML deck 브라우저 강연 · html2pptx.js가 DOM의 computedStyle을 읽어 요소별로 PowerPoint 객체로 번역 · 내보내는 것은 진짜 텍스트 상자로, PPT에서 더블클릭하면 편집 가능.

Tweaks · 실시간 변형 전환
배색 / 서체 / 정보 밀도 등 파라미터화 · 사이드 패널 전환 · 순수 프런트엔드 + localStorage 영속화 · 새로고침해도 유지.

인포그래픽 / 데이터 시각화
잡지급 조판 · CSS Grid 정밀 단 나누기 · text-wrap: pretty 조판 디테일 · 실제 데이터 기반 · PDF 벡터 / PNG 300dpi / SVG 내보내기.

5차원 전문가 리뷰
철학 일관성 · 시각 위계 · 디테일 실행 · 기능성 · 혁신성 각 0–10점 · 레이더 차트 시각화 · Keep / Fix / Quick Wins 목록 출력.

Junior Designer 워크플로
한 방에 큰 기술을 쓰지 않음: 먼저 assumptions + placeholders + reasoning을 쓰고, 최대한 빨리 보여준 뒤 반복. 잘못 이해했을 때 일찍 고치는 것이 늦게 고치는 것보다 100배 저렴.

브랜드 자산 프로토콜 5단계 강제 흐름
구체적 브랜드가 관련될 때 강제 실행: 묻기 → 검색 → 다운로드(세 가지 대안) → grep 색값 → brand-spec.md 작성.

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

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

「앵무새 진화사를 소개하는 웹사이트를 만들어줘」 한 마디, 추가 요구 제로로 skill이 2.0 컨설턴트 흐름을 자동으로 완주: 먼저 이미지가 내용상 필수인지 판단 → 퍼블릭 도메인 박물학 삽화(Edward Lear / John Gould의 앵무새 도록) 수집 → 세 가지 로직 병렬(초 카운터 룰렛 + 현실 참조 수상 사이트 + 하라 켄야의 「백」 철학)이 각각 한 버전 실제 비주얼. 소재가 다 모인 뒤 디자인, 디자인하면서 색 블록으로 자리 채우지 않음.

「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 포함 22초 cinematic demo 2개(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

각 cinematic은 기본으로 완전한 정적 workflow dashboard 표시(관객이 언제든 skill이 어떻게 도는지 볼 수 있음), ▶를 눌러야 애니메이션 트리거, 끝나면 자동으로 dashboard로 fade
huasheng.ai의 25초 hero 애니메이션 삽입(iframe 로컬화 대안)
실제 데이터: 14,495 stargazers 실제 곡선(gh API로 가져옴) + DeepSeek V4 실제 specs(WebSearch 검증)
실제 AI 소재: huashu-gpt-image로 4×2 grid 대형 이미지 생성, 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 patterns는 references/cinematic-patterns.md 참고.

핵심 메커니즘
브랜드 자산 프로토콜
skill에서 가장 강한 규칙 구간. 구체적 브랜드(Stripe, Linear, Anthropic, 자사 등)가 관련될 때 5단계 강제:

단계
동작
목적

1 · 묻기
사용자에게 brand guidelines가 있는가?
기존 자원 존중

2 · 공식 브랜드 페이지 검색
<brand>.com/brand · brand.<brand>.com · <brand>.com/press
권위 있는 색값 확보

3 · 자산 다운로드
SVG 파일 → 공식 사이트 HTML 전문 → 제품 스크린샷 색 추출
세 가지 대안, 앞의 것이 실패하면 즉시 다음으로

4 · grep으로 색값 추출
자산에서 모든 #xxxxxx 추출, 빈도순 정렬, 흑백 회색 필터링
절대 기억에서 브랜드 색을 추측하지 않음

5 · spec 고정
brand-spec.md + CSS 변수 작성, 모든 HTML이 var(--brand-*) 참조
고정하지 않으면 잊음

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

디자인 방향 컨설턴트(Fallback)
사용자 요구가 착수 불가능할 만큼 모호할 때 트리거(3.0 재작업):

먼저 대화로 명확화 + 적극적으로 참조 요청(이름 / 로고 / 브랜드 색 / 좋아하는 참조 사이트), 한 라운드만 질문
내용상 필수인 실제 이미지 확보(퍼블릭 도메인 / 로열티 프리, 스크립트 한 번으로 수집), 그 뒤 착수
세 가지 로직이 각각 두 후보, 총 여섯: ① 최고의 디자이너(기질이 다른 두 디자이너, 그들의 사고로 처음부터) ② 현실 참조(동일 매체의 수상작 두 점——앱이면 앱, deck이면 출판물; scripts/ref_board.py가 먼저 스크린샷으로 직접 확인한 뒤 그리드, 글자 크기 비율, 색 비율을 분해) ③ 초 카운터 룰렛(date +%S로 초를 취해 산출 형태에 해당하는 구역과 중문·동아시아 구역에서 각각 한 번호 추출, 먼저 샘플을 보고 착수)
여섯 장 썸네일 → 세 버전을 완성稿으로: 단독으로 봐도 충분히 좋고, 서로 다르고, 최근 프로젝트와 겹치지 않음; 선택되지 않은 세 장도 대안으로 함께 줌, 마음에 드는 것이 있으면 그것으로 제작
비주얼을 보지 않고 스타일을 블라인드 선택하게 하지 않음——펼쳐 놓고 멈추고, 보면서 고르게 함
바탕은 92종 HTML 네이티브 스타일 라이브러리, 각각 샘플과 소스 코드(assets/style-specimens/) 포함, 탄약이지 교조가 아님

왜 이렇게 하는가: 고정 문제로 개편 전후 세 차례 블라인드 선정(내부 테스트)을 했습니다. 1차는 매 버전에 큰 은유를 강제해 페이지가 소품이 되어, 4문제 중 1문제만 승리; 2차는 AI 기본 외관을 피하려 금지령을 잔뜩 넣어 세 버전이 함께 「너무 정돈되고 너무 지루해」져, 2문제 전패; 3차는 금지령 대신 옵션 추가——후보를 늘리고, 눈에 보이는 샘플을 주고, 실제 참조를 보게——같은 두 문제 모두 승리.

쓸수록 당신을 이해: 경험, 외관 장부, 디자인 검진

경험: scripts/learn.py가 착수 전에 당신이 말한 취향 원문(「너무 밋밋해」「A의 구조에 C의 색」)과 과거의 교훈을 꺼내고, 마무리 시 기록할 만한 것을 기록; 기록 전에 알려주고, 원하지 않으면 거절 가능
외관 장부: 매 납품마다 「어떻게 생겼는지」(바탕색, 색 팔레트, 서체, 레이아웃 골격, 프로젝트명과 경로 포함)를 기록해, 다음 프로젝트에서 적극적으로 피함——단일 프로젝트는 다 좋아 보이지만 모아 놓으면 비슷하게 생기는 단조로움을 이것으로 관리
디자인 검진: scripts/design_lint.py는 검증 가능한 사실만 측정——이미지 깨짐, 읽을 수 없을 만큼 작은 글자, 부족한 대비, 콘솔 오류는 빨간불; 전부 대문자 소标签, 「A · B · C」 같은 손쉬운 템플릿 장식은 노란불; 세 버전이 껍데기만 바꾼 것인지, 최근 프로젝트와 겹쳤는지는 compare와 ledger check로 확인. 예쁜지는 당신이 판단, 그것은 점수를 매기지 않음
이 기록은 본인 컴퓨터의 ~/.huashu-design/에만 저장되고, skill과 함께 배포되지 않으며, 폴더를 삭제하면 전부 잊음

Junior Designer 워크플로
기본 작업 모드, 모든 과제에 관통:

착수 전 질문 목록을 한 번에 사용자에게 보내고, 일괄 답변을 기다린 뒤 착수
HTML에 먼저 assumptions + placeholders + reasoning comments 작성
최대한 빨리 사용자에게 보여줌(회색 사각형이라도)
실제 내용 채우기 → variations → Tweaks 세 단계에서 각각 다시 한 번 보여줌
납품 전 Playwright로 브라우저를 눈으로 한 번 훑음

반 AI slop 규칙
한눈에 AI인 비주얼 최대공약수를 피함: 보라 그라데이션, emoji 아이콘, 둥근 모서리+왼쪽 border accent, SVG로 그린 얼굴, Inter를 display로, 그리고 2026년의 신세대 템플릿 장식(모든 제목 위 한 줄 전부 대문자 소标签, 「A · B · C」 중점 연결, 버튼 꼬리의 「→」, 제목에 한 단어만 색 바꾸기). 데이터, 평가, 로고 월을 조작하지 않음.

따뜻한 종이 세리프, 어두운 바탕 단일 포인트 같은 「외관 패밀리」는 금지령에 없음: 블라인드 선정에서 사용자가 인정한 몇 버전에 마침 이 두 부류가 있었음. 진짜로 피해야 할 것은 세 버전이 같은 패밀리에 몰리고 모든 프로젝트가 똑같이 생기는 것——그것은 외관 장부에 맡김.

Claude Design과의 관계
솔직히 인정합니다: 브랜드 자산 프로토콜의 철학은 Claude Design에서 유포된 프롬프트에서 배운 것입니다. 그 프롬프트는 좋은 하이파이 디자인은 백지에서 시작하는 것이 아니라 이미 있는 디자인 컨텍스트에서 자라나는 것이라고 거듭 강조합니다. 이 원칙이 65점 작품과 90점 작품의 분수령입니다.

포지셔닝 차이:

Claude Design
huashu-design

형태
웹 제품(브라우저에서 사용)
skill(Claude Code에서 사용)

쿼터
구독 quota
API 소비 · 병렬 agent 실행은 quota 제한 없음

산출물
캔버스 내 + Figma 내보내기
HTML / MP4 / GIF / 편집 가능 PPTX / PDF

조작 방식
GUI(클릭, 드래그, 수정)
대화(말하기, agent가 끝내기를 기다림)

복잡한 애니메이션
제한적
Stage + Sprite 타임라인 · 60fps 내보내기

크로스 에이전트
Claude.ai 전용
모든 skill 호환 agent

Claude Design은 더 나은 그래픽 도구, huashu-design은 그래픽 도구라는 층을 사라지게 함. 두 갈래 길, 다른 사용자.

보안과 데이터 흐름
핵심 경로(디자인→렌더링→MP4/PDF/PPTX 내보내기)는 100% 로컬 실행, 네트워크 제로, key 제로. 클라우드 기능(도우바오 TTS 더빙, AI 영상 리뷰)은 전부 scripts/cloud/에 격리되어 완전 선택 사항: 본인 key 사용, 해당 벤더 공식 API로만 전송, 첫 호출 시 --yes 명시적 확인 필요. 텔레메트리 없음, 저자 서버로 전송되는 데이터 없음. 3.0에서 신설된 본机 기록(취향 경험, 외관 장부)은 ~/.huashu-design/에만 쓰이고 절대 업로드되지 않음; 참조 보드는 agent에게 참조 작품 스크린샷을 요청할 때만 그 URL에 접속. 모든 아웃바운드 도메인, 키 처리, 삭제 경계의 망라적 선언은 SECURITY.md 참고, 당신의 agent로 코드를 대조해 항목별 검증 환영.

Limitations

레이어 단위 편집 가능한 PPTX에서 Figma로는 지원하지 않음. HTML을 산출해 스크린샷, 화면 녹화, 이미지 내보내기는 가능하지만 Keynote로 끌어와 텍스트 위치를 수정할 수는 없음.
Framer Motion급 복잡한 애니메이션은 불가. 3D, 물리 시뮬레이션, 파티클 시스템은 skill 경계를 벗어남.
완전히 백지인 브랜드를 처음부터 디자인하면 품질이 60–65점으로 떨어짐. 무에서 hi-fi를 그리는 것은 원래 last resort.

이것은 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 bezel
│ ├── android_frame.jsx
│ ├── macos_window.jsx
│ ├── browser_window.jsx
│ ├── deck_stage.js # HTML 슬라이드 엔진
│ ├── deck_index.html # 다중 파일 deck 조합기
│ ├── design_canvas.jsx # 나란히 변형 전시
│ ├── showcases/ # 24개 사전 제작 샘플(8 시나리오 × 3 스타일)
│ ├── style-specimens/ # 92종 스타일 샘플(html 소스 + jpg)과 구역 개요; xhs/의 샘플은 동시에 템플릿
│ └── bgm-*.mp3 # 6곡 시나리오별 배경음악
├── references/ # 과제별 심화 읽기 하위 문서
│ ├── animation-pitfalls.md
│ ├── directions.md # 세 방향: 여섯 후보 → 썸네일 → 세 버전 선택
│ ├── design-styles.md # 92종 HTML 네이티브 스타일 라이브러리(웹 20 + PPT 20 + 인포그래픽 20 + App 12 + 중문·동아시아 12 + 샤오홍슈 8)
│ ├── modules/ # 웹 / deck / 인포그래픽 / 샤오홍슈 / 애니메이션 다섯 모듈 매뉴얼
│ ├── slide-decks.md
│ ├── editable-pptx.md
│ ├── critique-guide.md
│ ├── video-export.md
│ └── ...
├── scripts/ # 내보내기 툴체인
│ ├── render-video.js # HTML → MP4
│ ├── xhs_render.py # 샤오홍슈 이미지-텍스트 → 3:4 완성 이미지 + 검진
│ ├── convert-formats.sh # MP4 → 60fps + GIF
│ ├── add-music.sh # MP4 + BGM
│ ├── export_deck_pdf.mjs
│ ├── export_deck_pptx.mjs
│ ├── html2pptx.js
│ ├── design_lint.py # 디자인 검진, 세 버전 색·골격 충돌, 외관 장부
│ ├── learn.py # 취향 경험 읽기/쓰기
│ ├── ref_board.py # 참조 작품을 참조 보드로 캡처
│ ├── capabilities.py # 본机 능력 탐지(이미지 생성, 형제 skill, Node, ffmpeg)
│ └── 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의 프롬프트를 명확하게 써준 것에 감사합니다. 다른 제품의 영감에 기반한 이런 이차 창작은 AI 시대 오픈소스 문화의 새로운 형태입니다.

huashu-design으로 만든 제품
FanBox · Coding Agent의 조종석의 세 가지 인터페이스 스킨은 huashu-design으로 디자인했습니다. Claude Code / Codex를 지휘해 일을 시키고, 그것이 건드린 모든 파일, 모든 줄의 변경을 명확히 봅니다.

커뮤니티 번역 버전
커뮤니티가 유지하는