stageshow: マーケ用の「本物っぽい偽 UI」をエージェントに React で作らせる
X のデザインを率いる Benji Taylor が公開した stageshow スキルは、ヒーローデモ・フィーチャーカード・ベントーグリッドなどの「製品画面に見えるイラスト／ループ動画」を、普通の React コンポーネントとして作らせる。入れ方は npx skills add benjitaylor/skills --skill stageshow の1行。
解決する問題
- LP やドキュメント用にアプリ画面のモックを頼むと、セルに本物の文章を詰め込みすぎる・ウィンドウ全体をカードに縮小する・動きに原因がない、といった「エージェント特有のダサさ」が出る
- 手で作ると小さな判断が百個あり、毎回時間がかかる
やり方
- どのエージェントでも次を実行する（Claude Code／Codex／Cursor ほか）
bash
npx skills add benjitaylor/skills --skill stageshow- 最初は小さく頼む。「1つの操作・1つの製品・1つのサイズ」に限る
ホームページのヒーロー用に、小さなループデモを。
誰かが issue をチームメイトにアサインする様子。- エージェントは近いお手本を起点に画面を作り、
film.mjsでコマ撮りして自分で直す。成果物はプロジェクトに置ける通常の React コンポーネント
スキルが教えること（要約）
- 偽物 UI が失敗しやすい型: 詰め込みすぎ／スカスカ／ボックス化／平坦／ブランドが出ない
- 作業の前に媒体・見た目・ストーリー・お手本・実文字の量・振り付け・リハーサルを決める
- キット（ウィンドウ・電話・カーソルなど）は見た目を押し付けず、形と動きの土台だけ渡す
- 自社のデザイントークンをキットに写せば、本番に並べても違和感が減る
注意点
- 一発では決まらないことが多い。作者自身も数ラウンドのフィードバックを前提にしている
- 「味」は作者の好みが入っている。直した指摘はそのままスキルへ追記させると次回から効く
- イラストや写真が必要なものは向きにくい。描画そのものではなく、画面の組み立てとモーション向け
関連
- デザインシステムを MCP サーバーではなくスキルにする: package.json の版のリポジトリを手元に取り、README を順にたどらせる
- AI 向け DESIGN.md は「値」ではなく「なぜ・いつ」を書き、守らせる部分は lint にする
出典
- @sumika45379 · 2026-11-05
- Benji Taylor「Stageshow」: benji.org/stageshow
- GitHub: github.com