Huashu Design (Claude Skill) — インストール & ライブデモ

なぜ使うのか

主な機能

成文化された 20 のデザイン原則 (コントラスト、リズム、モジュール性など)
5次元レビュー: レイアウト / タイポグラフィー / カラー / モーション / コンテンツ
アニメーション成果物のヘッドレスレンダリングによる MP4 エクスポート
高忠実度プロトタイプモード — ピクセル完璧なターゲット忠実度
あらゆるフレームワークまたはプレーン HTML で動作します

ライブデモ

実際の動作

準備完了

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： Huashu Design

HTML で製品ランディングページのプロトタイプを迅速に作成する

👤 創設者やデザイナーは Figma よりもコードを好む ⏱ ~60 min intermediate

使うタイミング： あなたは概要を理解していて、静的なモックではなく、クリック可能で測定可能なプロトタイプを必要としています。

フロー

アンカースタイル

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-design のドラフト。 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
ヒント: 小さなパスで生成: 最初に構造、2 番目にスタイリング、3 番目に磨きをかける

セキュリティ

権限、シークレット、影響範囲

最小スコープ： filesystem-write

認証情報の保管： None

データ送信先： None

トラブルシューティング

よくあるエラーと対処法

MP4 レンダリングが失敗する (ffmpeg が見つからない)

brew install ffmpeg — スキルはフレームステッチにそれを使用します

確認： `ffmpeg -version`

デザインは一般的に見えます

スタイル参照を固定していません。常に 1 つの名前を付けてください (スイス、バウハウス、ペンタグラムなど)。

レビューでは悪いデザインについて満足のいくフィードバックが得られます

明示的なプロンプト: 「批判的になり、まず何が問題かをリストアップしてください」

代替案

Huashu Design 他との比較

代替案	代わりに使う場面	トレードオフ
cc-frontend-skill	方法論ではなく自分の意見を主張したい	構造化されていないレビュープロセス
Figma	チームワークフローにはFigmaが必要です	コードではありません。同じようにアニメーション化することはできません

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る