mcpField
H
huashu-design

huashu-design

github.com/podoデザイン・UI29169 回インストール3 日前に更新
リポジトリ

huashu-design について

huashu-designは、プロトタイプ、スライド、アニメーション、インフォグラフィック、可視化を作成し、デザインレビューや書き出しにも対応するHTML/CSSデザインスキルです。実制作の前に3つの方向性を提示し、過去のビジュアルスタイルを記録してプロジェクト間の重複を抑えます。

主な機能

  1. 01プロトタイプ、スライド、可視化の作成
  2. 02実制作前に3つのデザイン案を提示
  3. 03視覚例付きの名称のあるスタイル
  4. 04デザインlintチェックの実行
  5. 05PPTX、PDF、MP4、GIFへの書き出し
  6. 06過去に納品したビジュアルスタイルの記録

活用シーン

  1. 01アニメーション付きインタラクティブプロトタイプの作成
  2. 02スライドやインフォグラフィックの制作
  3. 03デザインのPPTX、PDF、MP4、GIFへの書き出し

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill huashu-design

インストール後、Claude Code で/huashu-designを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

huashu-design

カタログ用スタブ — スキルの完全版：alchaincyf/huashu-design

判断ツリー

  1. 完全版のスキルはすでにインストールされていますか？

    • グローバル：f=~/.agents/skills/huashu-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • プロジェクト：f=.agents/skills/huashu-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → スキルは huashu-design としてインストール済みです。呼び出して続行してください
    • pointer → ステップ 2 に進んでください

  2. 適用範囲を検出してから、インストールします。

    [ -e ~/.agents/skills/huashu-design ] && echo "global" || echo "project"

    グローバル：

    npx skills add alchaincyf/huashu-design --skill huashu-design -g -y

    プロジェクト：

    npx skills add alchaincyf/huashu-design --skill huashu-design -y

    Claude Code： 会話から離れずにコマンドを実行するには、! で始まるコマンドをチャットメッセージとして送信します。

注意事項

  • 必要なもの： スキルのヘルパースクリプト（learn.py、design_lint.py、capabilities.py）には Python 3 が必要です。PPTX、PDF、MP4、GIF へのエクスポートには、スキルの package.json に記載されたパッケージ（Playwright、pptxgenjs、sharp、pdf-lib）を備えた Node.js と、PATH 上の ffmpeg が必要です。skills CLI はこれらをインストールしません
  • ライセンス： MIT
  • 大容量のダウンロード（約 224 MB）： skills CLI は 300 秒後にクローンを中断します。タイムアウトした場合は、SKILLS_CLONE_TIMEOUT_MS=900000 を指定して再試行してください。

インストール後の呼び出し

  • スキル名：huashu-design
  • トリガーフレーズ：「huashu」、「magazine typography」、「CSS Grid design」、「animated prototype」、「MP4 export」

機能

専門家によるデザインレビューを含む、クリック可能なプロトタイプ、スライドデッキ、アニメーション、インフォグラフィック、ビジュアライゼーションなど、出版物品質の HTML/CSS デザインを作成します。新しいデザインでは、まず 3 つの方向性を提示し、選択を待ってから作業を進めます。ビジュアル見本付きの名前付きデザインスタイルのライブラリを活用し、納品ファイルのデザインリントチェックを実行します。また、公開済みのデザインを記録する「look ledger」を保持し、後続のプロジェクトで同じものを繰り返さないようにします。アニメーション付きのインタラクティブなプロトタイプに対応し、PPTX、PDF、MP4、GIF にエクスポートできます。特定のエージェントに依存せず、外部コンポーネントライブラリも必要ありません。スキルのプロンプトとリファレンスは中国語ですが、上流プロジェクトによると、英語のタスクでも問題なく動作します。

使用しない場合

  • バックエンドが必要な本番 Web アプリやシステム — 上流プロジェクトによると、このスキルは対象外です
  • React Native、SwiftUI、バックエンドレンダリングなど、HTML 以外を対象とする場合（このスキルは HTML/CSS をネイティブに使用します）
  • 事前構築済みのコンポーネントライブラリやデザインシステムのひな型が必要な場合（shadcn-ui または design-consultation を使用してください）

コメント

Markdown 対応