Huashu DesignのClaude Code向け設計ワークフローを読む

一言からデザイン成果物へ

Huashu Design は、Claude Code 向けの HTML ネイティブなデザインスキルだと自己紹介しているが、README は Cursor、Trae、Hermes、OpenClaw、あるいは Markdown スキルを扱えるあらゆるエージェントでも動作すると述べている。ワークフローは、ユーザーがエージェントに一言話しかけると、成果物の種類に応じて、クリック可能な HTML アプリプロトタイプ、ブラウザプレゼンテーションと編集可能な PPTX、BGM 付き MP4 アニメーション、PDF/PNG/SVG に書き出せるインフォグラフィック、またはデザインバリエーション一式を生成するというものだ。README はこのプロセスを純粋に対話駆動と位置づけている。ボタンもパネルも Figma プラグインもない。

インストール方法と検証の必要性

README に記載されたインストールコマンドは npx skills add alchaincyf/huashu-design である。ただし、このスキルは単一ファイルではなく、references/、assets/、scripts/、demos/ のサブディレクトリに依存しており、そこには 99 個のレシピ、スクリプト、アセットが含まれていると文書は警告している。インストール後にこれらのサブディレクトリがない場合、README は skills CLI が古すぎる（1.5.15 までにバグがあった）と述べ、1.5.19 以降にアップグレードして再インストールするよう求めている。アップグレードで解決しない場合は、スキルディレクトリへの git clone インストール（例：git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design）を提案している。

中核メカニズム：コアアセットプロトコル

README はコアアセットプロトコルをこのスキルで最も厳格なルールと呼んでいる。タスクが特定のブランド（Stripe、Linear、Anthropic、DJI、自社など）に触れる場合、5 つのステップが強制される。ロゴ、製品写真、UI スクリーンショット、カラーパレット、フォント、ブランドガイドラインの 6 種類のアセットを尋ねる。公式チャネルを検索する。アセットタイプごとに、それぞれ 3 つのフォールバックパスを使ってダウンロードする。実際のアセットから色の hex 値を grep するなどして検証・抽出する。そして、パスと CSS 変数をまとめた brand-spec.md として凍結する。このプロトコルは A/B テスト（v1 対 v2、各 6 エージェント）され、v2 は安定性の分散を 5 倍減らしたと主張しているが、テストの詳細は示されていない。

デザイン方向性アドバイザーとジュニアデザイナーワークフロー

デザイン方向性アドバイザーは、ブリーフが曖昧すぎて実行できないときに発動する。5 つの流派 × 20 の哲学から、それぞれ異なる流派の 3 つの差別化された方向性を推薦する。各方向性には代表作、ゲシュタルトのキーワード、代表的なデザイナーが付属し、3 つのビジュアルデモを並行生成してユーザーに選ばせる。選択後は、ジュニアデザイナーワークフローに進む。これは README によれば、すべてのタスクにおけるデフォルトの作業モードである。このワークフローは、質問セットを一度に送信し、すべての回答を待ってから進むこと、仮定、プレースホルダー、推論コメントを HTML に直接書き込むこと、グレーのブロックだけでも早い段階でユーザーに見せること、納品前に Playwright でブラウザを目視確認することを要求する。

事実確認を最優先に、AI スロップ対策ルール

README の原則 #0 である「事実確認を最優先に」は、実際の失敗モードの後に追加された最優先ルールだと説明されている。タスクが特定の製品、技術、イベント（例として DJI Pocket 4、Nano Banana Pro、Gemini 3 Pro が挙げられている）に言及する場合、最初のアクションは WebSearch で存在、リリース状況、現在のバージョン、仕様を確認することである。トレーニングコーパスの記憶からの主張は許されないと文書は述べている。視覚面では、AI スロップ対策ルールが AI 出力の視覚的な共通点を標的にしている。紫色のグラデーション、絵文字アイコン、角丸＋左ボーダーアクセント、SVG 人間、ディスプレイフェースとしての Inter、実際の製品写真の代わりになる CSS シルエットなどだ。代わりに推奨されるのは text-wrap: pretty、CSS Grid、厳選されたセリフディスプレイフェース、oklch カラーである。

エクスポートツールチェーンと成果物

このスキルの出力には、単一ファイルの HTML プロトタイプ、実際のテキストフレームを持つ編集可能な PPTX（html2pptx.js が DOM の計算スタイルを読み取り、要素を PowerPoint オブジェクトに変換する）、25fps でオプションの 60fps 補間付き MP4、パレット最適化 GIF、PDF/PNG/SVG エクスポートが含まれる。リポジトリ構造にはスクリプトが列挙されている。render-video.js（HTML から MP4）、convert-formats.sh（MP4 から 60fps と GIF）、add-music.sh（MP4 に BGM）、export_deck_pdf.mjs、export_deck_pptx.mjs、verify.py だ。README は、中核パイプライン（デザイン、レンダリング、エクスポート）はゼロネットワークコールで 100% ローカルに実行されると主張する一方、Doubao TTS ナレーションや AI ビデオレビューなどのクラウド機能は scripts/cloud/ に分離され、ユーザー自身の API キーを必要とし、明示的な --yes 同意ゲートを要求する。すべての送信ホストと認証情報の接触点は SECURITY.md で宣言されていると述べているが、このファイルは提供されたソース資料には含まれていない。

位置づけ、制限、ライセンス

README は huashu-design を Anthropic の Claude Design と比較し、コアアセットプロトコルのアイデアは Claude Design 用に Anthropic が書いたシステムプロンプトに由来すると認めている。違いは形態にある。Claude Design はサブスクリプションクォータと GUI を持つブラウザベースの製品であり、huashu-design は Claude Code 内にインストールされ、API 使用量と会話型インターフェースで実行され、HTML、MP4、GIF、編集可能な PPTX、PDF を出力するスキルである。README は制限も列挙している。レイヤー編集可能な PPTX から Figma への往復はない、Framer-Motion レベルの複雑なアニメーションは範囲外、ブランド資産ゼロからのデザイン品質は 60〜65 ポイントに落ちる。リポジトリは 2026-05-14 に MIT ライセンスへ再ライセンスされ、事前の承認や通知なしに商用利用を含むあらゆる目的での使用が許可された。ライセンス文は標準的な MIT 条項を付与し、セキュリティ体制、サポート、保証については何も述べていない。

編集部の結論

Claude Codeを制作工程の対話窓口として使い、HTMLやスライドをファイルで管理したい制作者に合います。成果物の品質基準や安全性を外部資料なしで保証するものではありません。skillsと参照ファイルを読み、5次元レビューの指摘が実際のHTMLとMP4出力に反映されるかを最初に確認してください。

公式情報源

1. Official README
2. Project repository
3. Release notes