使い方ガイドへスキップ
huashu-design作者 alchaincyf

Huashu Design スキル。

Claude Code と Codex のための UI デザインスキル:高精度な HTML プロトタイプ、スライド、アニメーション、ビジュアライゼーションを作成。3 つのドラフトから開始します。

  • Web & UI
  • HTML
alchaincyf/huashu-design · SKILL.mdSKILL.md
--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选(指定风格/品牌也不豁免),选定后才执行。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由:一张表定入口 ## 核心原则 #0 · 事实验证先于假设(优先级最高,凌驾所有其他流程) ## 核心哲学(优先级从高到低) ## 设计方向顾问(Fallback 模式)
2026-09-14 にアップストリームファイルから読み取ったフロントマターとセクション見出し · 全体で 33,602 文字

01 できること

Claude CodeおよびCodexにおけるhuashu-design Skillの機能

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

Huashu-Designは、エージェントを高精細プロトタイプ、スライドデッキ、モーションデモ、可視化のためのHTMLベースのデザインスタジオに変えます。新しいビジュアル作業の前には、スタイルやブランドが指定されている場合でも、3つの異なる方向性のドラフトを強制的に作成させ、ユーザーがAIの単独判断による1つの答えではなく、実際にレンダリングされた選択肢から選べるようにします。

推測に頼るのではなく、ブランドアセット(ロゴ、製品写真、実際のカラー値)のプロトコルを実行し、デザイン前にWebSearchで製品に関する事実を確認し、色、アイコン、カード、画像に対する明示的な「AIっぽさ」排除ルールを適用します。本番運用のWebアプリケーションやバックエンド駆動のシステムを対象としたものではありません。

生成されるもの

  • 説明的な名前が付けられたHTMLデザインファイルで、大幅に改訂された場合はバージョン管理されます
  • 概要ウォールを備えた複数ページのHTMLデッキで、PDFへ自動エクスポートされ、必要に応じて編集可能なPPTXにも対応します
  • デフォルトでBGMとSFXを含むMP4アニメーションのエクスポート
  • brand-spec.mdやdirection-approved.mdなどのゲートファイルで、アセットとユーザーが選択した方向性を記録します
プロンプト例を見る ↗

仕組み

  1. 01
    まず事実を確認する

    実在の製品、技術、イベントに関連するものをデザインする前に、エージェントは学習済みの記憶に頼るのではなく、WebSearchでその存在、リリース状況、バージョン、仕様を確認しなければなりません。

  2. 02
    タスクを振り分ける

    作業開始前に、シグナルテーブルがタスクの手掛かり(ブランド名、スライド/PPT、アニメーション/エクスポート、アプリ/iOSプロトタイプ、批評)を正しいエントリーポイントと参照ファイルに対応付けます。

  3. 03
    3方向のフォールバックを実行する

    新しいビジュアルを生成するタスクはすべてフェーズ1〜6を経ます。ニーズを明確化し、ブリーフを言い換え、デザイン仕様を確定し、実際の画像を調達し、3つの並行するデザインロジックを生成した上で、ユーザーの選択を待ちます。

  4. 04
    5つの形式に関する質問に答える

    各ページまたは各カットについて、エージェントはデザインシステムを構築する前に、物語上の役割、視聴距離、ビジュアルの温度感、コンテンツ容量、ビジュアルモチーフに答えなければなりません。

  5. 05
    検証付きでエクスポートする

    アニメーションはデフォルトでBGMとSFX付きのMP4にレンダリングされ、ffprobeで音声ストリームの有無が確認されます。デッキはPDFへ自動エクスポートされ、必要に応じて編集可能なPPTXにも対応します。

02 適合性を確認

huashu-design スキルを使うべきとき

この種の UI デザインの作業には、Claude Code または Codex で huashu-design スキルを使用します。適合性と制限は、スキル自体のファイルから取得されます。

適している場合

  • ユーザーがクリックして操作でき、フローを体感できるインタラクティブな高忠実度のプロダクトモックアップです
  • PPTのように機能することを意図した1920x1080のHTMLスライドデッキです
  • 動画素材やコンセプトデモとして使用されるタイムライン駆動のモーションデザインです
  • 印刷品質のインフォグラフィックとデータドリブンな可視化です
  • 複数のデザイン方向性を並べて比較したり、Tweaksで調整したりする場合です

境界を知る

  • バックエンドを必要とする本番グレードのWebアプリやシステムは対象外です
  • SEO向けのWebサイトや動的なバックエンド駆動のシステムは、このスキルの対象外です

提供すべきもの

  • ブランドアセットチェックリストロゴ、プロダクト画像、UIスクリーンショット、カラーパレット、フォント、禁止事項について、公式チャネルを検索する前にまとめて確認します。
  • スタイルまたはブランドの参考資料気に入っているWebサイトのURL、スクリーンショット、または雰囲気を合わせたいプロダクトです。存在しない場合は、エージェントが明示した前提のもとで進めます。
  • 既存のデザインシステムまたはコードベースエージェントは、ゼロからハイファイデザインを行う前に、デザインシステム、UIキット、コードベース、Figmaが存在するかをまず確認します。

03 スキルの内部

huashu-design スキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. 3方向ゲートは100%必須です

    新しいビジュアルを生成するタスクは、ユーザーがスタイルやブランドを指定していても、実行前に3つの差別化されたディレクション案を提示する必要があります。適用される免除は3つの狭い例外のみです。

  2. ロゴは必須のアセットです

    デザインに認識可能なプロダクト名やブランド名が表示されている場合、公式ロゴの取得は任意ではなく必須であり、登場するプロダクトの数だけロゴを用意します。

  3. 実行品質が低いよりもプレースホルダーを優先します

    アイコンが見つからない場合はグレーのブロックとテキストラベルを使用し、下手に描いたSVGは使いません。データが見つからない場合は正直にコメントを付け、数値を捏造することはありません。

  4. 不要な装飾要素は入れません

    すべての要素はその存在意義を持たなければなりません。余白は、統計を捏造したり、すべての見出しにアイコンを付けたり、あらゆる場所にグラデーションを入れたりするのではなく、構成によって解決します。

  5. 典型的なAI臭いパターンを避けます

    紫のグラデーション、絵文字アイコン、色付きの左ボーダーアクセントを持つ角丸カード、AIが描いた人物・顔のSVGは、ブランド自体がそれらを使用している場合を除き、避けるべき典型的なAIビジュアルパターンとしてフラグが立てられます。

  6. Reactのスコープ制約

    複数のコンポーネントが衝突するため、const styles = {...}という名前のスタイルオブジェクトは決して使わないでください。コンポーネントはscriptタグ間でObject.assign(window, {...})を介してエクスポートする必要があります。

  7. アニメーションのエクスポートはデフォルトで音声を含みます

    Animation HTML はデフォルトで BGM と SFX の両方を含む MP4 として出力されます。ユーザーが明示的に無音を求めない限り、無音版は未完成の成果物として扱われます。

  8. デッキはデフォルトで概要ウォールを備えた複数ファイル構成

    スライドデッキはデフォルトで複数の HTML ファイルと概要用の assets/deck_index.html から構成されます。単一ファイル構成は、概要が明確に不要な5ページ以下の最小限のピッチに限られます。

04 実際に使う

Claude Code または Codex に huashu-design をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはあなたのエージェントに huashu-design を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

SKILL.md用の汎用skills CLI形式です。リポジトリによっては独自のパスを文書化している場合があります。

スキルに最初の UI デザインタスクを与える

このプロンプトを独自のコンテンツと制約に合わせて調整し、Claude Code または Codex で実行してください。

Example prompt
做个咖啡主题的 PPT

出典:SKILL.mdの例(原文のまま)。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの:

  • 納品前に Playwright スクリーンショットを取得し、コンソールエラーを確認します
  • AI が書いたコードにはインタラクションのバグが多いため、納品前にブラウザで結果を自分の目で確認します
  • アプリのプロトタイプで、詳細ビュー・主要ホットスポット・タブ切り替えの3つの Playwright クリックテストを実行し、pageerror がゼロであることを確認します
  • 可読性の下限を確認します:本文テキストは14px以上、ラベルは12px以上、コントラストは4.5:1以上

OpenDesignではhuashu-design を SKILL.md のリンクからインポートします:Plugins → Add → Skill → Import from link。その後、上部バーで選択してください。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Repository
github.com/alchaincyf/huashu-design ブランチ master
スキルファイル
SKILL.md 検証時にコンテンツチェックサムを記録; コミット a790f70
License
MIT LICENSE より。
リポジトリスター数
24,121 GitHub スナップショットは 2026-09-14 に alchaincyf/huashu-design リポジトリ全体から取得。huashu-design の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。

SKILL.md の中身

  1. 你是谁エージェントを、アートディレクター、ブランドリサーチャー、ビジュアル/モーションデザイナー、エンジニア、コピーライターの6役を担うスタジオとして位置づけます。
  2. 前提条件このスキルが対象とする出力タイプと、本番稼働の Web アプリは対象外であることを示します。
  3. タスクルーティング:一枚の表で入口を定めるタスクの兆候を正しい入口と参照ファイルに対応させる表です。
  4. コア原則 #0 ・事実確認は仮定より先にデザイン作業を始める前に、WebSearch によるプロダクト事実の確認を必須とします。
  5. コア哲学(優先度の高い順)既存のコンテキストを使う、構築前に合意する、バリエーションを示す、プレースホルダーを優先する、余分な装飾を避ける、AI 特有の凡庸さを避けるという6つの順序づけられた原則です。
  6. デザイン方向アドバイザー(フォールバックモード)実行前に3つの並行したデザイン方向を生み出す、必須の7段階プロセスを定義します。
  7. アプリ/iOS プロトタイプ専用ルール(クイックリファレンス)アーキテクチャ、画像、デバイスフレーム、クリックテストに関する、モバイルアプリのプロトタイプ向けの具体的な優先ルールです。
  8. ワークフローチェックポイント、ゲートファイル手順、質問テンプレートを備えた番号付きの標準ワークフローです。
  9. 例外処理曖昧な依頼、質問への拒否、矛盾するコンテキスト、厳しい締切に対する、あらかじめ定義されたフォールバック対応です。
  10. 技術上のレッドライン(references/react-setup.md 必読)交渉の余地がない React/Babel および Stage/Sprite の実装上の制約です。
  11. スターターコンポーネント(assets/ 配下)あらかじめ用意されたコンポーネント(deck_index.html、animations.jsx、ios_frame.jsx など)と、それぞれの使用場面を一覧化します。
  12. 成果物の要件命名規則、バージョン管理、ファイルの配置、そして最終的なブラウザ/Playwright 確認の要件です。
スキル自身による説明
花叔Design——HTMLで高精度プロトタイプ、スライド、アニメーション、ビジュアライゼーション、エキスパートレビューを作成。すべての新規デザインは100%、ユーザーが選択できるよう3つの初期案を提示します(スタイル/ブランド指定時も例外なし)。選択後に実装を進めます。トリガーワード:プロトタイプ作成、PPT、スライド、アニメーション、デザインスタイル、レビュー、HTMLページ作成、UI mockup、MP4/GIF書き出し、きれいなものを作る。プロダクションレベルのWebアプリ/バックエンドが必要なシステムには適用されません。

SKILL.mdのfront-matter説明文。完全なファイルは約33,602文字です。GitHubで全文を読む。

06 インストールする前に

huashu-design スキルに関するよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

このスキルは Claude Code でしか動作しませんか?

いいえ、このスキルはエージェントに依存しないものとして説明されており、Claude Code、Codex、Cursor、Trae、OpenClaw、Hermes Agent、あるいはマークダウンベースのスキルエージェントであれば動作します。サブエージェントの生成ができない、より弱いランタイム向けの縮退モードも用意されています。

Huashu Design

実際のUIデザインタスクでhuashu-designを実行する。

OpenDesign をダウンロードし、SKILL.md リンクから huashu-design をインポートし、上記のプロンプトを貼り付けて、結果の前に計画を確認してください。

ターミナル
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応