Huashu Design
alchaincyf/huashu-design — Type. Hit enter. A finished design lands in your lap.
Huashu Design は、AI エージェントに「PPT を作って」「iOS 原型を作って」「このロジックを動画にして」と頼むための Agent Skill。HTML を固定の成果物ではなく、プロトタイプ、スライド、動画、情報図、レビューのための作業媒体として使う。
npx skills add alchaincyf/huashu-designクリック可能な App / Web 原型
iPhone 15 Pro bezel、状態管理、複数画面遷移、Playwright クリック検証まで含めた単ファイル HTML を作る。
10-15 min · HTML · interactiveHTML deck と編集可能 PPTX
ブラウザで発表できる HTML deck を上流に置き、必要なら DOM から PowerPoint の native object へ変換する。
15-25 min · HTML + PPTX時間軸アニメーション
Stage と Sprite の時間片モデルで演出を作り、MP4、GIF、60fps 補間、BGM 付き動画へ導出する。
デザイン変体と Tweaks
並列比較や右下パネルの調整 UI で、色、密度、レイアウト、文案、アニメーションをブラウザ上で切り替える。
localStorage · no host dependency情報図と可視化
CSS Grid、正確な分栏、印刷級タイポグラフィで、PDF、PNG、SVG へ出せるビジュアル資料を作る。
10 min · PDF / PNG / SVG5 次元の専門家レビュー
哲学一致性、視覚階層、細部実行、機能性、革新性を 0-10 点で見て、Keep / Fix / Quick Wins に落とす。
radar chart · repair listこの skill の主戦略は「最初から完成品を出す」ではない。まず仮説、未解決点、placeholder、reasoning を見せ、安い段階で方向修正する。
design system、ブランド規範、既存画面、codebase、参考 URL を確認する。
受 audience、tone、flow、素材不足を HTML コメントや placeholder で明示する。
灰色ブロックの段階でも見せる。方向違いはこの時点が一番安い。
2-3 個の次元で変体を出し、Tweaks で調整できるようにする。
Playwright やブラウザ目視で白画面、崩れ、操作不能を潰して渡す。
「かっこよくして」だけでは作らない。5 流派 × 20 種のデザイン哲学から、異なる系統の 3 方向を選んで見せる Fallback Advisor に入る。
紫グラデ、emoji アイコン、丸角カード量産、Inter display、根拠のないブランド色などを避ける。良い hi-fi は既存 context から生える、という前提に寄せる。
具体ブランドを扱う時は、記憶で色や雰囲気を当てにいかない。Logo、製品写真、UI screenshot を一等市民として集め、足りない時は止まって聞く。
| 優先度 | 資産 | なぜ重要か | 失敗パターン |
|---|---|---|---|
| 必須 | Logo | ブランド識別の根。あるなら必ず使う。 | 似た文字組みや SVG 風装飾で代替する。 |
| 高 | 製品図 / UI screenshot | ハードウェアなら製品、SaaS なら UI が主役になる。 | CSS の抽象図形で「それっぽい製品」を描く。 |
| 補助 | 色値 / 字体 / 気質語 | 識別済み素材を支えるための補助規範。 | 色だけ抽出して「ブランドらしさ」を作った気になる。 |
手元の logo、製品図、UI、色、字体、brand guideline を一括確認。
公式ブランドページ、press kit、製品ページ、store screenshot を探す。
SVG/PNG、公式 HTML、社交 avatar、製品 hero image を保存する。
色値、解像度、出典、画質、scene fit を検証して候補を絞る。
brand-spec.md に資産、色、字体、禁区、気質を固定する。
huashu-design/
├── SKILL.md # agent が読む主手順
├── README.md # ユーザー向けの入口
├── assets/ # starter components
│ ├── animations.jsx # Stage / Sprite / Easing
│ ├── ios_frame.jsx # iPhone 15 Pro bezel
│ ├── deck_stage.js # HTML slide engine
│ ├── design_canvas.jsx # variations grid
│ └── bgm-*.mp3 # scene-based music
├── references/ # task-specific deep dives
├── scripts/ # export / verification tools
└── demos/ # capability showcases編集可能 PPTX が必要な場合は、完成後に変換を足すのではなく、最初の HTML から PowerPoint 変換向け制約で書く。本文は p / h1-h6 に入れ、複雑な SVG、gradient、web component を避ける。
- 短時間で見せられる高保真プロトタイプがほしい
- スライドや動画を、対話で生成して何度も直したい
- デザイン方向を複数見比べて選びたい
- コード寄りの agent 環境で、GUI を開かずに制作したい
- 本番 Web アプリケーションやバックエンド付きシステム
- Figma のような完全なレイヤー編集体験
- 3D、物理演算、粒子など Framer Motion 以上の複雑演出
- ブランド context がまったく無いまま 90 点の hi-fi を求める仕事