<sub style='display: block;'>🌐 <b style='color: #007bff'>중국어</b> · <a href="README.en.md">English</a></sub>
<div align="center">
Huashu Design
「打字。回车。一份能交付的设计。」
"Type. Hit enter. A finished design lands in your lap."
License
Agent-Agnostic
Skills
<br>
에이전트에서 한 문장을 입력하고, 결과물로 제출 가능한 디자인을 받으세요.
<br>
3분에서 30분 사이에 제품 출시 애니메이션, 클릭 가능한 앱 프로토타입, 편집 가능한 PPT 세트, 인쇄용 정보 그래픽 등**을 제작할 수 있습니다.
단순히 'AI가 만든 것 같음' 수준이 아닙니다. 마치 대형 디자인 팀이 작업한 것처럼 보입니다. 브랜드 자산(로고, 색상 팔레트, UI 스크린샷)을 skill에 제공하면, 그것은 당신의 브랜드 분위기를 읽어냅니다. 아무것도 제공하지 않아도, 6장의 썸네일에서 선별된 3가지 실제 방향 + 샘플이 포함된 84가지 스타일 라이브러리가 AI 결과물 수준 이하로 떨어지지 않도록 보장합니다.
이 README에 있는 모든 페이지 디자인은 huashu-design이 직접 만든 것입니다. Figma도, After Effects도 아닙니다. 그저 한 문장의 프롬프트와 skill의 실행만으로 가능했습니다. 다음에 제품 출시를 위한 홍보 영상을 만들고 싶다면? 이제 당신도 할 수 있습니다.
npx skills add alchaincyf/huashu-design
에이전트 간 범용적 사용이 가능합니다 — Claude Code, Cursor, Codex, OpenClaw, Hermes 모두에서 사용할 수 있습니다.
📣 MIT 라이선스로 변경되었습니다. 2026년 5월 14일부터 본 skill은 완전히 오픈 소스(MIT License)가 되어 개인 및 상업적 용도 모두 무료이며, 사전 승인이 필요 없습니다. 기존의 '개인 사용 무료, 기업 상용화 시 승인 필요' 조항은 폐지되었습니다.(변경 사항 확인)
🆕 3.0 버전: 세 가지 방향이 더 대담해지고, 프로젝트 간 통일성이 사라졌습니다. 먼저 6장의 썸네일을 보여준 후 3가지 버전을 최종본으로 만들 수 있습니다. 스타일 라이브러리는 84가지로 확장되었고(App, 중국어 및 동아시아 두 섹션 추가), 각 스타일마다 샘플이 제공됩니다. 레퍼런스 작품은 스크린샷을 찍은 후 작업을 시작할 수 있으며, 사실만을 측정하는 디자인 건강 검진과 당신이 어떤 종류의 결과물을 만들어왔는지 기억하는 외관 장부도 포함되었습니다.핵심 메커니즘 보기
결과물 확인하기 · 설치하기 · 무엇을 할 수 있나요? · 핵심 메커니즘 · Claude Design과의 관계
</div >
<p align="center">
<img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/launch-3.0.gif" alt="huashu-design 3.0 출시 영상" width="100%">
</p>
<p align="center"><sub style='font-size: small;'>
▲ 3.0 출시 영상 · 32초 · 영상 속 모든 페이지 디자인은 3.0이 직접 제작했으며, 편집에는 <a href="https://github.com/alchaincyf/huashu-motion">huashu-motion</a>을 사용했습니다.<br>
👉 <a href="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/launch-3.0.mp4">MP4 다운로드 (1080p · 배경음악 포함 · 24MB)</a> ·
<a href="https://www.huasheng.ai/huashu-design-hero/">2.0 버전 사운드 효과 HTML 인터랙티브 버전</a>
</sub></p>
3.0 사례
아래의 결과물들은 모두 3.0을 통해 생성되었습니다. 처음 다섯 개는 출시 당시 새롭게 추가된 6가지 질문 중 선택된 것이며, 각 요청에 단 한 문장의 요구 사항만 주어졌고 방향은 agent가 직접 선정한 것입니다. 다음 두 개는 세 번째 라운드 블라인드 투표에서 우승한 버전과, 출시 후 작가가 실제로 사용해 본 프로젝트입니다.
웹페이지 · 《후가쿠 삼십육경》 온라인 전시회
「카쓰시카 호쿠사이의 《후가쿠 삼십육경》을 위한 온라인 전시회 웹사이트를 만들어 주세요.」
세 가지 버전은 각각 리츠뮤지엄(Rijksmuseum) 공식 웹사이트 스타일의 암전형 전시장, 다나카 잇코(田中一光) 스타일의 삼각형 창문, 민국 시대 서예 작품 스타일의 제목 틀입니다. 디자인 건강 검진에서는 충돌 지점을 발견하여 두 버전 모두 첫 화면에 《가나가와 해변의 거대한 파도 아래》를 사용했었는데, 이를 암전형 버전은 《산아하 하쿠우(山下白雨)》로 변경했습니다.
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-hokusai-hero.jpg" width="100%" alt="후가쿠 삼십육경 온라인 전시 첫 화면: 암전 배경의 《산하백우》"></p>
다음 장에서는 프러시안 블루(Prussian blue)에 대해 다루는데, 이는 메트로폴리탄 미술관의 분광학적 연구를 기반으로 합니다. 총 46점 모두 시카고 아티 뮤지엄과 메트로폴리탄의 공개 소장품에서 가져왔습니다.
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-hokusai-prussian-blue.jpg" width="100%" alt="수입된 파란색: 프러시안 블루 챕터"></p>
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-hokusai-all-46.jpg" width="60%" alt="총 46점 작품 벽면"></p>
앱 · 명적(새 관찰 기록)
"조류 관찰 기록 앱 프로토타입 만들기"
현실 참고 자료로는 2025년 애플 디자인 어워드 수상작인 CapWords를 찾았습니다. ref_board.py가 먼저 이를 레퍼런스 보드로 자르고, 에이전트(agent)가 직접 보고 나서 작업했습니다. 차용한 컨셉은 '사진에서 스티커 한 장 떼어내기'입니다: 각 새는 위키미디어(Wikimedia)의 실제 사진에서 분할되어 1년짜리 노트에 붙여지고, 울음소리 파형은 실제 녹음을 기반으로 계산되었습니다.
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-mingji-birding-app.jpg" width="75%" alt="명적: 새 소리를 듣고 스티커 한 장 떼어내기"></p>
앱 · 오늘 저녁 뭐 먹지(가정식 레시피)
"가정식 요리 레시피 앱 만들기"
초 단위 룰렛에서 우경인(吕敬人)의 서적 디자인이 나왔고, 최종적으로 레시피 북으로 제작되었습니다: 요리 하나당 한 페이지 분량의 조리법이며, 재료 옆에 주석 공간을 남겨 '닦은 후 지져야 기름이 튀지 않는다', '진간장(老抽)은 몇 방울만'과 같은 설명을 적었습니다. 주사(朱砂)는 오직 '시작하기'라는 도장을 찍어주었습니다. 외관 장부(外观账本)를 보니 최근 6개 납품 건 중 5개가 산세리프 제목이었기에, 이번 버전에서는 송체(宋体)를 선택했습니다.
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-recipe-app.jpg" width="75%" alt="오늘 저녁 뭐 먹지: 요리 하나당 한 페이지 조리법"></p>
PPT · '천리강산도' 강연
최고의 디자이너인 Abbott Miller 스타일의 암전 전시 케이스를 사용했으며, 어두운 배경은 비단(绢地)의 가장 어두운 부분에서 색을 추출했습니다. 표지 아래의 길쭉한 위치 바는 전체 두루마리의 축소판이며, 이 페이지가 11.9미터 길이의 두루마리 중 어느 부분을 차지하는지 보여줍니다.
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-qianli-cover.jpg" width="100%" alt="천리강산도 강연 표지"></p>
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-qianli-pages.jpg" width="100%" alt="얼마나 큰 그림인가, 희맹년 18세, 작은 콩알만 함, 색은 돌에서 가져옴"></p>
PPT · 블랙홀 사진은 어떻게 찍혔을까
현실 참고 자료는 Jonathan Corum의 강연 슬라이드였습니다: 검은 배경, 사진이 주인공, 주석을 그림 위에 직접 작성했습니다. 매 페이지마다 출처를 표기했으며, 사실 확인(fact check)을 거친 후에야 페이지에 올렸습니다.
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-blackhole-pages.jpg" width="100%" alt="블랙홀 과학 강연 PPT 4페이지"></p>
앱 · 녹색 엄지손가락(3차 블라인드 선정 우승 버전)
식물을 숨 쉬는 생체 신호처럼 읽어냅니다. 앱 프로토타입은 구도가 잡힌 전시판으로 제작되었고, 여러 대의 휴대폰이 무작위로 배치되어 있습니다.
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-plant-health-app.jpg" width="75%" alt="녹색 엄지: 식물을 숨 쉬는 생체 신호처럼 읽기"></p>
웹페이지 · 여행 기록 아카이브 (작가의 개인 프로젝트)
3년 동안의 모든 여행 사진을 담은 지도입니다. 게서쉬훈(葛西薰) 스타일의 백지 명조체 장권으로 선택했으며, 시작 부분에 위성 지도가 모든 여정을 연결하고, 아래로 내려가면 한 에피소드씩 별도의 장(章)이 구성되어 있습니다. 작가가 "누락되는 것 없이 최대한 기록해 달라"고 말하자, 시스템은 이를 경험치로 기억했습니다: 개인 회상 아카이브 사진은 전체를 담아야 하며, 이는 오직 사진 아카이브에만 적용되고 제품 인터페이스에는 넘쳐나지 않도록 명시합니다.
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-travel-archive.jpg" width="100%" alt="여행 기록 아카이브"></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"><sub style="font-size: 1em;">👉 <a href="https://www.youtube.com/watch?v=m-_BlUdcIvw">YouTube에서 전체 튜토리얼 보기</a></sub></p>
설치하면 바로 사용 가능
npx skills add alchaincyf/huashu-design
설치 후 자가 점검: 이 스킬은 SKILL.md 파일 하나만 있는 것이 아닙니다. references/, assets/, scripts/, demos/ 네 개의 하위 디렉토리에 99개의 레퍼런스, 스크립트, 소재가 사용되고 있으며, 어느 것도 빠질 수 없습니다. 설치 후 설치 디렉토리(예: ~/.claude/skills/huashu-design/)를 확인했을 때 SKILL.md만 있고 위 하위 디렉토리가 없다면, 당신의 skills CLI 버전이 너무 오래되었기 때문입니다 (≤1.5.15 버전에는 단일 파일 동기화 버그가 있었으며, 1.5.19에서 수정됨). 업그레이드한 후 다시 설치하면 됩니다:
업그레이드 후에도 문제가 발생한다면, git clone을 사용하여 임시로 설치하는 것이 좋습니다. 저장소를 원하는 skills 디렉토리에 클론하세요:
git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design
그런 다음 Claude Code / Codex / Cursor 등 스킬을 지원하는 모든 에이전트에서 직접 말하세요:
"AI 심리학 발표 PPT를 만들어주고, 제가 선택할 수 있는 스타일 방향 3가지를 추천해줘"
"AI 포모도로 타이머 iOS 프로토타입을 만들고, 핵심 화면 4개는 실제로 클릭 가능하게 해줘"
"이 로직을 60초 애니메이션으로 만들고, MP4와 GIF로 내보내줘"
...
버튼도 없고, 패널도 없고, Figma 플러그인도 없습니다.
스타 트렌드
<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>
무엇을 할 수 있나요
| 능력 | 결과물 | 일반 소요 시간 |
|---|
| 인터랙티브 프로토타입 (앱/웹) | 단일 파일 HTML · 실제 아이폰 베젤 · 클릭 가능 · Playwright 검증 | 10–15 min |
| ... | | |
데모 갤러리
디자인 방향 컨설턴트
요구사항이 모호할 때의 폴백(fallback): 세 가지 상호 보완적 로직에서 각각 두 개의 후보를 제시합니다. — 최적의 디자이너 (예산 제한이 없을 때 가장 적합한 디자이너) + 현실 참고 자료 (동일 매체의 수상작, 먼저 스크린샷으로 직접 확인) + 초 단위 룰렛 (스타일 라이브러리에서 무작위 추출하여 관성 타파). 여섯 개의 후보를 한 페이지의 축소판으로 그린 후, 가장 강력하고 독특한 세 가지 버전을 실제 비주얼로 보여주어 선택하게 하며, 나머지 세 장은 예비 옵션으로 함께 제공합니다. 배경에는 84가지 HTML 네이티브 스타일 라이브러리가 있습니다 (웹 20 + PPT 20 + 인포그래픽 20 + 앱 12 + 중국어 및 동아시아 12, 순수 CSS로 이미지 생성 불필요). 각 유형별로 샘플 이미지가 제공됩니다.
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w3-fallback-advisor.gif" width="100%"></p>
<p align="center"><sub style="font-size: smaller;">애니메이션은 2.0 프로세스(세 가지 로직이 각각 한 버전씩 제시)입니다.</sub></p>
3.0에서 새로 추가된 두 개의 섹션/영역이며, 각 칸마다 샘플 이미지가 있습니다 (모두 순수 HTML/CSS, 주제 및 숫자는 가상).:
<p align="center"><img src="https://raw.githubusercontent.com/alchaincyf/huashu-design/HEAD/assets/style-specimens/sheet-east.jpg" width="100%" alt="중국어 및 동아시아 디자인 12가지: 여경인 도서 디자인, 송나라 목판본 레이아웃, 민국 책가, 상하이 모던, 중국 실험 서체, 홍콩 거리 간판, 전통 색절기, 사기포강평, 다나카잇코, 하트부카츠네, 사토카시와, 일식 잡지 밀집 배열"></p>
<p align="center"><img src="https://raw.githubusercontent.com/alchaincyf/huashu-design/HEAD/assets/style-specimens/sheet-app.jpg" width="100%" alt="앱 스타일 12가지: 하드웨어 패널, 액체 유리, 재미있는 3D, 친화적 금융, 전문가용 카메라, 아웃도어 지형, 콘텐츠 폭포수 흐름, 명령 패널, 건강 데이터, 네이티브 정제, 부드러운 격려, 에디터식 읽기"></p>
iOS 앱 프로토타입
iPhone 15 Pro의 정확한 기기 본체(다이내믹 아일랜드 / 상태 표시줄 / 홈 인디케이터) · 상태 기반 다중 화면 전환 · 위키미디어/메트(Met)/언스플래시에서 가져온 실제 이미지 사용 · Playwright 자동 클릭 테스트.
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c1-ios-prototype.gif" width="100%"></p>
모션 디자인 엔진
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 슬라이드 → 편집 가능한 PPTX
HTML 데크 브라우저 발표 · 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) · 실시간 변형 전환
색상 구성(Color Scheme) / 서체(Typography) / 정보 밀도 등 파라미터화 · 사이드 패널 전환 · 순수 프론트엔드 + 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 인쇄 디테일 · 실제 데이터 기반 구동(Data-driven) · 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차원 전문가 리뷰 (5D Expert Review)
철학적 일관성, 시각적 계층 구조, 디테일 구현, 기능성, 혁신성 각각 0–10점 · 레이더 차트(Radar Chart) 시각화 · 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 Workflow)
깊이 파고들어 큰 작업을 하기보다: 먼저 가설(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단계 강제 프로세스 (5-Step Hard Process)
특정 브랜드를 다룰 때 강제 실행: 질문(Ask) → 검색(Search) → 다운로드 (세 가지 백업 경로) → 색상 값 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>
쇼케이스 · 2.0 버전 실제 사례
앵무새 진화사 웹사이트 · 디자인 방향 컨설팅 세 가지 로직 실전 (2.0)
Live demo · https://www.huasheng.ai/parrots/
"앵무새 진화사 웹사이트를 만들어줘"라는 한 문장, 추가 요구사항 없이 skill이 자동으로 완전한 2.0 컨설턴트 프로세스를 실행: 먼저 이미지가 콘텐츠 필수 여부를 판단 → 공공 영역 박물학 삽화(Edward Lear / John Gould의 앵무새 도감) 수집 → 세 가지 로직 병렬 처리 (초 단위 휠 + 현실 참조 수상작 + 요시하라 겐야의 '백' 철학) 각각 실제 비주얼을 출력. 소재가 모두 모인 후에 디자인하고, 디자인하면서 색상 블록으로 임시 대체하는 것이 아니다.
"skill에 대해 이야기하기" · PM 애프터파티 발표 자료 (Presentation Deck)
Live demo · https://skill-huasheng.vercel.app
13페이지 HTML deck, 모두 huashu-design으로 완성:
- 검은 배경 미니멀리스트 세리프 비주얼 시스템 (커버 / 소개 / 후크 / 무엇 / 왜 / 마무리)
- 배경음악(BGM)과 음향 효과(SFX)가 포함된 2개의 22초 시네마틱 데모 (Nuwa 스킬 워크플로우 + Darwin 스킬 워크플로우). 각각 완전히 독립적인 비주얼 언어를 사용함:
- Nuwa: 3D 지식 오빗(orbit) + 펜타곤 정제(Pentagon refinement) + SKILL.md 타자기 효과(typewriter) + "21분" 히어로 공개
- Darwin: 자동 검색 루프 스핀(autoresearch loop spin) + v1/v5 병렬 비교 차이점(diff) + 힐 클라임 전면 곡선(Hill-Climb full-screen curve) + 래칫 기어 잠금(Ratchet gear lock)
- 각 시네마틱은 기본적으로 완전한 정적 워크플로우 대시보드를 표시함 (관객이 스킬 작동 방식을 언제든 볼 수 있음). 재생 버튼(▶)을 눌러야 애니메이션이 트리거되며, 완료되면 자동으로 대시보드로 페이드 아웃됨.
- huasheng.ai의 25초 히어로 애니메이션 임베드 (iframe 로컬화 백업)
- 실제 데이터: 14,495명의 스타게이저(stargazer) 실제 곡선 (gh API로 가져옴) + DeepSeek V4 실제 사양 (WebSearch 검증)
- 실제 AI 소재:
huashu-gpt-image를 사용하여 4x2 그리드 대형 이미지를 생성하고, extract_grid.py로 8장의 독립적인 투명 PNG를 추출하여 3D 오빗 부유 효과 적용
참고하기 좋은 페이지:
/slides/slide-04b-nuwa-flow.html · 정적 대시보드 + 시네마틱 오버레이 이중 구조
/slides/slide-06b-darwin-flow.html · 완전히 독립적인 비주얼 언어의 비교 사례
/slides/slide-03b-deepseek-cover.html · AI 슬롭(slop) 대 실제 디자이너 시점 비교 페이지
상세한 시네마틱 패턴은 references/cinematic-patterns.md 참조.
핵심 메커니즘
브랜드 자산 프로토콜
스킬(skill) 내에서 가장 강력한 규칙. 특정 브랜드(Stripe, Linear, Anthropic, 자체 회사 등)가 관련될 경우 강제 실행하는 5단계:
| 단계 | 동작 | 목적 |
|---|
| 1 · 질문 | 사용자에게 브랜드 가이드라인이 있나요? | 기존 자원 존중 |
| ... | (내용 없음) | (내용 없음) |
| A/B 테스트 (v1 대 v2, 각각 6개 에이전트 실행): v2의 안정성 분산(variance)이 v1보다 5배 낮음. 안정성의 안정성, 이것이 스킬의 진정한 해자이다. | | |
디자인 방향 컨설턴트 (폴백/Fallback)
사용자의 요구사항이 모호하여 시작할 수 없을 때 트리거됨 (3.0 재작업):
- 먼저 대화를 통해 명확히 하고 + 참고 자료를 능동적으로 요청함 (이름 / 로고 / 브랜드 색상 / 선호하는 레퍼런스 사이트). 단 한 번만 질문함.
- 내용에 필수적인 실제 이미지(공유 영역 / 저작권 프리)를 준비한 후 작업을 시작함 (스크립트로 원클릭 캡처).
- 세 가지 로직에서 각각 두 개의 후보, 총 여섯 개: ① 최고의 디자이너 (분위기가 다른 두 명의 디자이너가 그들의 사고방식으로 처음부터 작업) ② 현실 레퍼런스 (동일 매체의 수상작 2점 — 앱 제작 시 앱을 찾고, 데크(deck) 제작 시 출판물을 찾음;
scripts/ref_board.py로 먼저 스크린샷하여 눈으로 보고, 그 다음 그리드 분할, 글자 크기 비율 및 색상 비율 분석) ③ 초 단위 룰렛 (date +%S로 초를 가져와, 결과물 형태에 해당하는 구역과 중국 동아시아 구역에서 각각 하나씩 뽑음. 먼저 샘플을 보고 작업함).
- 6장의 축소판 → 3가지 버전을 선택하여 완성본 제작: 단독으로 보기 좋고, 서로 다르며, 사용자의 최근 프로젝트와 충돌하지 않음. 선택되지 않은 세 장을 예비 옵션으로 함께 제공하며, 마음에 드는 것을 골라 작업함.
- 시각 자료를 보지 못한 상태에서 스타일을 무작위로 선택하게 하지 않음 — 보여주고 멈춤, 보고 고름.
- 기반에는 84가지의 HTML 네이티브 스타일 라이브러리가 있으며, 각 스타일에 샘플 이미지와 소스 코드를 제공함 (
assets/style-specimens/). 이는 교리가 아니라 탄약임.
이렇게 하는 이유: 우리는 고정된 주제로 세 차례의 변경 전/후 블라인드 테스트(내부 테스트)를 진행함. 1차는 각 버전에 거대한 은유(metaphor)를 강제 적용하여 페이지가 소품처럼 만들어졌고, 4문제 중 1개만 성공했음; 2차는 AI 기본 외관을 피하기 위해 수많은 금지 규칙을 추가했고, 세 버전 모두 "너무 정돈되고 지루하게" 되어 2문제 모두 실패함; 3차는 옵션을 추가하고 금지 규칙은 제거 — 후보를 늘리고 눈에 보이는 샘플을 제공하며 실제 레퍼런스를 보여주자 — 두 문제 모두 성공했음.
사용할수록 당신을 더 잘 이해함: 경험, 외관 장부 및 디자인 진단
- 경험:
scripts/learn.py 작업을 시작하기 전에 언급했던 취향에 대한 원문 피드백(예: "너무 평범하다", "A의 구조에 C의 색상을 더하라")과 과거의 교훈을 가져오고, 작업이 끝날 때 기억할 만한 것을 기록합니다. 기록하기 전에 알려줄 것이며, 기록하고 싶지 않으면 거절해도 됩니다.
- 외관 장부(Appearance Ledger): 프로젝트를 전달할 때마다 "어떤 모습이었는지"(배경색, 색상 팔레트, 글꼴, 레이아웃 구조, 프로젝트 이름 및 위치 경로 포함) 한 항목을 기록하고, 다음 프로젝트에서는 이를 의도적으로 피합니다. 개별 프로젝트만 봐도 괜찮지만, 모아놓으면 비슷하게 보이는 이런 단조로움은 이 장부가 관리해 줍니다.
- 디자인 진단(Design Health Check):
scripts/design_lint.py는 오직 검증 가능한 사실만을 측정합니다. 이미지가 깨졌는지, 글자가 너무 작아서 읽을 수 없는지, 대비가 충분한지, 콘솔에 오류가 빨간색으로 표시되는지는 '빨간불'입니다. 모든 대문자로 된 작은 라벨이나 "A · B · C"와 같은 편리한 템플릿 장식은 '노란불'입니다. 세 번째 버전이 단순히 포장만 바꾼 것인지, 최근 프로젝트와 충돌하는지 여부는 compare와 ledger check로 확인합니다. 보기 좋은지는 본인이 판단할 영역이며, 이 도구는 점수를 매기지 않습니다.
- 이러한 기록은 오직 사용자의 로컬 디렉터리인
~/.huashu-design/에만 존재하며, skill을 배포해도 함께 전송되지 않으므로 폴더를 삭제하면 모든 것을 잊게 됩니다.
주니어 디자이너 워크플로우
모든 작업에 걸쳐 기본으로 적용되는 모드입니다:
- 작업을 시작하기 전에 문제 목록(problem list)을 사용자에게 한 번에 보여주고, 일괄적으로 답변을 받은 후에 착수합니다.
- HTML 내부에는 먼저 가정(assumptions) + 플레이스홀더(placeholders) + 추론 주석(reasoning comments)을 작성합니다.
- 가능한 한 빨리 사용자에게 보여줍니다 (회색 상자일지라도).
- 실제 콘텐츠 채우기 → 변형(variations) → 수정(tweaks)의 세 단계를 각각 다시 한번 보여줍니다.
- 전달하기 전에 Playwright를 사용하여 브라우저에서 육안으로 검토합니다.
Anti-AI 슬롭 규칙 (Anti AI Slop Rules)
한눈에 AI가 만든 듯 보이는 시각적 공통분모를 피해야 합니다: 보라색 그라데이션, 이모지 아이콘, 모서리 둥글림 + 왼쪽 테두리 강조(left border accent), SVG로 그린 얼굴 그림, Inter를 display 용도로 사용하는 것, 그리고 2026년의 차세대 템플릿 장식(제목 위에 한 줄 전체 대문자 작은 라벨, "A · B · C"와 같은 중간 연결점, 버튼 끝의 "→", 제목에 단어 하나만 색상을 변경하는 방식)을 피해야 합니다. 데이터를 꾸며내거나 평가를 추가하고 로고 벽을 만들지 않습니다.
따뜻한 종이 느낌의 밑줄(warm paper lining), 어두운 배경의 점 간격 강조 같은 '외관 계열'은 금지 목록에 없습니다: 무작위 선택 과정에서 사용자가 인정한 몇 가지 버전이 바로 이런 유형입니다. 진정으로 피해야 할 것은 세 번째 버전이 같은 계열 안에 갇히거나, 모든 프로젝트가 똑같이 보이는 것입니다—그것은 외관 장부가 담당합니다.
Claude Design과의 관계
저는 대담하게 인정합니다: 브랜드 자산 프로토콜(brand asset protocol)의 철학은 Claude Design에서 유출된 프롬프트로부터 배운 것입니다. 그 프롬프트는 좋은 고화질 디자인은 백지에서 시작하는 것이 아니라, 이미 존재하는 디자인 컨텍스트로부터 길어 나온다는 점을 반복적으로 강조합니다. 이 원칙이 65점짜리 작품과 90점짜리 작품의 경계선입니다.
위치 차이: