사용 가이드로 건너뛰기
huashu-design작성자 alchaincyf

Huashu Design 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬: 고충실도 HTML 프로토타입, 슬라이드, 애니메이션, 시각화 제작; 세 가지 초안으로 시작합니다.

  • Web & UI
  • HTML
alchaincyf/huashu-design · SKILL.mdSKILL.md
--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选(指定风格/品牌也不豁免),选定后才执行。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由:一张表定入口 ## 核心原则 #0 · 事实验证先于假设(优先级最高,凌驾所有其他流程) ## 核心哲学(优先级从高到低) ## 设计方向顾问(Fallback 模式)
2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 33,602자

01 기능

Claude Code와 Codex에서 huashu-design 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

Huashu-Design은 에이전트를 고품질 프로토타입, 슬라이드 덱, 모션 데모, 시각화를 위한 HTML 기반 디자인 스튜디오로 전환합니다. 새로운 시각 작업 전에는 스타일이나 브랜드가 지정되어 있어도 세 가지 차별화된 방향 초안을 강제로 생성해, 사용자가 AI가 임의로 결정한 단일 답이 아니라 실제로 렌더링된 옵션 중에서 선택할 수 있도록 합니다.

이 스킬은 추측하는 대신 브랜드 자산 프로토콜(로고, 제품 사진, 실제 색상 값)을 실행하고, 디자인 전에 WebSearch로 제품에 대한 사실 확인을 하며, 색상, 아이콘, 카드, 이미지에 대해 명시적인 안티 AI-슬롭 규칙을 적용합니다. 프로덕션 웹 앱이나 백엔드 중심 시스템을 위한 것은 아닙니다.

산출물

  • 내용을 설명하는 이름의 HTML 디자인 파일, 대폭 수정 시 버전 관리
  • 개요 월(overview wall)을 포함한 다중 페이지 HTML 덱으로, PDF로 자동 내보내지며 선택적으로 편집 가능한 PPTX로도 변환됩니다
  • 기본적으로 BGM과 SFX가 포함된 MP4 애니메이션 내보내기
  • 자산과 사용자가 선택한 방향을 문서화하는 brand-spec.md, direction-approved.md 등의 게이트 파일
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    사실 먼저 확인하기

    실제 제품, 기술, 이벤트와 관련된 무언가를 디자인하기 전에, 에이전트는 학습 메모리에 의존하지 않고 WebSearch로 그 존재, 출시 상태, 버전, 사양을 확인해야 합니다.

  2. 02
    작업 라우팅하기

    신호 테이블은 작업 시작 전, 작업 신호(브랜드명, 슬라이드/PPT, 애니메이션/내보내기, 앱/iOS 프로토타입, 비평)를 올바른 진입점과 참조 파일에 매핑합니다.

  3. 03
    세 가지 방향 폴백 실행하기

    새로운 시각 결과물을 만드는 모든 작업은 1~6단계를 거칩니다: 요구사항 명확화, 브리프 재정리, 디자인 스펙 확정, 실제 이미지 확보, 세 가지 병렬 디자인 로직 생성, 그리고 사용자 선택 대기.

  4. 04
    다섯 가지 형식 질문에 답하기

    모든 페이지나 화면에 대해 에이전트는 디자인 시스템을 구축하기 전에 내러티브 역할, 관찰 거리, 시각적 온도, 콘텐츠 용량, 시각적 모티프에 답해야 합니다.

  5. 05
    검증을 거쳐 내보내기

    애니메이션은 기본적으로 BGM과 SFX가 포함된 MP4로 렌더링되며 ffprobe로 오디오 스트림이 있는지 확인합니다. 덱은 PDF로 자동 내보내지며 선택적으로 편집 가능한 PPTX로도 변환됩니다.

02 적합성 확인

huashu-design 스킬을 사용해야 하는 경우

이러한 종류의 UI 디자인 작업 시 Claude Code 또는 Codex에서 huashu-design 스킬을 사용하십시오. 적용 범위와 제약은 스킬 자체 파일을 참조합니다.

적합한 경우

  • 사용자가 클릭해 보며 흐름을 체감할 수 있는 인터랙티브 고해상도 제품 목업
  • PPT처럼 작동하도록 만들어진 1920x1080 HTML 슬라이드 덱
  • 영상 소재나 콘셉트 데모로 사용되는 타임라인 기반 모션 디자인
  • 인쇄 품질의 인포그래픽 및 데이터 기반 시각화
  • 여러 디자인 방향을 나란히 비교하거나 Tweaks로 다듬기

한계 인지하기

  • 백엔드가 필요한 프로덕션급 웹 앱이나 시스템은 범위 밖입니다
  • SEO 웹사이트와 동적 백엔드 기반 시스템은 이 skill을 거치지 않습니다

제공할 사항

  • 브랜드 자산 체크리스트공식 채널을 검색하기 전에, 로고, 제품 이미지, UI 스크린샷, 색상 팔레트, 폰트, 금지 영역을 한 번에 요청합니다.
  • 스타일 또는 브랜드 레퍼런스마음에 드는 웹사이트 URL, 스크린샷, 또는 느낌을 맞추고자 하는 제품; 없으면 에이전트가 명시된 가정을 세운 뒤 진행합니다.
  • 기존 디자인 시스템 또는 코드베이스에이전트는 처음부터 하이파이 디자인을 하기 전에 디자인 시스템, UI 킷, 코드베이스 또는 Figma가 존재하는지 먼저 확인합니다.

03 스킬 내부

huashu-design Skill이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 3가지 방향 게이트는 100% 필수입니다

    새로운 시각물을 만드는 작업은 사용자가 스타일이나 브랜드를 지정한 경우에도 실행 전에 서로 구분되는 세 가지 방향 초안을 보여줘야 하며, 예외는 세 가지 좁은 경우로만 한정됩니다.

  2. 로고는 필수 자산입니다

    디자인에 알아볼 수 있는 제품이나 브랜드명이 나타나면 공식 로고를 가져오는 것은 선택이 아니라 필수이며, 등장하는 제품 수만큼 로고를 가져와야 합니다.

  3. 엉성한 실행보다 플레이스홀더를

    아이콘이 없으면 형편없이 그린 SVG 대신 회색 블록과 텍스트 레이블을 사용하고, 데이터가 없으면 숫자를 조작하지 말고 솔직하게 주석을 남깁니다.

  4. 불필요한 채우기 콘텐츠 금지

    모든 요소는 존재할 이유가 있어야 하며, 빈 공간은 구성으로 해결해야 하고 통계를 지어내거나 모든 제목에 아이콘을 넣거나 그레이디언트를 남발해서는 안 됩니다.

  5. 흔히 지목되는 AI 남용 패턴 피하기

    보라색 그레이디언트, 이모지 아이콘, 색상 있는 왼쪽 테두리 강조가 있는 둥근 카드, AI가 그린 SVG 사람/얼굴은 브랜드 자체가 사용하는 경우가 아니라면 피해야 할 기본 AI 시각 패턴으로 표시됩니다.

  6. React 범위 제약

    여러 컴포넌트가 충돌하므로 스타일 객체를 const styles = {...}로 명명하지 마십시오; 컴포넌트는 스크립트 태그 간에 Object.assign(window, {...})를 통해 내보내야 합니다.

  7. 애니메이션 내보내기는 기본적으로 오디오를 사용합니다

    애니메이션 HTML은 기본적으로 BGM과 SFX가 모두 포함된 MP4로 전달되며, 사용자가 명시적으로 오디오 없음을 요청하지 않는 한 무음 버전은 미완성 산출물로 간주됩니다.

  8. 덱은 기본적으로 Overview Wall이 포함된 다중 파일 방식을 사용합니다

    슬라이드 덱은 기본적으로 여러 개의 HTML 파일과 개요 역할을 하는 assets/deck_index.html로 구성되며, 단일 파일 아키텍처는 개요가 명시적으로 필요하지 않은 5페이지 이하의 최소 피치에만 사용합니다.

04 활용하기

Claude Code 또는 Codex에 huashu-design 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 귀하의 에이전트에 huashu-design 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

SKILL.md를 위한 일반적인 skills CLI 형식이며, 저장소별로 자체 경로를 문서화할 수 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

이 프롬프트를 자신의 콘텐츠와 제약 조건으로 수정한 다음 Claude Code 또는 Codex에서 실행하십시오.

Example prompt
做个咖啡主题的 PPT

출처: SKILL.md 예시(원문 그대로).

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 전달 전에 Playwright 스크린샷을 촬영하고 콘솔 오류를 확인합니다
  • AI가 작성한 코드에는 인터랙션 버그가 자주 있으므로 전달 전에 직접 브라우저에서 결과를 확인합니다
  • 앱 프로토타입에서 세 가지 Playwright 클릭 테스트(상세 화면, 핵심 핫스팟, 탭 전환)를 pageerror 없이 실행합니다
  • 가독성 최소 기준을 확인합니다: 본문 텍스트 최소 14px, 라벨 최소 12px, 대비 최소 4.5:1

OpenDesign에서 SKILL.md 링크를 통해 huashu-design을 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Repository
github.com/alchaincyf/huashu-design 브랜치 master
스킬 파일
SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 a790f70
License
MIT LICENSE에서 확인.
리포지토리 스타
24,121 2026-09-14 GitHub 스냅샷에서 alchaincyf/huashu-design 저장소 전체에 대한 수치입니다. huashu-design의 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 你是谁에이전트를 아트 디렉터, 브랜드 리서처, 비주얼/모션 디자이너, 엔지니어, 카피라이터의 여섯 가지 역할을 수행하는 스튜디오로 설정합니다.
  2. 사용 전제해당 스킬이 다루는 산출물 유형과 프로덕션 웹 앱은 제외된다는 점을 명시합니다.
  3. 任务路由:一张表定入口작업 신호를 올바른 진입점과 참조 파일에 매칭하는 표입니다.
  4. 核心原则 #0 · 事实验证先于假设디자인 작업을 시작하기 전에 제품 사실에 대한 WebSearch 검증을 요구합니다.
  5. 核心哲学(优先级从高到低)우선순위가 높은 순서대로 여섯 가지 원칙: 기존 컨텍스트 활용, 구축 전 합의, 변형안 제공, 플레이스홀더 선호, 채우기용 콘텐츠 배제, AI 슬롭 배제.
  6. 设计方向顾问(Fallback 模式)실행 전 세 가지 병렬 디자인 방향을 산출하는 필수 7단계 프로세스를 정의합니다.
  7. App / iOS 원型专属守则(速查版)모바일 앱 프로토타입에 대한 아키텍처, 이미지, 디바이스 프레임, 클릭 테스트를 다루는 구체적인 우선 규칙입니다.
  8. 工作流程체크포인트, 게이트 파일 프로토콜, 질문 템플릿이 포함된 번호가 매겨진 표준 워크플로입니다.
  9. 异常处理모호한 요청, 거부된 질문, 충돌하는 컨텍스트, 빠듯한 마감 시한에 대한 사전 정의된 예외 대응 방식입니다.
  10. 技术红线(必读 references/react-setup.md)협의 불가능한 React/Babel 및 Stage/Sprite 구현 제약 조건입니다.
  11. Starter Components(assets/下)미리 만들어진 컴포넌트(deck_index.html, animations.jsx, ios_frame.jsx 등)와 각각의 사용 시점을 나열합니다.
  12. 产出要求네이밍 규칙, 버전 관리, 파일 위치, 최종 브라우저/Playwright 확인 요구 사항입니다.
스킬 자체 설명
"花叔Design——HTML로 고품질 프로토타입, 슬라이드, 애니메이션, 시각화 및 전문가 리뷰를 제작합니다. 모든 새 디자인은 100% 세 가지 방향의 초안을 먼저 사용자에게 제시하여 선택하게 하며(스타일/브랜드 지정 시에도 예외 없음), 선택 후 실행합니다. 트리거 단어: 프로토타입 만들기, PPT, 슬라이드, 애니메이션, 디자인 스타일, 리뷰, HTML 페이지 만들기, UI mockup, MP4/GIF 내보내기, 멋진 것 만들기. 프로덕션급 Web App/백엔드가 필요한 시스템에는 적합하지 않습니다."

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 33,602자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

huashu-design 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

이 스킬은 Claude Code에서만 작동합니까?

아니요, 이 스킬은 에이전트에 종속되지 않도록 설계되어 Claude Code, Codex, Cursor, Trae, OpenClaw, Hermes Agent를 비롯한 마크다운 기반 스킬 에이전트에서 작동하며, 서브에이전트 생성이 불가능한 성능이 낮은 런타임을 위한 저하 모드도 문서화되어 있습니다.

Huashu Design

실제 UI 디자인 작업에서 huashu-design을 실행하십시오.

OpenDesign을 다운로드하고, SKILL.md 링크에서 huashu-design을 가져오고, 위 프롬프트를 붙여넣은 후 결과 전에 계획을 확인하십시오.

터미널
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원