alchaincyf/huashu-design
Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic
해결하는 문제
Huashu Design는 AI 에이전트(Claude Code, Cursor, Codex 등)를 위한 디자인 자동화 기술로, 텍스트 프롬프트만으로도 전문적이고 납품 가능한 디자인을 생성할 수 있게 해줍니다. Figma나 After Effects와 같은 수동 GUI 도구의 필요성을 제거하여, 에이전트가 터미널에서 직접 고해상도의 인터랙티브 프로토타입, 프레젠테이션 덱, 모션 그래픽을 생성할 수 있도록 합니다.
작동 방식
이 프로젝트는 AI 에이전트를 전문 디자이너로 만드는 구조화된 지침(SKILL.md), 자산, 스크립트를 제공합니다. 다음과 같은 핵심 메커니즘을 사용합니다:
- 브랜드 자산 프로토콜: 에이전트가 공식 브랜드 가이드라인을 검색하고, 자산에서 실제 16진수 색상 코드를 추출하며, 색상 추측을 피하기 위해 브랜드 사양을 생성하는 엄격한 5단계 프로세스.
- 디자인 방향 조언자: 요구사항이 모호할 경우, 에이전트는 세 가지 병렬 논리 경로(랜덤 선택, 실제 세계 수상작 예시, 최고 스튜디오 철학)를 실행하여 사용자가 선택할 수 있는 세 가지 다른 시각적 방향을 제시합니다.
- 주니어 디자이너 워크플로우: 에이전트는 가정을 명확히 하고, 초기 피드백을 위한 플레이스홀더를 사용한 후, 콘텐츠와 변형을 정교화하는 전문적인 반복 프로세스를 따릅니다.
- 기술 툴체인: 60개의 네이티브 HTML 스타일 라이브러리와 커스텀 모션 엔진(Stage + Sprite 모델)을 사용하여 디자인을 렌더링합니다. HTML 출력물을 MP4, GIF, PDF, 편집 가능한 PPTX 파일로 내보내는 스크립트도 포함되어 있습니다.
대상 사용자
전통적인 그래픽 사용자 인터페이스보다 채팅 기반의 에이전트 워크플로우를 선호하는 사용자, 특히 수동으로 디자인하지 않고도 빠르고 고품질의 제품 발표용 애니메이션, 클릭 가능한 앱 프로토타입, 전문적인 프레젠테이션 슬라이드가 필요한 사용자에게 적합합니다.
주요 특징
- 다양한 납품물: 클릭 가능한 iOS/Web 프로토타입, 편집 가능한 PPTX 슬라이드, BGM이 포함된 고프레임 모션 그래픽 생성.
- 에이전트 독립성: "스킬" 프레임워크를 지원하는 모든 에이전트(Claude Code, Cursor, OpenClaw 등)와 호환.
- AI의 흐릿함 방지:
text-wrap: pretty및 OKLCH 색상과 같은 특정 CSS 기법을 사용해 일반적인 AI 생성 시각 패턴을 피합니다. - 로컬 실행: 렌더링 및 내보내기 파이프라인은 핵심 디자인 기능에 필요한 API 키 없이 100% 로컬에서 실행됩니다.
관련
- 프로젝트
- 프로젝트
- 프로젝트
- 프로젝트
- 프로젝트