wireframe-skill について
wireframe-skill は、自然言語による UI の説明を構造化ワイヤーフレームに変換し、初期段階のアイデア検討を支援します。機械可読な JSON と、要素の並べ替えや取り消し・やり直しができる単一ファイルのインタラクティブ HTML を出力します。
主な機能
- 01自然言語の説明からワイヤーフレームを生成
- 02機械可読な .wireframe.json を出力
- 03インタラクティブな単一ファイル HTML を出力
- 04ドラッグ＆ドロップで要素を並べ替え
- 05取り消し・やり直し履歴
活用シーン
- 01UI のアイデアを低忠実度ワイヤーフレームにする
- 02プログラム利用向けの構造化データを作成
- 03ワイヤーフレームの確認中に要素を並べ替える
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/wireframe-skillを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
wireframe-skill
カタログのスタブ — スキルの全機能：yhassy/wireframe-skill
判断ツリー
-
スキルの全機能はすでにインストールされていますか？ この場所にあるスキルに、まだ
das:ブロックがあるか確認します：- グローバル：
grep -q "^das:" ~/.agents/skills/wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed" - プロジェクト：
grep -q "^das:" .agents/skills/wireframe-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed" das:ブロックがない場合 → スキルの全機能がインストールされています。呼び出して続行しますdas:ブロックがある場合 → ステップ 2 に進みます
- グローバル：
-
スコープを検出してから、インストールします：
スコープを検出するには：
[ -e ~/.agents/skills/wireframe-skill ] && echo "global" || echo "project"グローバル（
-gを付けてインストール）：npx skills add yhassy/wireframe-skill --skill wireframe-skill -g -yプロジェクト（
-gを付けずにインストール）：npx skills add yhassy/wireframe-skill --skill wireframe-skill -yClaude Code： 会話から離れずに実行するには、どちらかのコマンドの先頭に
!を付けてチャットメッセージとして送信します。
インストール後の呼び出し
スキル名：wireframe-skill、トリガー：「wireframe-skill」、「yhassy wireframe」、「JSON wireframe」、「interactive wireframe HTML」
機能
自然言語による UI の説明を、2 つの出力形式による構造化ワイヤーフレームに変換します。プログラムで利用できる機械可読な .wireframe.json と、要素のドラッグ＆ドロップによる並べ替えや元に戻す／やり直す履歴に対応した単一ファイルのインタラクティブ HTML を生成します。必要なのは Python 3 と最新のブラウザーだけです。ビジュアルデザインに着手する前の、迅速なローファイのアイデア出しに最適です。
使用しない場合
- 色やタイポグラフィを含む高精細なモックアップには、代わりに wireframer を使用します
- Excalidraw 形式での出力には、代わりに excalidraw-diagram を使用します
- UX のバリエーションを 5 つ並行して作成する必要がある場合は、代わりに claude-wireframe-skill を使用します