Huashu Design (Claude Skill) — 설치 & 라이브 데모

왜 쓰나요

핵심 기능

20개의 코드화된 디자인 원칙(대비, 리듬, 모듈성 등)
5차원 검토 : 레이아웃 / 타이포그래피 / 색상 / 모션 / 컨텐츠
애니메이션 결과물을 위한 헤드리스 렌더링을 통한 MP4 내보내기
충실도가 높은 프로토타입 모드 - 픽셀 단위까지 완벽한 타겟 충실도
모든 프레임워크 또는 일반 HTML에서 작동합니다.

라이브 데모

실제 사용 모습

준비됨

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "huashu-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "huashu-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/alchaincyf/huashu-design",
          "~/.claude/skills/huashu-design"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

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

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Huashu Design

HTML로 제품 랜딩 페이지의 신속한 프로토타입 제작

👤 Figma보다 코드를 선호하는 창립자, 디자이너 ⏱ ~60 min intermediate

언제 쓸까: 당신은 간략한 내용을 갖고 있으며 정적 모형이 아닌 클릭 가능하고 측정 가능한 프로토타입을 원합니다.

사전 조건

스킬 장착 — 자식 클론 https://github.com/alchaincyf/huashu-design ~/.claude/skills/huashu-design

흐름

앵커 스타일

Use huashu-design. Brief: minimal B2B SaaS landing, Swiss-influenced, serif headings, one accent color. Generate layout plan following your 20 principles.✓ 복사됨

→ Layout plan cites specific principles applied
짓다

Produce HTML/CSS. Single file. Responsive. No JS frameworks.✓ 복사됨

→ Single-file deliverable that passes basic a11y
5-딤 리뷰

Run the 5-dimension review on what you just shipped. Where does it fall short?✓ 복사됨

→ Critical self-review, not hype

결과: 코드를 종료하지 않고도 A/B 테스트를 수행하거나 반복할 수 있는 프로토타입입니다.

함정

Skill reverts to generic "hero + features + CTA" template — Pin the style ref (Swiss, Bauhaus, editorial) in every prompt

함께 쓰기: 파일 시스템

애니메이션 설명을 만들고 MP4로 내보내기

👤 제품 비디오를 배송하는 개발자/크리에이터 ⏱ ~120 min advanced

언제 쓸까: 제품에 대한 30초 설명을 원하지만 After Effects를 정당화할 수는 없습니다.

흐름

스토리보드

Use huashu-design. Storyboard a 30s explainer for my product: problem (8s) / solution (14s) / CTA (8s).✓ 복사됨

→ Frame-by-frame plan
HTML로 애니메이션 만들기

Implement each scene as a CSS keyframe animation. Render as a single HTML with a timeline.✓ 복사됨

→ HTML plays cleanly in browser
내보내다

Render to 1080p MP4.✓ 복사됨

→ MP4 written to disk; duration matches

결과: 프롬프트에서 배송 가능한 MP4 설명, 비디오 편집 소프트웨어 없음.

함정

Fonts render differently in headless Chrome — Bundle web fonts; don't rely on system fonts

함께 쓰기: 파일 시스템 · 후유증

조합

다른 MCP와 조합해 10배 효율

huashu-design-skill + after-effects

Storyboard in HTML, finish in AE for broadcast quality

huashu 디자인 초안; AE 합성을 위해 프레임을 내보냅니다.✓ 복사됨

huashu-design-skill + filesystem

Save iterations alongside the brief

/designs/landing-v1/부터 v3/까지 생성하고 둘 다 유지합니다.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출
plan_layout	brief, style_ref	모든 새로운 디자인
generate_html	plan	계획대로 구축
review_5d	html	구축 후 자체 검토
render_mp4	html, duration	애니메이션 결과물

비용 및 제한

운영 비용

API 쿼터: N/A
호출당 토큰: 하이파이 디자인은 많은 양의 HTML을 생성합니다. 범위를 엄격하게 유지하세요.
금액: Free
팁: 작은 패스로 생성: 먼저 구조화, 두 번째 스타일링, 세 번째 다듬기

보안

권한, 시크릿, 파급범위

최소 스코프: filesystem-write

자격 증명 저장: None

데이터 외부 송신: None

문제 해결

자주 발생하는 오류와 해결

MP4 렌더링 실패(ffmpeg 누락)

brew install ffmpeg — 스킬은 프레임 스티칭에 이를 사용합니다.

확인: `ffmpeg -version`

디자인은 평범해 보이지만

스타일 참조를 고정하지 않았습니다. 항상 하나의 이름을 지정하십시오(Swiss, Bauhaus, Pentagram 등).

리뷰는 잘못된 디자인에 대해 행복한 피드백을 제공합니다.

명시적 프롬프트: "비판적이어야 합니다. 무엇이 잘못되었는지 먼저 나열하세요."

대안

Huashu Design 다른 것과 비교

대안	언제 쓰나	단점/장점
cc-frontend-skill	방법론보다는 자기 주장이 강한 목소리를 원합니다.	덜 구조화된 검토 프로세스
Figma	팀 워크플로에는 Figma가 필요합니다.	코드가 아닙니다. 같은 방식으로 애니메이션할 수 없음

Huashu Design