alchaincyf/huashu-design

これは何？

主な機能

• 01iPhone 15 Proのフレームや、クリック操作できる複数画面のフローを含む、単一ファイルのHTMLプロトタイプを生成します。
• 02スライド資料をプレゼン用のHTMLとして書き出し、実際のテキストボックスを備えた編集可能なPPTXにも出力します。
• 03タイムラインアニメーションをMP4やGIFに変換します。オプションで60fps補間やBGMにも対応します。
• 04サムネイルと84種類のスタイルを収録したリファレンスライブラリを使って、デザインの方向性を検討できます。
• 05レーダーチャートと、実行可能な修正リストを用いて、5つの観点からデザインをレビューします。

ユースケース

• スタイルの候補をいくつか比較してから、カンファレンス用のスライド資料を仕上げる。
• 一行の説明から、クリック操作できるモバイルアプリのプロトタイプを作る。
• 製品ローンチ向けの短いアニメーションを制作し、MP4またはGIFに書き出す。
• 引き継ぎの前に、既存のデザインについて構造化されたレビューを受ける。

クイックスタート

1. 1

   skills CLIでスキルをインストールします

   npx skills add alchaincyf/huashu-design
2. 2

   エージェント（Claude Code、Codex、Cursorなど）を開き、作りたいデザインを自然な言葉で説明します

使う前に知っておきたいこと

• !レイヤーを編集できるPPTXをFigmaに書き出すことはできません。出力形式はHTML、スクリーンショット、動画、またはテキスト編集可能なPPTXです。
• !複雑な3D、物理演算、パーティクルアニメーションはスキルの対象外です。
• !ブランドの基礎資料がない状態で作成したデザインは、作者によると品質評価が60〜65程度です。そのため、ブランド素材の提供をおすすめします。

トピック

よくある質問

huashu-design とは？

テキストプロンプトからプロトタイプ、スライド資料、アニメーション、インフォグラフィックを生成する、HTMLネイティブなAIコーディングエージェント向けデザインスキルです。 Huashu Designは、Claude Code、Codex、Cursorなどにインストールして使うエージェントスキルです。エージェントにHTMLファイルでデザイン成果物を作らせるため、プロンプトから、クリック操作できるiPhone風アプリのプロトタイプ、編集可能なPPTXとしても書き出せるプレゼン資料、MP4またはGIFに書き出せるタイムラインアニメーション、印刷品質のインフォグラフィックを生成できます。

huashu-design は無料で使えますか？ライセンスは？

huashu-design は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

huashu-design は今もメンテナンスされていますか？

活発にメンテナンス中。huashu-design の最終コミットは 2026年10月17日 です。

huashu-design は何に使えますか？

スタイルの候補をいくつか比較してから、カンファレンス用のスライド資料を仕上げる。 一行の説明から、クリック操作できるモバイルアプリのプロトタイプを作る。 製品ローンチ向けの短いアニメーションを制作し、MP4またはGIFに書き出す。 引き継ぎの前に、既存のデザインについて構造化されたレビューを受ける。

huashu-design のインストール方法は？

skills CLIでスキルをインストールします: npx skills add alchaincyf/huashu-design エージェント（Claude Code、Codex、Cursorなど）を開き、作りたいデザインを自然な言葉で説明します

huashu-design はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/alchaincyf/huashu-design