alchaincyf/huashu-design

Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic

何を解決するか

Huashu Design は、AIエージェント(Claude Code、Cursor、Codexなど)向けのデザイン自動化スキルであり、テキストプロンプトのみを使用してプロフェッショナルで納品可能なデザインを生成できるようにします。Figma や After Effects などの手動GUIツールの必要性を排除し、エージェントがターミナルから直接高精細なインタラクティブプロトタイプ、プレゼンテーションデッキ、モーショングラフィックスを生成できるようにします。

動作方法

このプロジェクトは、AIエージェントをプロフェッショナルデザイナーに変えるための構造化された手順(SKILL.md)、アセット、スクリプトを提供します。以下のコアメカニズムを採用しています:

  • ブランドアセットプロトコル:エージェントが公式ブランドガイドラインを検索し、アセットから実際の16進色コードを抽出し、色の推測を避けるためのブランド仕様を作成する厳格な5段階プロセス。
  • デザイン方向アドバイザー:要件が曖昧な場合、エージェントは3つの並列論理パス(ランダム選択、実世界の受賞作品、トップスタジオの哲学)を実行し、ユーザーが選択可能な3つの異なるビジュアル方向を提示します。
  • ジュニアデザイナー・ワークフロー:エージェントは、仮定の明確化、初期フィードバック用のプレースホルダーの使用、その後のコンテンツとバリエーションの精緻化という、プロフェッショナルな反復プロセスに従います。
  • 技術ツールチェーン:60種類のネイティブHTMLスタイルライブラリとカスタムモーションエンジン(Stage + Spriteモデル)を使用してデザインをレンダリング。HTML出力をMP4、GIF、PDF、編集可能なPPTXファイルにエクスポートするスクリプトも含まれます。

対象ユーザー

従来のグラフィカルユーザーインターフェースではなく、チャットベースでエージェントワークフローを好むユーザー向けです。特に、手動でデザインせずに、迅速かつ高品質な製品発表用アニメーション、クリック可能なアプリプロトタイプ、プロフェッショナルなプレゼンテーションスライドが必要なユーザーに最適です。

特徴

  • 多様な納品物:クリック可能なiOS/Webプロトタイプ、編集可能なPPTXスライド、BGM付きの高フレームレートモーショングラフィックスを生成。
  • エージェント非依存:「スキル」フレームワークをサポートする任意のエージェント(例:Claude Code、Cursor、OpenClaw)と互換性があります。
  • AIのダラダラ感防止text-wrap: pretty や OKLCH カラーなどの特定のCSS技術を使用して、一般的なAI生成の視覚パターンを回避します。
  • ローカル実行:レンダリングおよびエクスポートパイプラインは、コアデザイン機能に必要なAPIキーなしで、100%ローカルで実行されます。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト