화숙 디자인 (Huashu Design)
HTML로 고품질 프로토타입·슬라이드·애니메이션·인포그래픽을 만들고, 항상 세 가지 시안을 먼저 제안하는 디자인 워크플로 스킬.
디자인·UI중급★ 28,049⑂ 3,033AI 점수 10/10마지막 업데이트: 2026. 10. 23.
무엇을 해주나
- Claude를 '코드 작성자'가 아니라 아트디렉터·브랜드 리서처·비주얼 디자이너·모션 디자이너·프론트엔드·카피라이터로 구성된 작은 스튜디오처럼 동작하게 만듭니다.
- 새로운 시각 작업은 100% 세 가지 방향의 실제 초안을 먼저 보여주고, 사용자가 고른 뒤에야 본 작업에 들어갑니다(브랜드·스타일이 지정돼도 예외 없음).
- 작업 유형별 전용 매뉴얼로 라우팅합니다: 웹/랜딩·대시보드, 슬라이드(PPT), 인포그래픽, 모바일 앱 프로토타입, 모션/영상(MP4·GIF 내보내기), 디자인 리뷰.
- 브랜드 자산 프로토콜(공식 로고·제품 이미지 확보), 사실 검증(WebSearch로 제품·버전 확인), 가독성 하한선(본문 폰트 크기·명도 대비 4.5:1), 템플릿 장식 금지 목록을 강제합니다.
direction-approved.md,brand-spec.md,导演稿.md같은 게이트 파일로 각 단계 완료를 물리적으로 증명하게 합니다.- 작업 시작/종료 시
learn.py,design_lint.py스크립트로 사용자 취향을 기록하고, 과거 산출물과 비슷한 외형이 반복되지 않도록 '외형 장부'를 관리합니다.
이런 분께 추천
- 기획·마케팅·창업자로서 디자이너 없이도 보기 좋은 제안서·랜딩페이지·피치덱이 필요한 분
- 'AI가 만든 티'가 나는 보라색 그라데이션·이모지 카드 스타일을 벗어나고 싶은 개발자
- HTML 한 파일로 바로 공유 가능한 고충실도 프로토타입을 빠르게 반복하고 싶은 PM·디자이너
- 단, 백엔드가 필요한 프로덕션 웹앱·SEO 사이트 제작에는 맞지 않습니다.
활용 예시
- "커피 브랜드 톤의 투자 피치덱 12장 만들어줘" → deck 모듈 진입, 세 방향별 대표 2페이지 시안 제시 → 선택 후 1920×1080 HTML 덱 완성, PDF/PPTX 변환.
- "우리 서비스 랜딩페이지 시안 뽑아줘" → 브랜드 자산(로고·제품 스크린샷) 확보 → 세 가지 디자인 방향 HTML + 스크린샷 → 선택안 전체 구현 후
design_lint.py로 검수. - "제품 소개 30초 애니메이션을 MP4로" → 사실 검증 후
导演稿.md(분шо트 구성) 작성 → 방향보드 3종 승인 → 타임라인 기반 HTML 애니메이션 렌더링 및 내보내기.
· · · 설치 가이드 · · ·
설치 없이 지금 한 번 써보기
아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.
이 파일의 지시를 읽고 그대로 따라서 나를 도와줘: https://raw.githubusercontent.com/alchaincyf/huashu-design/HEAD/SKILL.md 내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)
Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.
↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.
Claude 앱에 설치 (터미널 필요 없음)
- 아래 버튼으로 ZIP 파일을 받으세요.
- Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
- Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
Claude Code에 설치
Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요
AI 스킬마트에서 찾은 스킬을 설치해줘. GitHub 저장소 alchaincyf/huashu-design 의 SKILL.m 폴더를 내 ~/.claude/skills/huashu-design/ 에 그대로 복사해줘. 설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.
직접 명령으로 설치하기
git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.
- 터미널을 엽니다(맥: 터미널, 윈도우: PowerShell).
- 스킬 폴더가 없다면 만듭니다:
mkdir -p ~/.claude/skills - 저장소를 클론합니다:
git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design - Python 3가 설치돼 있는지 확인합니다:
python3 --version(윈도우는python --version). - 스크린샷·검증 기능을 쓰려면 Playwright를 설치합니다:
pip install playwright && playwright install chromium(선택 사항, 없으면 해당 단계만 건너뜀). - Claude Code를 재시작한 뒤 "프로토타입 만들어줘", "PPT 만들어줘" 같이 요청하면 스킬이 자동 발동합니다.
- 세 가지 시안이 나오면 반드시 하나를 골라 답해야 다음 단계가 진행됩니다.
GitHub에서 원본 보기 ↗라이선스: MIT