设计演示（虚拟产品UI）是做什么的？

请先加载 design-lean。 其中的方向、工艺规则、令牌和组件门控在此同样适用；本技能添加了产品截图所需的内容。演示工作在 Build 的第 5 步中使用，当页面需要产品预览时；或者独立运行，当整个任务就是演示时。

演示运行的关卡

关卡	通过条件	留下的证据	上限	失败时的处理
D1 计划	在编码前，明确写出放置位置、焦点对象、动作、成果以及省略的内容	计划	—	—
D2 构图	在指定宽度和390宽度下，至少有一张静态图不空、不平、不方框化	两幅静态图	2次重新构图	交接，并说明构图缺陷
D3 彩排	设置海报帧；在两个宽度下的接触片均无末尾列表中的缺陷	接触片	3轮录制	交接并列出剩余缺陷
D4 宿主门控	`gate.js` 在宿主页面自身的控件（包括暂停）上通过	门控总计	每项检查最多2次修复尝试	报告为开放问题

设置（直接提取，不要重新输入；基础目录会在每个技能加载时显示）：

mkdir -p .design && for f in "<design-lean base directory>/SKILL.md" "<design-demo base directory>/SKILL.md"; do python3 - "$f" <<'PY'
import re, sys
for name, code in re.findall(r"`{3}js\n// file: (\S+)\n(.*?)`{3}", open(sys.argv[1]).read(), re.S):
    open(".design/" + name, "w").write("// file: " + name + "\n" + code); print("wrote .design/" + name)
PY
done

微型产品UI：一个可信的界面，在其空间内构图，表现为一张静态图或一个短动画（只发生一件事）。观看者能识别屏幕并看到事件发生。这些都是手工绘制的插图，不是浏览器自动化：脚本绘制指针按下并改变场景。design-lean 中的工艺规则和令牌仍然有效；本节添加了产品截图所需的内容，并覆盖了其中不同的 Motion 部分。

一个核心理念： 它看起来像一个真实的产品，为了观看者的需求而简化，有意图地构图，每个动作都有原因。

五种失败方式：

太满。 每行都有真实文本，到处都是数字，塞得满满当当。细节越多，看起来越像生成的。
线框图。 两个灰色团块加一个按钮。构建得太小，或者被剥离了使其可识别的元素。
方框化。 整个窗口被缩小成一个四周等距的卡片：就像粘贴进去的截图，不是产品截图。
扁平。 每个对象在相同的带边框卡片中具有相同的权重。眼睛无处可落。
平淡。 一个灰色窗口加一个光标，无论简报是什么。简报的外观和能量（蓝图、玻璃覆盖色彩、灵动岛、吉祥物）才是重点；按照这些规则构建简报所要求的内容。

修正方法：一个完整、结构化的屏幕，使用安静的灰色，只在故事相关的部分使用真实词语，其余部分使用占位条，留有呼吸空间，裁剪使眼睛聚焦于故事所在。简化词语，而不是简化上下文。一个空旷的角落，列表下的空白，分散填充窗格的行，浮动在底板上的窗口：未完成，而非平静。

施工程度。 像构建一个会被评判的启动页面那样构建它。然后以你可能认识的最苛刻的设计师的角度来看这个画面，那个会截取唯一错误的东西并回复“这是什么？”的人：一个偏离头像的点，一个独立成行的单位，与卡片接触的副本。如果你能想象出那个截图，你就找到了下一个需要修复的地方。

舞台秀工具包

当它可用时，使用它：React 组件（Stage、Window、Phone、Row、Bar、Text、Roll、Count、Collapse、Fly、Connector 等，以及 Act 脚本 API），大约70个黄金示例和产品研究，以及 scripts/film.mjs，它可以拍摄接触片并标记构图和运动故障。在项目中查找 stageshow 技能文件夹或包含 stageshow.css 的 kit/。否则，如果有网络访问权限，可以安装它（npx skills add benjitaylor/skills --skill stageshow）或克隆 https://github.com/benjitaylor/skills 并从 stageshow/ 开始工作。然后，它的 SKILL.md、references/ 和最近的黄金示例是详细的规则；本节只是总结。安装它会运行该仓库自己的包脚本，沙箱可能会阻止。如果没有工具包，则按照以下规则使用普通 React 或 HTML 和 CSS 构建，并使用“无工具包下的录制”下的脚本进行录制。

运行

大部分质量在编码之前就已决定。首先编写计划：放置位置、焦点对象、动作、成果、哪些内容可以省略。

媒介和位置。 静态或动画（循环、进入视图时播放、或悬停时播放）。页面、其背景、其宽度。按照最终被观看的大小进行设计，并以 1:1 的比例展示：副文本旁边的主视觉大约 720 × 340，全宽主视觉 900 到 1100 宽，卡片 400 × 300。演示宽度不要低于约 320；便当网格瓦片或卫星卡片可以更小。任何可以放在手机列中的内容都需要在 358 宽度下进行紧凑设计：重新设计（更紧的裁剪，移除或堆叠卫星），而不是简单的压缩。
外观。 手头有产品代码或网站时，获取其真实的令牌、图标、浏览器界面和文字。没有时，使用 design-lean 的方向。选择保真度：最低（全部是条形）、标准（有意义的地方用文字，其他地方用条形，默认）、真实（所有地方都是真实内容；用于主视觉规模、命名真实产品、或主题是列表或页面的静态图）。具有风格（可爱、纸张、海报色彩）的简报会完全采用该风格，但仍需遵循这些规则构建。
故事。 根据产品的价值来选取其形态：使用时的感受（指针做一个令人满意的动作，结果出现在其手下）、流程（几个屏幕讲述为一个连续对象，最后一个屏幕显示成果）、或系统的功能（结果出现在其他地方，链接可见，通常没有指针）。三到五个节拍和一个成果，10到16秒。在更丰富的故事和更平静的画面之间，选择画面。
从黄金示例开始，然后构图。 有工具包时，录制最近的黄金示例并复制其文件夹作为起点；保留其舞台大小、裁剪、行和类型大小、间距和节拍，然后将其外观和内容替换为简报的产品。仅更改名称的复制不是完成。没有工具包时，从下表中选择一个布局并以相同方式约束自己。在任何动画之前先构图：在两个宽度下录制一幅静态图；如果它比应有的更空、更平或更方框化，首先修复构图。
屏幕。 统计真实字符串，通常为3到7个：文字预算，而不是元素预算。在移动之前，让每个控件的文本都适合。测量指针从 DOM 接触的内容；永远不要硬编码位置。
编排。 保持已挂载的内容可见，并通过切换来实现动画退出。动画化关系，而不仅仅是对象：一个新行会带动其下方的行；一个调整大小的表面不会拉伸其文本。节拍重叠，组交错，成果保持，循环在开始的地方结束，或在有可见原因的情况下重置。
彩排。 首先设置海报帧：最能独立讲述故事的节拍，永远不要捕捉到一半变化的状态，结果留在屏幕上。然后录制循环，而不仅仅是静态图：在指定宽度和390宽度下生成接触片，并逐帧检查每个按压、菜单、变形和循环接缝。静态图无法显示弹窗。首先修复最大的可见缺陷（构图，然后是层级，然后是运动，然后是润色），然后重新录制。上限：三轮录制；之后，交接并列出剩余缺陷。问：眼睛首先落在哪里，是结果吗？其中一个窗口、瓦片或设备是否明显主导？任何“否”都是最大的缺陷。通过脚本是必要条件，不是充分条件。交接时附上简短说明：你从哪里开始的黄金示例或布局，你改变了什么，你没有检查什么。

构图

一个主视觉对象，最多一两个卫星（收据、手机、详情卡片）来传达要点。保留识别产品的元素：标题、真实的浏览器界面、赋予动作理由的行。Logo 和导航是可选的。
只裁剪填充内容。 成果、动作、指针触摸的内容以及所有真实词语都保持完整。会因裁剪而切掉的占位动作被移除，而不是被部分裁剪。被舞台边缘切掉的按钮、芯片或阴影是常见缺陷。
将主视觉的10%到40%裁剪出舞台。 窗口或手机至少占据舞台宽度的三分之二，并从边缘溢出。舞台遮罩所有内容（overflow: hidden）。
页面是背景。 在白色或深色页面上，窗口后面没有底板，且窗口四面有气隙漂浮。仅在开发者要求时才是无框的（居中，四周等距边距至少与阴影深度相同）。
一个间距基准， 在最终裁剪中测量：每个边缘距离都匹配它，要么一个完整间距，要么远超。越过它但不足24px或仅差几个像素是错误。
卫星跨越主视觉的边缘，大约一半在外面， 位于浏览器界面（侧边栏、页眉或边距）上，绝不在内容上。两个卫星是两种类型和大小（一个卡片和一个真实大小的通知），绝不等效的两个卡片堆叠。锚定 UI（弹出窗口、菜单、吐司）不是卫星：它位于产品放置的位置。
窗口保持其设备形状： 宽高比1.25:1或更宽时，保持完整；溢出时，显示的部分至少是正方形。通过裁剪修复，绝不拉伸。
故事展开的内容保持在画面内， 在每一帧上与每个边缘保持一个间距；放置触发器，使覆盖层有足够的空间。在静止或循环的任何位置都没有死角。
从平整和正面开始。 通过阴影、z-order、缩放和不透明度来体现深度；仅在必要时使用倾斜（松散的一堆纸），仅在要求时使用透视。
手机： 用作卫星的手机宽度从窗口可见宽度的40%开始，至少220px；让它从底部溢出而不是缩小。通知保持真实的 iOS 比例，绝不裁剪。顶部被裁剪的手机同时失去了其状态栏和导航栏。永远不要手动绘制状态栏或主屏幕指示器；从工具包或真实参考中获取框架。

布局	主视觉	用途
固定，底部出血	左、右、上内嵌 8-12%；底部超出 15-35%	功能卡片和便当网格瓦片
角落出血	上和左内嵌 10%；右和下超出 15-35%；卫星在左侧或底部边缘	副文本旁边的主视觉
带间距的舞台	在彩色舞台上每侧内嵌 8-20%，底部悬空	品牌时刻
卫星焦点	主视觉强烈裁剪；一个大的卫星（主视觉宽度的30-40%）承载故事	一个小东西：通知、收据、差异
宽幅主视觉	900-1100px 窗口，1:1，底部悬空；真实保真度	全宽首页主视觉
设备对	桌面宽 75-80%，底部悬空；手机跨越右边缘，三分之一在外面	跨设备故事
相同元素的多个	一个网格的事物，从每个边缘溢出；一个瓦片通过深度突出，是唯一有文字的	规模表现为重复
淡出裁剪	窗口在顶部和侧面内嵌，在最后三分之一处通过遮罩淡出，仅填充内容在淡出下方	当边缘会以任意线切割窗口时
特写	整个窗口 1.3-1.6 倍，包括浏览器界面和所有内容，主题行完整	关于一个控件的卡片
产品上的面板	一个设置面板覆盖在产品边距上，一个中立的主导到它所改变的内容	设置及其效果
对角	复制文本在左下角；产品从右上角悬挂	带有一行文本的便当网格瓦片

便当网格是一个集合：一个主视觉瓦片，然后是一个窗口、一个统计、一个对象和一个图表，每个类型不同；在任何瓦片之前先规划网格。

静态帧

克制。 在标题、被操作的内容、输入的内容、结果上使用真实字符串；其余是条形。条形是边缘的填充；目光落处的条形看起来未完成。故事涉及列表的地方，使用两或三行真实内容。在小表面上，一行是一个行：头像、姓名、值。占位符宽度在行之间变化（60、45、70、52）。标签和值匹配：两者都是文字或两者都是条形。一个数字可以变大。功能的信号只说一次，而不是在标题、卫星和每一行中重复。
保留领域的标志性内容： 专辑封面、缩略图、头像（每个命名头像自己的颜色）。如果替换掉，就变成了通用列表。
虚拟名称不要使用报头，除非简报依赖且真实产品会在那里显示它，否则屏幕上不要出现产品名称。虚拟应用的标题是 div，永远不是 h1 到 h6：演示存在于某人的页面大纲中。
字体： 真实 11 到 15px UI 尺寸，按舞台缩放，永远不是 7px。小文本行高至少 1.3。仅对代码、标识符和对齐的数字使用等宽字体。
间距： 文字与任何窗口、卡片、面板或悬停行边缘保持 12px 内边距（不低于 8）；条形可以出血，文字不行。行内边距 12px，密集列表 8px。标题及其副标题间距 4 到 6px。按钮与上方字段保持至少 8px。无近切：相距 1 到 3px 的边被视为错误；完全对齐或至少相距 8。
光学居中： 在药丸、按钮和头像中，将标签居中对齐其字母（text-box: trim-both cap alphabetic）。居中的金额将其数字居中，货币符号挂在外部 right: 100%。
图标来自集合，不是你的手绘： 首选产品自己的图标包，其次选择一个有目的的集合（Apple 界面的 SF 风格，Android 的 Material Symbols，否则是 Phosphor、Iconoir、Radix、Tabler、Heroicons 或 Lucide），每个场景一个大小（14-16px）和描边，14px 及以下填充。Emoji 是内容，不是图标。其他产品的 logo 使用其原始比例的官方标记，绝不使用相似物。
AI 功能： 不使用闪光、魔棒或星星，不使用紫色作为 AI 颜色；展示 AI 实际做的事情（发送的问题、思考、流式输出的答案及其高度、最后是来源）。产品的自有图标可以接受，即使它是闪光。
不发明

...（内容截断）

设计演示（虚拟产品UI）