duo

Duo

一个固定为 1448×1086、@ 30fps 的合成画面：一张双手握着展开的折叠屏手机的照片，两个屏幕均已留空。你可以用 HTML 填充两个屏幕插槽（实时视频、模拟聊天、滚动信息流，或任何 HyperFrames 能渲染的内容），由装置将其裁切成手机真实的圆角几何形状。

手机和双手是照片中的内容，不是需要你搭建的东西。 assets/plate.png 就是这台设备。切勿重新创建、重绘或用 CSS 模拟这台折叠屏手机、它的边框、转轴或双手，也切勿换成其他图片。build.mjs 会将底图复制到每个项目中；如果文件缺失，请停止并重新安装此技能，不要自行拼凑手机。

不要编辑装置。 两个 .screen 矩形、它们的圆角半径和转轴分隔线，都是根据这张照片逐像素测量得出的。你所做的所有视觉改动都必须位于 #screen-left .content 和 #screen-right .content 内，以及共享的 GSAP 时间轴中。

适用场景 / 不适用场景

• 适用于所有「手机上并排展示两样东西」的片段：应用对比应用、信息流对比信息流、两个聊天窗口回答同一个提示词、两个产品版本。
• 如果用户想要的是单屏手机、笔记本电脑，或他们提供的真实设备边框，则不适用——此技能使用的是一张特定照片。若要使用不同设备底图，应像测量这张图一样重新测量几何形状（见 references/screen-geometry.md），而不是拉伸这张图。

要求

• Node 18+，以及通过 npx hyperframes@latest 使用的 HyperFrames CLI（@latest 会变动；若要确保重新渲染的字节完全一致，请固定版本）。
• 如果你的工作区有运动设计规范，请先加载。装置内置的运动效果只有一个缓慢的镜头推进；屏幕中的所有内容都必须有动态效果（滚动、滑动、打字、点击），不能静止晃动。

网络和副作用（完整列表）

• registry.npmjs.org — 通过 npx 获取 HyperFrames CLI 本身。
• cdn.jsdelivr.net — 合成画面会在预览/渲染时加载 GSAP（固定版本 3.14.2）。渲染无法完全离线进行。
• 你添加到屏幕上的任何内容（视频片段、头像、字体）都会产生副作用：只有在用户请求需要真实内容时，才可访问网站、下载媒体或抓取 UI，而且只能从你有权使用的来源获取。references/sourcing-real-ui.md 说明了具体方法和权利方面的注意事项。

无需凭据，无付费操作，无遥测。build.mjs 只会在 --out 指定的目录内写入文件，并会拒绝通过符号链接写入。

流程

<SKILL_DIR> 是此 skill 的安装目录（例如： ~/.claude/skills/duo）。

1. 搭建项目：

node <SKILL_DIR>/scripts/build.mjs --out ./foldable-meme --duration 10 --icons tiktok,instagram

--icons 为可选参数；它会将真实的 TikTok / Instagram 图标表（assets/icons-*.svg，从线上移动版网站提取）复制到项目中。

2. 在编写 HTML 之前，先以文字形式决定每个屏幕在片段时长内要呈现什么。暂停测试：在任意一秒，至少有一个屏幕中的某些内容必须处于运动过程中（滑动落位、视频播放、文字出现）。两张静态截图不算视频。

3. 编写屏幕内容。 每个 .content 内都有一个常规 DOM 视口：左侧为 495×849，右侧为 498×849。请以这些视口为基准进行定位，而不是以根元素为基准。模式（全屏吸附信息流、拖动→甩动滑动、点按点赞、聊天打字）见 references/feed-recipes.md。规则：

   • 每个片段都要使用 <video class="clip" data-start data-duration muted playsinline>；播放由 HyperFrames 管理。让滑出片段和滑入片段的播放窗口在滑动过程中重叠，使两个片段在过渡期间都能解码。
   • 只使用一条时间线。在标记的钩子中将补间动画添加到 tl；不要创建第二个 gsap.timeline，也不要注册另一个 window.__timelines 键。
   • 不要使用 repeat: -1、Math.random 或时钟——渲染会按时间点跳转。
   • 状态栏：照片中的原始屏幕显示左侧屏幕左上角为 9:41，右侧屏幕右上角为 Wi-Fi / 电池图标。如果应用显示状态栏，请还原这种分布，以强化“同一台设备”的观感。

4. 检查并截图：

npx hyperframes@latest check ./foldable-meme
npx hyperframes@latest snapshot ./foldable-meme --at 1,4,7 --no-end

Lint 必须为 0 个错误。对于应用界面，文字被固定标题栏遮挡，或白色 UI 文字叠在视频上而产生的布局 / 对比度警告都属正常；请检查实际帧并确认：(a) 内容延伸至每个圆角边缘，没有留白；(b) 灰色转轴分隔线在屏幕之间清晰可见；(c) 没有任何内容从一个屏幕溢出到另一侧，越过转轴。

5. 仅在用户要求时渲染（如果你的测试框架会拦截渲染，请先询问）：

npx hyperframes@latest render ./foldable-meme -o ./foldable-meme/renders/v1.mp4

验证是否成功

check 通过 Lint 检查且 0 个错误；snapshot 帧显示两个屏幕都在手机内铺满边缘，且分隔线完好；MP4 时长符合要求，分辨率为 1448×1086，并且在任意一秒暂停时，屏幕上都有内容正在运动。最终 QC 时，请从渲染后的 MP4（而不是预览）中提取帧。

规则

• 绝不要为了“适配”内容而调整屏幕的尺寸、位置或圆角。应让内容适配槽位。如果模拟应用看起来太大，应缩小应用内部的字体，而不是缩小屏幕。
• 真实内容必须真实：如果用户要求制作 TikTok 或 Instagram，请从线上网站获取真实的 UI 图标和布局尺寸，并使用真实帖子（包括真实用户名和数据），不要凭空编造。只有当用户明确要求制作虚构 / 恶搞屏幕时，才可使用虚构账号名。
• 摄像机推进是唯一允许的整体运动。任何地方都不要添加漂移、呼吸或循环发光效果；应通过屏幕内的故事内容填充时长。
• 输出保持为 1448×1086（底板原生的 4:3 比例）。如需 16:9 或 1:1 裁切，可在后续渲染中提供，而不是调整整个装置的尺寸。

文件

• assets/plate.png — 干净底板，屏幕已处理为空白中性色（1448×1086）。
• assets/screen-spec.json — 测量所得的矩形区域、圆角半径、转轴、状态栏分布。
• assets/icons-tiktok.svg、assets/icons-instagram.svg — 包含真实移动版网页图标的 <symbol> 表（点赞、评论、分享、导航栏等）。
• template/index.template.html — 锁定的装置模板，带有两个空槽位。
• scripts/build.mjs — 脚手架生成器。
• references/screen-geometry.md — 几何尺寸的测量方法，以及如何为新底板重新测量。
• references/feed-recipes.md — 吸附信息流、滑动惯性、点按点赞、聊天打字。
• references/sourcing-real-ui.md — 如何获取真实应用 UI 和片段，以及相关权利注意事项。

来源与许可

• 该图片改编自 @A_Kapustin 发布在 X 上的一张公开照片 （状态 2097769962936868872，一台可折叠设备并排显示 ChatGPT 和 Claude）；两个屏幕已清空，因此可用于展示任意内容。此处将其作为表情包模板重新发布；使用此技能的用户发布结果时应自行判断，并在适当情况下注明来源。
• 图标表复现了 TikTok 和 Instagram 自有的 UI 字形（从其公开移动版网页 DOM 中提取），以便模拟屏幕看起来像真实应用。 这些是其所有者的商标，仅用于戏仿 / 评论用途。
• GSAP 通过 jsDelivr 加载，遵循其标准许可；未随项目一同分发。