sideshow
为终端AI编程代理提供实时可视化界面
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：sideshow。 它的用途是：为终端AI编程代理提供实时可视化界面 完整的 Skill 内容见：https://321skill.com/skills/sideshow/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“生成一个包含标题、导航栏和三个卡片的产品展示页面HTML代码。” 当AI在终端中输出代码时，Sideshow会自动在浏览器中渲染出该页面的视觉样式。您可以立即在浏览器中查看布局和颜色，并评论道：“卡片间距再大一些”，此反馈会直接出现在终端中，指导AI进行下一轮调整。
介绍
Sideshow 解决了在终端中使用AI编程代理时，代码生成过程不直观、难以实时观察和交互的问题。它通过在本地启动一个Web服务器，将AI代理在终端中生成的HTML代码片段实时渲染为可视化网页，并允许用户在浏览器中查看和评论，从而实现双向沟通。
使用时，您需要在终端中通过npm安装并启动Sideshow，它会提供一个本地URL。当您的AI代理（如Claude Code、Cursor等）在终端中生成HTML代码时，这些代码会被自动发送到Sideshow服务器，并立即在浏览器中显示为可视化的网页元素。您可以在浏览器中直接对生成的界面进行评论，反馈会同步回终端。
这个工具非常适合前端开发者、全栈工程师、产品经理或任何需要快速原型设计、UI审查或与AI协作进行界面构建的人员。它特别适用于需要快速迭代和可视化反馈的敏捷开发或设计流程。
建议在本地开发或内部网络环境中使用，以确保低延迟和安全性。由于它依赖本地服务器和浏览器通信，请确保网络端口可用。对于生成复杂交互或重度依赖后端逻辑的页面，它主要作为视觉预览工具，仍需后续集成开发。
核心特点
与仅能在终端输出代码的AI代理不同，Sideshow提供了实时的、可视化的浏览器渲染，并支持用户在浏览器端直接添加评论，形成与终端AI的即时双向反馈循环。
注意事项
不适合需要完整后端逻辑、数据库交互或复杂客户端状态管理的生产级应用开发预览。
常见问题
Sideshow支持哪些AI代理？
理论上支持任何能在终端输出HTML代码片段的AI代理或工具，如Claude Code、Cursor的AI功能等。
评论功能如何工作？
在浏览器中查看渲染页面时，可以直接在页面上添加评论，评论内容会实时发送回启动Sideshow的终端会话中。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/sideshow/raw/index.md 读取 sideshow 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/sideshow/raw/index.md（查看排版版本）