AIに製品紹介の画面イラストを作らせるスキル「Stageshow」が話題。完成した動きを撮影して自己チェック

the Head of Design at X just open-sourced his taste (a skill that makes your agent’s UI look production-grade)

I broke down how it works ↓

Benji wrote down the hundred small decisions he makes when he designs product UI by hand, so an agent can make them too

the skill is built around one sentence:

“it reads as a real product, simplified to what the viewer needs, framed with intent, and every motion has a cause”

it names the 5 ways agent-made UI goes wrong:
> too much, real words in every cell, packed tight
> too little, a wireframe that doesn’t read as a product
> boxed, the whole app shrunk into a card like a screenshot
> flat, everything has the same weight
> bland, your brand’s style never shows up

then the agent works in 7 steps, and most of them happen before it writes any code:
1. medium: still or animation, where it sits, what size
2. look: light, dark, blueprint or glass, one accent
3. story: 3 to 5 beats
4. examples: start from the closest of dozens of gold examples
5. screen: a few real words, placeholder lines for the rest
6. choreograph: overlapping beats and a loop that ends where it began
7. rehearse: film it, read every frame, fix what it finds

the agent films its own work, a script creates every frame on a sheet and monitors one-frame jumps and text that doesn’t fit its box, which a screenshot can’t show

it reads your design tokens too, so the UI uses your real colours, fonts and corner radiuses

he built it by giving the same short prompt to 2 new agents with no other context, one with the skill and one without, then comparing the results side by side

when something looked off, he wrote down what was wrong, updated the skill and ran the whole test again, instead of fixing it by hand

works in Grok Build, Claude Code, Codex and Gemini:
npx skills add benjitaylor/skills –skill stageshow

Benji says most results still take him a few rounds of feedback, and the first pass is already a big step up from what an agent makes on its own

— Shann³ (@shannholmberg) November 1, 2026

無料で使えますか？

スキル本体はMITライセンスで公開されています。ただし、同梱のアプリアイコンはこのライセンスの対象外で、製品名やロゴの権利はそれぞれの持ち主にあります。AIエージェントの利用料は別です。

デザインの知識やコードの知識は必要ですか？

作られるのはReactのコンポーネントなので、組み込みにはReactを扱える環境が要ります。デザインの判断はスキルが手伝いますが、作者も最後は人が見て確かめる必要があるとしています。

写真やイラストも描けますか？

作者によると、スキルは絵を描けません。イラストや写真は別に用意して追加します。

実際の製品を操作するツールですか？

違います。公式の説明では、製品らしく見せるために作るイラストで、実際のアプリの操作を自動化するものではありません。

the Head of Design at X just open-sourced his taste (a skill that makes your agent’s UI look production-grade)

I broke down how it works ↓

Benji wrote down the hundred small decisions he makes when he designs product UI by hand, so an agent can make them too

the skill is built around one sentence:

“it reads as a real product, simplified to what the viewer needs, framed with intent, and every motion has a cause”

it names the 5 ways agent-made UI goes wrong:
> too much, real words in every cell, packed tight
> too little, a wireframe that doesn’t read as a product
> boxed, the whole app shrunk into a card like a screenshot
> flat, everything has the same weight
> bland, your brand’s style never shows up

then the agent works in 7 steps, and most of them happen before it writes any code:
1. medium: still or animation, where it sits, what size
2. look: light, dark, blueprint or glass, one accent
3. story: 3 to 5 beats
4. examples: start from the closest of dozens of gold examples
5. screen: a few real words, placeholder lines for the rest
6. choreograph: overlapping beats and a loop that ends where it began
7. rehearse: film it, read every frame, fix what it finds

the agent films its own work, a script creates every frame on a sheet and monitors one-frame jumps and text that doesn’t fit its box, which a screenshot can’t show

it reads your design tokens too, so the UI uses your real colours, fonts and corner radiuses

he built it by giving the same short prompt to 2 new agents with no other context, one with the skill and one without, then comparing the results side by side

when something looked off, he wrote down what was wrong, updated the skill and ran the whole test again, instead of fixing it by hand

works in Grok Build, Claude Code, Codex and Gemini:
npx skills add benjitaylor/skills –skill stageshow

Benji says most results still take him a few rounds of feedback, and the first pass is already a big step up from what an agent makes on its own

— Shann³ (@shannholmberg) November 1, 2026