什么值得做
GitHub 开源项目 · 11-6 写
benjitaylor/skills · benjitaylor

X 的设计负责人发了一条推,一份教 AI 画「假界面」的 skill 一周涨到 2000 星:能学的是写法,学不来的是那条推

它是什么 一份给 Claude Code、Codex、Cursor 这类编程 agent 用的 skill,教它们用 React 做像真产品的假界面插画和动画,做完还会逐帧拍照自己检查。

为什么火了 作者是 X 和 SpaceXSI 的设计负责人,发了一条前后对比视频推文(155.9 万浏览、2.6 万收藏),再被中文大号和 Instagram、YouTube 搬运号接力转发;装 skill 又只要一行命令。

C你可以怎么跟 别移植它,学它的骨架:挑一个 AI 做得很丑的窄场景(应用商店截图、分享卡片、图表),写成一句原则加五种翻车加好坏对照范例,配一个能量化的自查脚本,用前后对比视频去找搬运号发。

C 级:起量靠的是作者身份和他的粉丝,跟进者拿不到;已有的 Svelte、JS、中文移植版全是 0 到 5 星,同题目的无名项目只有 465 星。写 skill 的方法值得学,照着跟不划算。 已公开 / 被广泛讨论
数据(每天更新) · 建库 2026-10-26 · 2,422 星
GitHub · 星数
01k2k11-0211-0411-0511-0611-082.4k
数据 2026-11-02 → 2026-11-08(7 天,7 次观测)。10-28 以前的点来自 deeply / 存档补录,不是每天都有

Stageshow 是 Benji Taylor 放在 GitHub 上的一份 agent skill,教 Claude Code、Codex、Cursor 这类编程 agent 做官网首屏那种「假产品界面」动画。它 11 天拿了 2,191 星、装了将近 1.3 万次。东西做得确实讲究,但星数几乎全是作者本人带来的:他是 X 的设计负责人,X 上有 23 万粉丝。想让自己的开源项目拿 star 的人,能从它身上学到一套写 skill 的方法;照着它再做一个,基本拿不到星。

一条 155 万浏览的推

2026 年 10 月 31 日 18:08(UTC),Benji Taylor 在 X 上发了一条推,正文只有两行:

「Stageshow:一个帮你的 agent 做出更好的假 UI 静图、动画、bento 网格的 skill。」 npx skills add benjitaylor/skills --skill stageshow

下面挂了一串前后对比的视频:同一句提示词,不装 skill 的 agent 做出来是什么样,装了又是什么样;还有他用它复刻的 Figma、Gmail、Finder、Spotify 里的小场景。到 11 月 6 日,这条推 155.9 万浏览、1.43 万赞、2.63 万收藏(fxtwitter 公开接口,11-06)。收藏差不多是赞的两倍,看的人是当工具存下来的,不是点个赞就走。

仓库 10 月 26 日就建好了,10 月 30 日才第一次提交。发推之后它的星是这么涨的(GitHub 每日星数):

日期星数当天新增
11-02419—
11-03771+352
11-041,330+559
11-051,863+533
11-062,085(当天晚些时候 2,191,157 个 fork)+222

装的人比点星的人多得多:skills.sh 上 benjitaylor/skills/stageshow 装了 12,886 次(11-06),大约是星数的 6 倍。大多数人一行命令装完就走,没回 GitHub 点星。

它到底是什么

一份 SKILL.md,加上一套 React 小部件、几十个范例,还有几个检查脚本。作者在介绍页 benji.org/stageshow 开头写得很实在:

「现在大多数好模型不用专门的 skill 也能做这个,但做出来的东西常常显得潦草、用力过猛,Stageshow 补的就是这块。」

用法是只提一个很小的需求:「一个产品、一个动作、一个尺寸」,比如「给官网首屏做个循环小动画:有人把一个工单分配给同事」。agent 读完 skill,从最接近的范例改起,做完自己「拍片」,看到问题再改。交出来的是一个普通 React 组件,可以直接放进官网,不是渲染好的 mp4。

里面有三样东西值得看:

  • 一句话原则,外加五种翻车。 「看起来是真产品,只简化到观众需要的程度,构图有意图,每个动作都有起因。」翻车的五种写法是:太满(每格都填真字)、太空(像线框图)、装进盒子(整个窗口缩成卡片,像贴了张截图)、太平(什么都一样重)、太淡(提示词里要的风格没出来)。后面跟着七步流程。
  • 会自己拍片检查。 film.mjs 把整段动画逐帧排成一张拼图,报告能量化的问题;jumps.mjs 找拼图里看不出来的单帧跳变;layout.mjs 查文字和按钮有没有溢出框。大多数设计 skill 只给 agent 文字规则,这个让 agent 去看动画中间的每一帧。
  • 好坏并排的 playground。 同一个东西做坏和做好放在一起。作者的说法是:「别把整个 App 缩成一张卡片」这种话,人人都点头、人人都会忘,两个版本并排一摆就忘不掉了。

作者也提前说了:一次不一定做对,他自己做一个 demo 通常也要反馈几轮。

星是从哪来的

第一,作者本人。 Benji Taylor 现在是 X 和 SpaceXSI 的设计负责人,之前在 Coinbase 带 Base 的设计,再之前创办的 Family 钱包被 Aave 收购;今年 3 月他加入 X 时,马斯克亲自发帖欢迎(Times of India 报道过)。后来几乎所有转发和报道的标题都从他的头衔写起:「Head of Design at X just shared…」。大家转的是「X 设计负责人的品味」,具体是什么功能倒在其次。

他在这个圈子也不是新人。同一个账号下的 agentation(给 agent 的可视化反馈工具,今年 1 月)有 5.3k 星、skills.sh 上装了 2.09 万次;liveline 有 1k 星。设计工程圈的另一位头部 Emil Kowalski(自己的 skills 仓库 5.4 万星)在推下面留了一句「Such a great idea」。

第二,中文圈和搬运号接力。 11 月 1 日,中文 X 上的歸藏 @op7418(18.7 万粉)发推介绍,3.65 万浏览;@shao__meng 同一天写了中文解读;台湾的 Threads 账号、中文 Instagram reel 跟着讲。Instagram、Facebook 上冒出一批「评论 LINK,我把仓库发你」的引流帖,YouTube Shorts 上是「评论 UI 我发你链接」。AlphaSignal 11 月 5 日也报道了。星数的高峰落在 11-04、11-05,不在发推当天,和这波二次传播、11-04 发的 v1.1.0 时间对得上。不过 11-02 之前没有逐日数字,高峰后移是推断。

第三,装一个 skill 已经只要一行命令。 npx skills add 走的是 Vercel 的 skills.sh 安装器,Claude Code、Codex、Cursor、Gemini、Grok Build 都能装。推下面有人评论:「that install line is the real product」(那行安装命令才是真正的产品)。「AI 做的界面一股 slop 味」早就是共识,taste-skill、impeccable 这类「给 agent 品味」的 skill 都是十万星级别,用户已经习惯给大佬的品味 skill 点星。

第四,演示本身就是广告。 这个 skill 的产物就是好看的产品动画,前后对比视频不用解释,放到 X 和 Instagram 上自己就能传。

谁在做一样的事

项目规模(11-06)和 Stageshow 比
nextlevelbuilder/ui-ux-pro-max-skill14.6 万星,装 44 万次风格库、配色库,铺得广但不深
Leonxlnx/taste-skill11.1 万星,装 74 万次管整站前端审美,不专做产品插画和动画
pbakaus/impeccable10.4 万星,装 39 万次一套设计词汇和打磨、审查命令
heygen-com/hyperframes7.9 万星把 HTML 渲染成视频的通用框架
emilkowalski/skills5.4 万星,装 42 万次设计工程、动画审查,没有部件库和拍片工具
Vincentwei1021/video-shotcraft1.7 万星用 Remotion 做产品宣传片,出 mp4
shadcn-labs/snapcn577 星Remotion 用的产品演示组件库
Alexwtlf/agentic-product-demo465 星同样是「让 agent 做产品演示」,走视频路线,没有名人背书

最后一行最能说明问题:今年 8 月就有人做了几乎同一个题目,465 星。Stageshow 的 2,000 星在同类里其实不算多,它的特别之处是星全部挤在一条推之后。

照着它做的人已经有了:11 月 1 日的 Svelte 版(69 个场景全部移植)、11 月 2 日的纯 JS 版、11 月 5 日的中文 WorkBuddy 版,还有人把它原样打包进自己的 skill 合集;GitHub 上有 116 个 SKILL.md 提到它。这些仓库全部是 0 到 5 星。

如果是你

一句判断: 别照着做,学它的写法。这 2,000 星是作者的身份和那条推换来的,跟进的人拿不到;移植成别的框架、别的语言,已经有人试过,全是个位数星。

适合谁: 在某个具体场景里手上真有活、真踩过坑的开发者和设计师,比如做过很多 App Store 截图、OG 分享图、数据图表、PPT、邮件模板的人,能把「一百个小决定」写下来。

不适合谁: 没有自己的经验、只想换个框架把 Stageshow 再搬一遍的人;想做「整站审美」这种大题目的人,那里已经有好几个十万星项目。

怎么做:

  1. 挑一个 AI 做得明显很丑、又很具体的场景。Stageshow 管的是「营销用假界面」,它旁边的题目都还空着:应用商店截图、社交平台分享卡片、仪表盘图表、发布会式的功能对比图。
  2. 照它的骨架写:一句话原则、五种常见翻车、一套步骤、几十个好坏对照的范例。规则后面写理由。
  3. 一定配一个能量化的自查脚本(截图后量对齐、量溢出、量对比度),让 agent 能自己检查自己。这是它和多数 skill 拉开差距的地方,也是别人转发时最爱讲的一点。
  4. 支持 npx skills add 一行装好,README 第一屏放前后对比。

怎么获客: 发一条前后对比视频,同一句提示词、装和不装各一段,结尾放安装命令。你没有 23 万粉,所以要去借别人的号:中文的 AI 工具博主(歸藏这一类)、Instagram 和 YouTube 上那些「评论领链接」的 GitHub 速递号,他们天天缺素材,私信把视频发过去就行。再写一篇长一点的介绍页,方便媒体和搬运号直接照着写。

什么时候之前: 作者自己也承认,模型审美越来越好,这类 skill 早晚用不上。「给 agent 品味」这一波大概还剩几个月(推断),最好年底前发。

什么情况说明看错了: 你的对比视频发出去两周,速递号一个都没转,星停在两位数,说明场景不够痛、或者画面不够直观;反过来,如果 agentic-product-demo 这种没名气的同类在接下来一个月也涨起来了,说明题目本身就有需求,那就别绕开,直接做「Stageshow 没做好的那部分」。

GitHub 仓库 ↗

研究底稿:竞品表、获客证据、完整研究报告
竞品
名字在哪上线规模它和这家不同在哪
Leonxlnx/taste-skill开源2026-0211.1 万星,skills.sh 装 74 万次管整站前端审美,不专做产品插画或动画,没有拍片自查
pbakaus/impeccable开源2025 年底10.4 万星,装 39 万次通用的设计词汇和打磨、审查命令
emilkowalski/skills开源2026-035.4 万星,emil-design-eng 装 42 万次设计工程、动画审查的通用技能,没有部件库、金样例和拍片工具
nextlevelbuilder/ui-ux-pro-max-skill开源2025-12 前后14.6 万星,装 44 万次风格库式的设计智能,广而浅
Vincentwei1021/video-shotcraft开源2026-071.7 万星用 Remotion 做产品宣传视频,产出 mp4 而不是可嵌入的 React 组件
heygen-com/hyperframes开源2026-037.9 万星HTML 转视频的通用框架,不教产品界面构图
Alexwtlf/agentic-product-demo开源2026-08465 星同样做 agent 写产品演示,但走视频路线,也没有名人背书
shadcn-labs/snapcn开源2026-07577 星Remotion 产品演示组件库,不是 agent 工作流
Claude Design 等设计工具内置生成大厂功能在设计工具里出图,不是代码库里能改的组件
用户从哪来
  • 查实 作者本人 X 推文(名人或头衔效应):10-31 首发推文 155.8 万浏览、14,345 赞、26,306 收藏(fxtwitter);二次传播标题都用「Head of Design at X」
  • 查实 中文 X 大号转介绍:@op7418 歸藏(18.7 万粉)11-01 发推,3.65 万浏览;@shao__meng 11-01 写了中文解读
  • 查实 Instagram、Facebook、YouTube Shorts、LinkedIn 搬运号(评论领链接):IG p/DfNBd6RD_W_、reel DfSDoHXu7Te、DfNMg7HjeG8,YouTube shorts QHj4JEAgRYQ,LinkedIn noohelhadedy / stasbel
  • 查实 科技媒体和 newsletter:aicoder.com 10-31 报道;AlphaSignal(hermes-ai.net 转载)11-05 报道
  • 查实 skills.sh 一行安装或目录:skills.sh 上装了 12,886 次;推文里直接给安装命令
  • 查实 作者老项目积累的口碑:agentation 有 5.3k 星、装 2.09 万次;Emil Kowalski 在推文下评论

benjitaylor/skills(Stageshow)为什么跑出来

日期:2026-11-06 · 渠道:GitHub · 仓库:github.com/benjitaylor/skills

一句话

这个仓库目前只有一个技能 Stageshow:一份写给编程 agent 的 SKILL.md,外加 React 小部件、几十个「范例」和一个给动画逐帧拍照检查的脚本。它教 agent 做「假产品界面」:官网首屏动画、功能卡片、带光标的演示、bento 网格。它跑出来几乎全靠作者本人:Benji Taylor 是 X 与 SpaceXSI 的设计负责人,X 上有 23.2 万粉丝。他 10-31 发的一条演示视频推文有 155.8 万浏览、1.43 万赞、2.63 万收藏,之后被中文圈、Instagram、LinkedIn、YouTube Shorts 的搬运号二次分发。

基本数据

  • 2026-10-26 建库,10-30 第一次提交「Add Stageshow」,10-31 18:08 UTC 作者发推(GitHub API、fxtwitter)。
  • 星数,来自我们的 github 库 repo_day:11-02 是 419,11-03 是 771(+352),11-04 是 1330(+559,单日峰值),11-05 是 1863(+533),11-06 是 2085(+222)。11-06 GitHub API 实时是 2191 星、157 fork。
  • 装机量:skills.sh 搜索接口显示 benjitaylor/skills/stageshow 装了 12,886 次(作者主页显示 13.3K,11-06 抓取),约等于星数的 6 倍。大多数人是直接 npx skills add 装的,没有回 GitHub 点星。
  • 版本:11-04 发 v1.1.0(新增 Button/Card/Divider/Kbd/Draft 等部件,检查更严),11-05 发 v1.1.1(修 issue #6)。作者在持续维护。
  • 没有可疑刷星信号:suspect 为空,fork/星约 7%。
  • 建库不满 60 天,所以没上 GitHub trending(trending 规则见库说明),起量和 trending 无关。

它凭什么起来的

1. 名人效应:作者本人就是分发渠道(已证实)

  • Benji Taylor 自己的介绍(benji.org):现任 SpaceX 旗下 X 与 SpaceXSI 设计负责人;之前在 Coinbase 带 Base 的设计;再之前创办 Family 钱包,后被 Aave 收购(LinkedIn、yespress)。他 2026-03 加入 X 时,马斯克亲自发帖欢迎(Times of India)。
  • 首发推文 x.com/benjitaylor/status/2116593247854453244:155.8 万浏览、14,345 赞、745 转、26,306 收藏(fxtwitter,11-06)。收藏几乎是点赞的两倍,说明大家是当工具存下来以后用,不只是点个赞。
  • 媒体和二次传播的标题几乎都拿他的头衔开头,写的是「Head of Design at X just shared…」(LinkedIn 上 noohelhadedy、stasbel 两篇;Instagram 多个 reel;aicoder.com 10-31 的新闻;AlphaSignal/hermes-ai.net 11-05 的新闻)。很多人转它,是因为「X 设计负责人的品味」,不是因为某项功能。
  • 他在这个圈子有过成功先例:同作者的 agentation(给 agent 的可视化反馈工具,2026-01)有 5.3k 星、skills.sh 上 2.09 万次安装;liveline 有 1k 星。他已经被认作「做 agent 设计工具的人」。设计工程圈的头部 Emil Kowalski(自己的 skills 仓库 5.4 万星)在推文下评论「Such a great idea」。

2. 二次分发:中文圈和「评论领链接」搬运号(已证实)

  • 中文 X:歸藏 @op7418(18.7 万粉)11-01 发推介绍,3.65 万浏览、252 赞;meng shao @shao__meng 11-01 写了中文解读。台湾的 Threads 帐号 @kufutw、Instagram 中文 reel 也在讲。
  • Instagram 和 Facebook 的「Comment LINK and I'll send you the repo」型引流帖(instagram.com/p/DfNBd6RD_W_、reel DfSDoHXu7Te、DfNMg7HjeG8),以及 YouTube Shorts「Comment "UI" and I'll send you the link」。
  • 星数峰值落在 11-04、11-05,不在首发的 10-31、11-01。这和二次搬运、11-04 的 v1.1.0、11-05 的 AlphaSignal 报道在时间上对得上。不过 10-31 到 11-01 我们没有逐日数据,只知道到 11-02 累计 419 星,所以「峰值后移」只能算推断。

3. 时机:Agent Skills 已经是通用格式,装一次一行命令(已证实)

  • npx skills add benjitaylor/skills --skill stageshow 走的是 Vercel Labs 的 skills.sh 安装器,支持 Claude Code、Codex、Cursor、Gemini、Grok Build 等几十种 agent。@stretchcloud 的评论说得很直接:「that install line is the real product」。
  • 「AI 做的界面很 slop」已经是共识痛点。taste-skill(11.1 万星)、impeccable(10.4 万星)、emilkowalski/skills(5.4 万星)把「给 agent 品味」这条路验证过了,用户已经习惯为「大佬的设计品味 skill」点星和安装。

4. 演示本身就是广告(已证实)

推文是一串前后对比视频:同一个 prompt 不带 skill 和带 skill 的结果;作者还复刻了 Figma、Gmail、Finder、Spotify 里的小场景。这个技能的产出物本来就是好看的产品动画,所以它天生适合在 X 和 Instagram 上靠视频传播。

差异化

  • 题目窄:不管整个前端的审美,只管「营销用的假产品界面,一个动作、一个画面」。taste-skill、impeccable、ui-ux-pro-max 管的是整站审美;video-shotcraft、hyperframes、Remotion 系管的是视频。Stageshow 产出的是一个普通 React 组件,可以直接放进官网,不是渲染出来的 mp4。
  • 会自己拍片检查:film.mjs 把整段动画拍成一张逐帧拼图(contact sheet)并报告问题,jumps.mjs 找一帧的跳变,layout.mjs 查文字有没有溢出。多数 skill 只有文字规则,它让 agent 看动画中间的帧。
  • 金样例 + 正反对照:几十个 gold examples 和一个 playground。好坏两种做法并排放,agent 和人都能对着看。
  • 写得克制:「一句话原则 + 五种翻车(Too much / Wireframe / Boxed / Flat / Bland)+ 七步流程」。
  • 但它跑出来的主因不是这些差异化,而是作者的身份和那条视频推文。证据有三条:一是星数和装机量全部集中在首发推文之后;二是它的星数(2.1k)远低于同类设计 skill;三是二次传播几乎都只讲「X 设计负责人」。差异化决定的是它值不值得收藏(收藏数是点赞的 1.8 倍),也是它会被别人照着改的原因。

竞品

名称在哪上线规模和 Stageshow 的不同
Leonxlnx/taste-skill开源 skill2026-0211.1 万星;design-taste-frontend 装 74 万次管整站前端审美、反 slop,不专做产品插画或动画
pbakaus/impeccable开源 skill2025-11 前后10.4 万星;装 39 万次一套设计词汇和打磨、审查命令,面向整个 UI
emilkowalski/skills开源 skill2026-035.4 万星;emil-design-eng 装 42 万次设计工程、动画审查的通用技能,不带部件库和拍片工具
nextlevelbuilder/ui-ux-pro-max-skill开源 skill2025-12 前后14.6 万星;装 44 万次风格库、配色库式的设计智能,广而浅
Vincentwei1021/video-shotcraft开源 skill2026-071.7 万星用 Remotion 做电影感产品宣传视频,产出视频而不是可嵌入组件
heygen-com/hyperframes开源框架2026-037.9 万星写 HTML 渲染成视频的通用框架
Alexwtlf/agentic-product-demo开源 skill2026-08465 星同样做「agent 写产品演示」,但走 Remotion 视频,没有名人背书,起不来
shadcn-labs/snapcn开源2026-07577 星给 Remotion 用的 shadcn 产品演示组件库,不是 agent 工作流
getopenscreen/openscreen开源2026-036.3k 星录真实屏幕做 demo,和「画假界面」是两条路
Claude Design、Figma 等大厂功能——设计工具里直接出图,不在代码库里、不能当组件用

各仓库星数和建库时间来自我们的 github 库和 GitHub API,安装数来自 skills.sh,都是 11-06 的数据。

跟风者(已经出现)

  • maven-ammar/svelte-stageshow(11-01,Svelte 5 版,69 个场景全移植)
  • rizaardiyanto1412/stageshow-js(11-02,纯 JS 版)
  • hope0719/stageshow-workbuddy(11-05,中文 WorkBuddy 版)
  • SystemOfADesign/design-pack(11-02,把 Stageshow 原样打包进自己的 marketplace)
  • playful-design/router/stageshow(skills.sh 上 45 次安装)、arm1383/stageshow-skills
  • GitHub 代码搜索里有 116 个 SKILL.md 提到 stageshow,多是大合集仓库(sickn33/agentic-awesome-skills、aiskillstore/marketplace 等)把它收了进去。
  • 跟风者全部是 0 到 5 星,流量没有分走。

可见度

已经被广泛讨论:首发推文 155 万浏览;aicoder、AlphaSignal 报道过;中文大号歸藏转过;多个 Instagram、LinkedIn、YouTube 搬运号在讲;也已经被移植。这算不上没人知道的机会。不过它是开源免费项目,不涉及收入。

能借鉴的

  1. 「窄题目 + 大佬品味」:挑一个 AI 做得明显很丑的具体场景,把手工经验写成五种翻车和七步流程。
  2. 让 skill 带一个自查工具(拍逐帧、测跳变、测溢出),不只给文字规则。
  3. 用前后对比视频发布,结尾附一行安装命令。设计类 skill 的产物本身就是传播素材。
  4. 有一个和产品同步更新的长文页(benji.org/stageshow),媒体和搬运号直接照着它写。

还不确定的

  • 10-31 到 11-01 的逐日星数没有观测,11-04 峰值的具体来源(哪个搬运帖或 newsletter)无法量化。
  • skills.sh 的安装数含 CI 和重复安装,不等于真实用户数。
  • 留存和实际使用率未知,作者自己也预期「模型审美提升后这个 skill 就用不着了」。
  • x-radar 本地语料没收到相关推文,推文数据全部来自 fxtwitter 公开接口。

出处

文章由 AI 根据公开数据和我们每天采集的数据写成,数字带出处,推断已标明