alchaincyf/huashu-design

Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic

huashu-design이란?

Claude 호환 스킬로, AI 에이전트(Claude Code, Cursor, Codex 등)에 자연어 요청을 입력하기만 하면 완성된 디자인 산출물을 생성할 수 있습니다. 이 스킬은 로컬에서 실행되며, HTML/CSS 스타일 템플릿, 애니메이션 유틸리티, 내보내기 스크립트 모음을 결합하여 다음을 생성합니다:

클릭 가능한 앱 프로토타입(iPhone 스타일 프레임이 포함된 HTML)
프레젠테이션 덱 – 인터랙티브 HTML 버전 및 편집 가능한 PPTX 파일
MP4/GIF로 내보낸 짧은 모션 그래픽(선택적 배경 음악 포함)
인쇄 준비 완료 인포그래픽(PDF/PNG/SVG)
시각적 목업이 포함된 디자인 방향 제안
빠른 5차원 디자인 비평(레이더 차트 + 실행 가능한 체크리스트)

이 모든 작업은 GUI를 열지 않고 수행됩니다 – 에이전트에게 필요한 것을 말하고 스킬이 완료될 때까지 기다리면 됩니다.

설치 방법

npx skills add alchaincyf/huashu-design

설치 시 SKILL.md만 생성된다면 더 새로운 skills CLI(≥ 1.5.19)가 필요할 수 있습니다. 또는 저장소를 Claude 스킬 폴더에 클론할 수도 있습니다:

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

무엇을 할 수 있나요? (일반적인 전달 시간)

작업	출력	예상 시간
클릭 가능한 앱 프로토타입	iPhone-15-Pro 프레임이 포함된 HTML 파일, 완전한 기능의 내비게이션, Playwright 검증	10-15분
프레젠테이션 덱	브라우저 기반 HTML 덱 + 편집 가능한 PPTX(실제 텍스트 상자)	15-25분
짧은 애니메이션	MP4(25fps 또는 60fps 보간) + GIF + 선택적 BGM	8-12분
디자인 변형	3개 이상의 나란히 놓인 목업, 라이브 조정 패널, 교차 차원 탐색	10분
인포그래픽 / 데이터 시각화	CSS 그리드 레이아웃의 인쇄 품질 PDF/PNG/SVG	10분
디자인 방향 어드바이저	6개의 썸네일 개념 → 3개의 정제된 비주얼, 84개의 순수 HTML 스타일 샘플 라이브러리 기반	10분
5차원 전문가 리뷰	레이더 차트 + 유지/수정/빠른 개선 목록	3분

핵심 메커니즘

브랜드 자산 프로토콜 – 브랜드가 언급되면 스킬이 자동으로:
- 브랜드 가이드라인을 요청하고,
- 공식 브랜드 페이지에서 SVG/로고 자산을 스크래핑하며,
- 색상 값을 추출하고,
- CSS 변수가 포함된 brand-spec.md를 작성하여 생성된 모든 파일이 정확한 브랜드 팔레트를 사용하도록 합니다.
디자인 방향 폴백 – 모호한 프롬프트의 경우 스킬은 세 가지 독립적인 로직(최고 디자이너, 실제 세계 참조, "중고" 스타일 룰렛)을 실행하고 여섯 개의 썸네일을 생성합니다. 세 개를 선택하면 나머지 세 개는 백업으로 유지됩니다.
84-스타일 HTML 라이브러리 – 웹, PPT, 인포그래픽 및 앱 UI 스타일(중국어/동아시아 시각 어휘 포함)을 다루는 순수 HTML/CSS 템플릿. 외부 이미지가 필요 없으며, 라이브러리는 각 스타일에 대한 샘플 스크린샷을 제공합니다.
주니어 디자이너 워크플로우 – 스킬은 실제 콘텐츠를 채우기 전에 가정, 자리 표시자, 추론 주석을 생성하여 사용자에게 초기 초안을 보여주고 반복적인 조정을 허용합니다.
디자인 린트 및 원장 – design_lint.py는 사실적 문제(깨진 이미지, 낮은 대비, 콘솔 오류)를 확인하고 각 프로젝트의 시각적 지문을 로컬 원장(~/.huashu-design/)에 기록합니다. 이는 프로젝트 간 우발적인 스타일 중복을 방지하는 데 도움이 됩니다.

예시 프롬프트

做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选
做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击
把这段逻辑做成 60 秒动画，导出 MP4 和 GIF
帮我对这个设计做一个 5 维度评审

스킬은 요청된 자산으로 응답하며, 바로 사용할 수 있습니다.

제한 사항

편집 가능한 PPTX → Figma 파이프라인 없음(출력은 HTML이며, 네이티브 디자인 파일이 아님).
매우 복잡한 3D 또는 입자 시스템 애니메이션은 범위를 벗어납니다.
완전히 알려지지 않은 브랜드에서 시작하면 미적 점수가 낮을 수 있습니다(≈ 60-65 / 100).

라이선스 및 커뮤니티

2026-05-14부터 이 프로젝트는 MIT 라이선스로 제공됩니다 – 개인 및 상업적 사용이 무료입니다. 저장소에는 영어, 한국어, 베트남어 번역 포크와 에이전트가 읽는 커뮤니티 유지 관리 SKILL.md가 포함되어 있습니다.

빠른 시작 체크리스트

스킬 설치(npx skills add …).
assets/, scripts/, references/, demos/ 폴더가 있는지 확인합니다.
Claude 호환 에이전트를 열고 디자인 요청을 제출합니다.
생성된 파일을 검토하고, 필요한 경우 내장 패널을 통해 조정한 후 내보냅니다.

요약하자면: huashu-design은 한 줄의 텍스트를 UI 프로토타입부터 모션 그래픽까지 완성된 내보내기 준비 디자인으로 바꿔주는 오픈소스, 에이전트 독립적 스킬입니다. 모든 작업은 로컬에서 실행되며 숨겨진 원격 측정이 없습니다.