Stageshow：产品界面插画与光标动画演示

作者提供的示例

封面是本次指定的作者 README 配图，展示控件、仪表盘、应用图标和音乐播放器等多种界面插画。仓库还提供静态卡片、动态首屏、光标交互和 Bento 布局等示例，可按作者的说明在本地预览。

这些均为作者提供的示例，并非 SkillHey 本次收录生成的成果。

作者仓库与安装方式作者的示例预览与使用说明第三方素材与商标声明

关于这个 Skill

Stageshow 是 Benji Taylor 制作的产品界面插画 Skill，使用 React 和 CSS。可从示例出发，将画面与视觉风格调整为自己的产品，再用附带的舞台、界面组件和动效工具组合静图或短动画。光标和界面变化是编排出的插画效果，不会自动操作真实应用。

为什么推荐

适合需要展示产品如何运作的落地页或功能介绍。作者提供可调整的 React 组件套件、示例，以及画面构图和动效指引。

适合用来做什么

• 在落地页首屏或功能卡片中展示仪表盘、浏览器或手机界面。
• 为产品发布制作短光标演示、界面过渡和 Bento 网格。
• 希望将 React 组件和示例调整为自家产品视觉风格的开发者与设计师。

工作方式

1. 确定故事与画面

   说明产品、插画位置、视觉风格以及需要静态还是动态效果。

2. 调整上游示例

   将最接近需求的示例和组件套件复制到 React 项目，保留所需样式与素材，再调整内容和外观。

3. 编排与检查

   使用舞台和脚本动作编排光标故事，也可以制作静态图；作者提供预览和录制流程以检查结果。

Stageshow Skill 指令作者的示例预览与使用说明

输出与适用边界

交付物是渲染插画或动画的 React 源码和样式。脚本点击会绘制光标反馈并改变场景状态；它不是对真实应用的录屏，也不是测试实际界面的工具。

附带的第三方产品研究用于展示交互思路。作者建议借鉴交互，而不是照搬其他产品的身份标识；素材权利请查阅上游声明。

Stageshow Skill 指令第三方素材与商标声明

使用前需要了解

• 需要编程 Agent 与 React 项目。组件套件支持 React 18 及以上版本；复制示例时需同时保留相关 CSS 与素材，部分组件使用 lucide-react。
• 本地示例预览需要 Node.js 20.19 或更新版本及 npm。录制场景需要 playwright-core 和本地 Chrome 或 CHROME_PATH；演示本身不依赖第三方动画运行时。
• Skill 源码采用 MIT 许可证。产品名称、应用图标和其他第三方素材各有权利与声明，复用前请查看上游 NOTICE。