Stageshow公開、AIに製品の見せ画面を作らせるskill　手本を写し動きを撮る

Benji Taylor氏は、コーディングエージェントに製品紹介用の「見せかけの画面」を作らせるskill「Stageshow」を公開した。ホームページの冒頭に置く短い操作の動画や、機能を紹介するカードの絵を、エージェントがReactの部品で組み立てる。ライセンスはMITで、Claude CodeやCodexなどのエージェントに1行のコマンドで入れられる。自分のサービスの紹介ページを手早く整えたい個人や小さなチームに向いた道具だ。GitHubの履歴では、Stageshowを足したコミットは日本時間の10月31日朝で、確認した時点でリポジトリのスターは438だった。

詰め込みすぎの画面を直す

Taylor氏は紹介の記事で、今のモデルはこうした画面を作れるが、出来上がりが雑で詰め込みすぎになりがちだと書く。そこを埋めるのがこのskillの狙いだという。

skillの本体は、失敗の形を5つに分けて示す。全部の行に本物の文字を入れて詰め込む「too much」、灰色の箱だけの「wireframe」、窓をそのまま縮めて箱に入れた「boxed」、どれも同じ重さの「flat」、頼んだ雰囲気が出ない「bland」だ。直し方として、話の中心になる所にだけ本物の言葉を置き、ほかは仮の線にする、と決めている。本物の文字は1画面に3〜7か所が目安で、窓は舞台の3分の2以上を占めて端からはみ出させる。窓を四方に余白を残して浮かせるのは、出来が悪い形として挙げている。

手本を写し、撮って確かめる

作り方は7つの段階に分かれる。置き場所と大きさ、見た目、3〜5の場面からなる筋書きを先に決め、近い手本の例を写してから自社の製品に置き換える。手本は、AIの回答、表の編集、カレンダーのドラッグ、スマートフォンのスワイプなど数十ある。Figma、Linear、Slack、Notion、Gmailといった知られた製品をまねた例もあるが、skillは操作の見せ方だけを借り、他社の見た目は借りないよう求めている。

大きさの目安も具体的だ。文章の横に置く冒頭の動画は720×340ほど、カード1枚なら400×300ほどで作り、スマートフォンの幅の358でも見られる別の配置を必ず用意する。自社のデザインの色や文字、角の丸みがあれば、それを部品の値に当てはめ、実物の横に置いても作り物に見えないようにする。

動きは、舞台の状態を台本が1場面ずつ変える形で書く。カーソルは部品の名前を狙って動き、押した所が見える。大事な所に寄って戻るカメラの部品もある。

最後にエージェント自身が動きを撮る。付属のfilm.mjsが動画をコマに分けて1枚に並べ、測れる不具合を報告する。Taylor氏は、エージェントの確かめはコードを読み返すか止まった画面を撮るだけになりがちで、途中の動きの崩れを見落とすと説明している。一瞬だけ部品が跳ねるような崩れはjumps.mjsで、文字が枠に収まっているかはlayout.mjsで調べる。

入れ方と使う時の注意

入れ方は「npx skills add benjitaylor/skills --skill stageshow」だ。出来上がるのは普通のReactの部品なので、ほかのコードと同じように直せる。手元で例を見るにはNode 20.19以上が要り、「npm run dev」で全部の手本と、悪い例と良い例を並べた見本を開ける。

Taylor氏自身、1回で決まるとは限らず、多くは何度か直しを頼むと書いている。付属の確かめは不具合を見つけるもので、つまらない案は見抜けないとも認める。絵やイラストは描けないので、手で作って入れる方がよいという。中の決まりの多くは自分の好みだとも断っている。モデルの見る目は新しい版ごとに良くなっているので、このskillが役に立つのはしばらくの間だろう、という見方も添えている。

編集部の見方

小さなチームの製品ページは、画面の切り抜きを貼っただけになりやすい。Stageshowは、良い見せ方の判断を文章と手本にしてエージェントに渡す試みだ。中身の多くは作者の経験を書き起こしたもので、使う側は手本と見比べて直す手間を残しておきたい。Taylor氏も勧めるとおり、まずは1つの操作、1つの大きさの小さな動画から試すのが手堅い。直した点をskillに書き足していけば、次からの画面にもその直しが効く。