スキル

Huashu Design:一文で納品できる HTML デザインを手に入れる

アシスタントでクリック可能なプロトタイプや講演用スライドを生成したい人向け。公式の npx で入れ、インストール先にサブディレクトリがあり SKILL.md だけではないことを先に確認すること。

公式ソース · huashu-design

インストール

npx skills add alchaincyf/huashu-design

誰向けか

アシスタントで一文を投げて納品できるデザインを受け取りたい人向け。公式の文言:あなたの agent に一文を打ち、納品できるデザインを受け取る。リポジトリのタイトルは、これを HTML ネイティブのデザイン skill と位置づけ、高忠実度プロトタイプ、スライド、アニメーションに加え、二十のデザイン哲学、五次元チェック、MP4 書き出しをカバーすると述べている。

より合うのは、すでに一文の要件(クリック可能なプロトタイプを作る、または講演できるスライド一式)があり、本機で npx skills add を実行できる人。口頭で話すだけで、インストールディレクトリが揃っているか確認するつもりがない人には向かない。

始める前に、公式のインストールコマンドを実行できる必要がある。公式は agent 横断で通用し、いくつかの環境に入れられると書いている。その一覧を排他的な範囲だと解釈しないこと。

3 分で最初の試行を終える

npx の主経路だけを使う。最初はインストールが揃っているかを確認してから、ファイルを生成するかどうかを決める。

前提条件:本機に npm/npx があること。最初の試行では MP4 を書き出さない。未確認のパスにファイルを書かない。

インストール場所:ワークスペースで次を実行する:

npx skills add alchaincyf/huashu-design

入れ終わったら原文どおりインストールディレクトリを一度見る。例:~/.claude/skills/huashu-design/。SKILL.md だけで、それらのサブディレクトリが無い場合、skills CLI が古すぎる(≤1.5.15 には単一ファイルしか同期しない欠陥があり、1.5.19 で修正済み)。先に CLI を上げてから続ける。サブディレクトリを手で補わないこと。

公式リポジトリ:

https://github.com/alchaincyf/huashu-design

低リスクのきっかけ:ディレクトリが揃ったら、先に動画を書き出すのではなく、一文でアシスタントにインタラクティブプロトタイプの確認準備をさせる。原文でのインタラクティブプロトタイプの納品は、単一ファイル HTML、本物の iPhone bezel、クリック可能、Playwright で検証、およそ 10–15 分。生成前に HTML がどのパスに落ちるかを確認する。生成後はローカルで開き、Playwright 検証を終えてから納品物として扱う。

成功の合図:インストールディレクトリが SKILL.md だけではないこと。かつ、未確認の書き出しファイルをまだ書いていないこと。

利用事例

事例一:クリック可能な App / Web インタラクティブプロトタイプ。納品は単一ファイル HTML、本物の iPhone bezel 付き、クリック可能、Playwright で検証。すでに一画面の流れがあり、先に高忠実度プロトタイプを見たい人向け。先に出力パスを確認してから生成する。検証が通る前に他人へ送らない。

事例二:講演スライド。原文:HTML deck(ブラウザで講演)に加え、編集可能な PPTX(テキストボックスは保持)、およそ 15–25 分。すでにアウトラインがあり、講演もでき、文字も直せるものが必要な人向け。PPTX はファイル書き込みなので、生成前に保存場所を確認する。生成後はローカルで開いてテキストボックスを照合してから配布する。

利用上の境界

タイムラインアニメーションは MP4(25fps / 60fps 補間)、GIF(palette 最適化)、BGM を書き出す。およそ 8–12 分。ファイルは大きいので、最初の試行にしない。

インストールコマンドは npx skills add alchaincyf/huashu-design だけ。ディレクトリが揃っていないとき、原文が指すのは CLI のバージョン問題だけ。他のインストーラを作らないこと。

二十のデザイン哲学と五次元チェックはリポジトリのタイトルにしか出てこない。このページが引用した本文には項目が列挙されていない。哲学名やチェック表を補って書かないこと。

出ていないスキルパスを補って書かない。「どれでも入れられる」を、各環境の手順まで書いてあるという意味に取らないこと。