Huashu Design

Huashu Design レビュー：一言入れて、納品できるデザインを受け取る

エージェントとのデザイン作業は大抵、妥協で終わります。プロトタイプを頼めばグレーのワイヤーフレームが返ってきて、スライドを頼めば汎用的なデッキが返ってきて、アニメーションを頼めばできないと言われます。エージェントはコードは書けても、センスも、スタイルライブラリも、自分の仕事をチェックする手段もありません。

Huashu Design は、まさにそのギャップを埋めるために作られました。Claude Code、Codex、Cursor などのエージェント向けの HTML ネイティブなデザインスキルで、GitHub スターは2万9千近く、skills.sh のインストール数は約4万7千件です。一言入れれば、納品できるデザインが返ってきます。デバイスフレーム内のクリック可能なアプリのプロトタイプ、編集可能な PPTX に書き出せる 1920x1080 の HTML スライドデッキ、背景音楽付きで MP4 や GIF に書き出せるタイムラインアニメーション、インフォグラフィックです。

Huashu Design とは？

Huashu Design は HTML をウェブアプリを届ける手段ではなく、デザインメディアとして扱います。スキルファイルは約580行で33の参考ファイルがあり、サンプル画像付きの84スタイル、6つの候補から3つの方向に絞るワークフロー、採点付きデザイン診断を備えています。さらに外観の好みを記録する台帳もあり、使えば使うほどあなたの好みに合っていきます。

出力は常に開ける本物のファイルです。ブラウザで見られる HTML、本物の編集可能なテキストボックスを持つ PPTX、共有できる MP4 や GIF、PDF。何もチャットウィンドウの中に閉じ込められません。

主な機能

1. デバイスフレーム内のクリック可能なアプリプロトタイプ

アプリを説明すれば、スマートフォンやデスクトップのフレーム内で HTML レンダリングされたインタラクティブなプロトタイプが返ってきます。ワイヤーフレームではなく製品のように見え、開発開始前にフローをクリックして確認できます。

2. 編集可能な PPTX に書き出せるスライドデッキ

1920x1080 の HTML デッキは、画像に潰すのではなく本物のテキストボックスを持つ PowerPoint に書き出せます。コンバーターは計算済みスタイルを読み取り、本物の PPTX オブジェクトに対応付けるので、デッキは PowerPoint や Keynote で編集可能なままです。

3. MP4 と GIF に書き出せるタイムラインアニメーション

アニメーションはタイムラインで作られ、Playwright と ffmpeg 経由で背景音楽付きの MP4 や GIF に書き出されます。短い製品ティーザーやソーシャルクリップは、説明文ではなく完成した動画ファイルとして出てきます。

4. サンプル付きスタイルライブラリ：84スタイル

1つの見た目にデフォルトで決まるのではなく、サンプル画像付きの84スタイルから選び、6つの候補を示してから3つの方向に絞ります。製品ページ、ドキュメント、ライティングアプリ、ナビゲーションなどをカバーするので、結果は偶然ではなく選択です。

5. 採点付き診断と学習する台帳

すべてのデザインに5次元の採点付き診断が付き、スキルはあなたが気に入ったものを外観台帳に記録します。使い続けるうちにあなたの好みを学び、すでに却下した方向を提案しなくなります。

使い方

skills CLI でインストールします。以下のコマンドは GitHub からスキル全体を取得します。

npx skills add alchaincyf/huashu-design

その後、普段の言葉で頼んでください。デザインを作って、プレゼンテーションを作って、アニメーションを生成して MP4 に書き出して、デザイン診断をして、インフォグラフィックを作って。エージェントはスタイルライブラリから方向を選び、HTML を作り、描画して確認し、頼んだ形式に書き出します。プロトタイプ、スライド、アニメーション、MP4 や GIF への書き出し、レビュー、インフォグラフィックの依頼で発動します。

誰におすすめか

デザイナーを雇わずにランディングページやピッチデッキが必要な創業者、スプリントの前にクリック可能なプロトタイプが欲しいプロダクトマネージャー、ソーシャルクリップやインフォグラフィックが必要なマーケター、グレーのワイヤーフレームを受け取って製品らしく見えたらと思ったことのあるすべての人。プロンプトは主に中国語で書かれているので中国語話者のチームに特に向いていますが、出力されるデザイン自体は言語に依存しません。

料金

Huashu Design は無料で MIT ライセンスです。有料プランはありません。書き出しは Playwright や ffmpeg などのローカルツールで動くので、支払うホスト型サービスはありません。ただし動画生成にはローカルの計算時間がかかります。

長所と短所

長所：説明ではなく本物の成果物です。プロトタイプ、編集可能なデッキ、動画、インフォグラフィック。サンプル付きスタイルライブラリにより、1つのデフォルトの見た目になる問題を防ぎます。採点付き診断により結果を判断する手段があります。MIT ライセンスでスターは2万9千近くあります。

短所：スキルのプロンプトは主に中国語なので、中国語が分からない人はガイダンステキストから得られるものが少なくなります。単独の作者によるメンテナンスで、サポートは1人に依存します。動画の書き出しには Playwright と ffmpeg のインストールが必要で、実際の描画時間がかかります。リポジトリは200MB を超える大きさで、初回インストールは重いです。

最終評価

Huashu Design は、このバッチの中で最も視覚的に野心的なスキルです。エージェントにデザインの助言をするだけでなく、スタイルライブラリ、診断の評価基準、作業を納品可能なファイルに変えるエクスポーターを与えます。デザインの助言ではなくデザインそのものが必要なら、インストールしてください。GitHub で試す：alchaincyf/huashu-design。