OpenSource-Hub
H

huashu-design

SHA-256
27.4k stars·デザインツール·SHA-256 チェックサム確認済み

一言で AI agent に納品可能なデザインを作らせる:Webページ、App プロトタイプ、編集可能な PPT、アニメーション、インフォグラフィック。オープンソースで無料、商用利用可能。

AIに一言伝えるだけで、大手企業レベルのデザイン成果物を手に入れよう。

主な機能

  • たった一言で納品可能なデザインを生成:ウェブページ、アプリプロトタイプ、PPT、アニメーション、インフォグラフィック
  • 6つの候補方向をまずサムネイルで提示し、3バージョンを選んで本物のビジュアルに仕上げて選択可能
  • サンプル付き84種のHTMLネイティブスタイルライブラリ、中国語・東アジアデザインのセクションを収録
  • HTMLスライドは真に編集可能なテキストボックスを備えたPPTXファイルとしてエクスポート可能
  • タイムラインアニメーションエンジン、ワンクリックでMP4/GIF/60fpsフレーム補間をエクスポートしBGMも追加

できないこと

  • •これは独立したソフトウェアではなく、グラフィカルインターフェースもなく、Claude Code、Cursor、Codex などの skills に対応した AI agent と組み合わせて使う必要があり、単体でインストールしても動作しません。インストール時の注意点:skills CLI 1.5.15 以下のバージョンには単一ファイルしか同期しない bug があり、素材ディレクトリが失われるため、先に最新版にアップグレードしてからインストールするか、git clone で代替してください。また、Figma の代替品でもありません:出力されるのは HTML、PPTX、MP4 などの完成品ファイルで、.fig ソースファイルのエクスポートはできず、複数人でのリアルタイム共同作業にも対応していません。特定のブランドを扱う場合は、事前に logo やカラーパレットなどのアセットを提供することをお勧めします。そうでなければ、スタイルライブラリに頼るしかありません。アニメーションのエクスポートと自動クリック検証には、ローカルマシンに Node.js 環境が必要です。初心者のユーザーは、まず公式 YouTube チュートリアルを見ることをお勧めします。

使用例

  • プロダクトマネージャーがアイデアを素早く検証:一言でクリック可能な App プロトタイプを生成
  • ビジネスパーソンの報告作成:プレゼン用スライドを自動生成し、編集可能な PPTX としてエクスポート
  • コンテンツクリエイター:一連のロジックを 60 秒の公開用アニメーションやインフォグラフィックに変換
  • 独立開発者:デザインチームがなくても大手企業レベルのプロダクトページを作成
  • デザインレビュー:既存のデザインを 5 つの次元で診断し、修正リストを提示

詳細説明

Huashu Design 3.0 はオープンソースの HTML ネイティブデザイン skill で、Claude Code、Cursor、Codex などの agent に組み込めば、一言打つだけで数分以内に納品可能なデザインが手に入ります:クリック可能な App/ウェブページのプロトタイプ、真に編集可能な PPTX としてエクスポートできるスライド、BGM 付きの MP4/GIF アニメーション、印刷グレードのインフォグラフィック。まず6枚のサムネイルを生成し、その中から3つの方向を選んで実デザインに仕上げ、見本付きの84種類のスタイルライブラリが品質を下支えし、さらにデザイン診断と外観台帳で AI の定型感を防ぎます。Canva、v0 などのクローズドソースツールと比べ、MIT オープンソース、商用利用無料、agent 横断で汎用的であり、真に編集可能な PPTX をエクスポートできる数少ないソリューションでもあります。一行コマンドでインストール:npx skills add alchaincyf/huashu-design。

トラブルシューティング & FAQ (2)

トラブル対応
GitHub Issuesにドキュメントをアップロードしてもhuashu-designがPPTを生成しないのはなぜですか?また、正しく使用するにはどうすればよいですか?

GitHub Issuesはランタイムの入口ではありません。エージェントはそこで動作しないため、アップロードされたファイルが読み取られたり実行されたりすることはありません。huashu-designは、ご自身のコーディングエージェント(Claude Code、Codex、Cursor、OpenClaw、またはHermes)にインストールする必要があるスキルです。手順:1)インストール:npx skills add alchaincyf/huashu-design。2)インストールディレクトリ(例:~/.claude/skills/huashu-design/)に、SKILL.mdと並んでreferences、assets、scripts、demosのサブディレクトリが含まれていることを確認してください。SKILL.mdのみが存在する場合、skills CLIが古くなっています。npm i -g skills@latestを実行して再インストールするか、直接クローンしてください:git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design。3)ソース資料をローカルフォルダに入れ、そのフォルダでエージェントセッションを開始し、ニーズを自然言語で説明してください(例:対象者、所要時間、構成、最初にアウトラインと時間配分を依頼するなど)。注意:このスキルは、完全なデッキを作成する前に、選択用として常に3つのスタイルドラフト(複数ページのデッキの場合は各2サンプルページ)を出力します。事前にスタイルを指定してもこのステップはスキップされません。

参照 Issue #49
トラブル対応
npx skills add 実行時に発生する "YAML parse error: Nested mappings are not allowed in compact mappings" エラーの修正方法

このエラーは、スキルリポジトリ内の SKILL.md のフロントマターに、コロンを含む値が引用符で囲まれずに記述されていることを意味します(例: description: Huashu-Design — HTML-based hi-fi prototypes, ... slides: ...)。YAML は内側の text: text をネストされたマッピングとして解釈するため、パースに失敗し、CLI は "No valid skills found." と報告します。修正方法: SKILL.md の description の値を引用符で囲んでください:

---
name: huashu-design
description: "Huashu-Design — HTML-based hi-fi prototypes, interactive demos..."
---

代替方法: description からコロンを取り除くか、YAML のブロックスカラー(description: > の後にインデントした行を続ける記法)を使用してください。スキルを利用しているだけでリポジトリの所有者ではない場合は、リポジトリをフォークしてフロントマターを修正し、npx skills add <your-username>/<fork-name> を実行するか、不正な形式の SKILL.md について上流の作者に報告してください。

参照 Issue #48

タグ

ai-designclaude-code-skillhtml-slidespptx-exportapp-prototypemotion-designinfographicagent-agnostic

はじめ方

1

インストーラをダウンロード

上のボタンをクリックして、お使いのシステム用のインストーラをダウンロード

2

ソフトウェアをインストール

ディストリビューションに合ったパッケージをインストール(dpkg / rpm / AppImage)

3

まず Node.js(v18 以上)をインストールし、ターミナルで npx コマンドが使用できることを確認してください

4

ターミナルで npx skills add alchaincyf/huashu-design を実行してインストールを完了します

5

インストールディレクトリ(例:~/.claude/skills/huashu-design/)を確認し、references、assets、scripts、demos のサブディレクトリがすべて揃っていることを確認してください

インストールガイド
  1. まず Node.js(v18 以上)をインストールし、ターミナルで npx コマンドが使用できることを確認してください
  2. ターミナルで npx skills add alchaincyf/huashu-design を実行してインストールを完了します
  3. インストールディレクトリ(例:~/.claude/skills/huashu-design/)を確認し、references、assets、scripts、demos のサブディレクトリがすべて揃っていることを確認してください
ファイルの整合性

SHA-256 チェックサム確認済み

GitHub 公式 Release ページから抽出されたチェックサム

SHA256 チェックサム

388c726432c06b5f4e91d7e9b83556d3b44bb65fae06263f8a6b931d7dc19a38

このチェックサムは GitHub Release ページから抽出されたものです。ダウンロード後にファイルの整合性を確認してください。

本プラットフォーム上のすべての SHA-256 チェックサムは、プロジェクトの公式 GitHub Release ページから抽出されたもので、一切の改変はありません。GitHub Releases ページで独自に検証できます。

オープンソースの透明性

GitHub ソースを見る
環境ガイド

アンインストール情報

このツールはデスクトッププログラムを一切インストールしないため、アンインストールは skill ディレクトリを削除するだけです:インストール場所(通常は ~/.claude/skills/huashu-design または対応する agent の skills ディレクトリ)を見つけて、フォルダ全体を削除すれば完了です。git clone でインストールした場合も、同様にクローンしたディレクトリを削除してください。システムの他の場所にファイルが残ることはありません。

追加の依存関係なし

ダウンロード後すぐに使用可能。追加のランタイムは不要です。

プロジェクト情報
ライセンスMIT
最終更新2026-10-27 09:16:31
GitHub リポジトリ公式サイト

問題が発生?以下のFAQを確認

2 FAQs

類似プロジェクト