1实现原理 · 为什么它能做到
核心取巧：装置不是建出来的，而是一张既有照片。plate.png 就是那台展开的折叠屏（含手、边框、铰链），skill 明令不得重画、不得 CSS 建模、不得换图；缺图就停下重装而不是自己造一台手机。
skills/duo/SKILL.md
`assets/plate.png` IS the device. Never recreate, redraw, or CSS-model the foldable, its bezel, the hinge, or the hands, and never substitute a different image.
这里在做什么：把「用 CSS 画设备」这条最容易露馅的路线彻底封死。整片=固定 1448×1086@30fps，唯一可动的 rig 元素是一台缓慢推镜。
rig 是锁定块：两个 .screen 矩形、各自圆角与铰链分割都是从那张照片逐像素量出来的，agent 只被允许改每个 .content 里的内容与那一条共享时间线。
skills/duo/template/index.template.html
/* ===== LOCKED RIG — do not edit this block. Geometry is measured from the plate. ===== */
模板里的实现就是量出来的值：'#screen-left{left:223px;width:495px;border-radius:56px 12px 12px 56px}'（右屏 12px 56px 56px 12px），overflow:hidden 即 mask——没有用图像分割。
mask 走几何而不是分割：曾用亮度分割 + 形态学闭运算做 mask-image，结果填平了 12 px 的铰链侧圆角、并吞掉铰链分割线的抗锯齿像素，于是改为数值测量边缘与圆角后直接用 CSS 圆角矩形。
skills/duo/references/screen-geometry.md
Lesson: for device-screen replacement, measure edges and corners numerically and build the mask from geometry. Never ship a morphology-cleaned segmentation as a mask.
同文档给出可复算的度量与重测方法（逐行扫亮/暗/灰边界拟合直线、由 inset(k) = r − √(2rk − k²) 解半径），并说明铰链分割线用的是底图自己的像素（x 719–723）。
时间轴纪律为「可 seek」服务：整片只允许一条共享 GSAP 时间线（往标记处的 tl 加补间），禁止再建第二条时间线或注册第二个 window.__timelines 键，禁 repeat:-1、禁 Math.random、禁时钟。
skills/duo/SKILL.md
One timeline. Add your tweens to `tl` inside the marked hook; do not create a second `gsap.timeline` or register another `window.__timelines` key.
同段的理由写在下一句：'No `repeat: -1`, no `Math.random`, no clocks — the render seeks.'——渲染器按时间点取样，所以任何依赖「过了多少时间」的写法都会破功。
脚手架刻意最小化：build.mjs 无网络、无第三方依赖、只写 --out 内，并在每次写入前 lstat 检查、拒绝穿过符号链接写；它把 plate、screen-spec 与（可选的）真实图标表拷进项目，并把帧规格写死成 1448×1086@30fps。
skills/duo/scripts/build.mjs
if (st.isSymbolicLink()) throw new Error(`refusing to write through symlink: ${p}`);
同文件头注释声明 'Writes ONLY inside --out: index.html, hyperframes.json, assets/plate.png,' 与 '// No network access. No dependencies beyond Node 18+.'；帧规格由 ['hyperframes.json', JSON.stringify({ name: id, entry: 'index.html', width: 1448, height: 1086, fps: 30 }, null, 2) + '\n'], 落地。
「看起来是真的」由取材纪律保证：用户要 TikTok/Instagram，就得去线上移动端抠真实图标与版式度量、并配真实帖子与真实账号计数；发明 handle 只允许用在用户明说要的虚构/戏仿屏。
skills/duo/SKILL.md
Real content must be real: if the user asks for TikTok or Instagram, pull the actual UI glyphs and layout metrics from the live site and use real posts (with their real usernames and counts), not invented ones.
度量表在 references/feed-recipes.md 里以实机 DOM 数值给出（例如 '| TikTok | bottom tab bar | 49 px, icons 32 px, labels 10 px, `+` button 75×49 |'），并注明『Scale by ~1.2 for these 495/498 px slots』。
交付面被刻意收窄：整片固定 1448×1086（底图原生 4:3），想要 16:9 或 1:1 只能作为后续裁切，不允许改 rig 尺寸来迁就内容。
skills/duo/references/screen-geometry.md
| Plate | 1448 × 1086 |
另一份 assets/screen-spec.json 记录了来源推文与作者（'"tweet": "https://x.com/A_Kapustin/status/2097769962936868872",'），也就是底图的出处与授权口径；SKILL.md 的 Rules 另有 'Never resize, move, or re-radius the screens to "fit" content.'
2核心能力
01两屏并排对比/梗图：TikTok vs Reels、ChatGPT vs Claude、「me vs my friend」、before/after、两个 app 比赛
02屏幕槽里可以是任意 HTML（实时视频、模拟聊天、滚动的信息流），rig 按照片量出的真实圆角几何做 mask，内容只需对准 495×849 / 498×849
03「同一台设备」的细节还原：铰链分割线直接用底图自己的像素，状态栏按原照片左右分置（左 9:41、右 wifi+电池）
04成套屏内运动配方（可直接抄的时间线代码）：全屏 snap 信息流、拖拽→甩动两段式惯性、点赞与双击大心、聊天逐字打字
05实机量出的界面度量表（375 px 视口下量、按 ~1.2 缩放到 495/498 槽），让模拟屏看起来像真的
06真实 UI 的取材配方：浏览器里抠 glyph 与文字度量、yt-dlp 取帖与计数、curl 取 Reels 的 CDN 直链、ffmpeg 裁到槽位
07一条命令建项目：build.mjs 生成 index.html + hyperframes.json（1448×1086@30fps）并拷入 plate / screen-spec / 可选的真实图标 symbol 表
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames CLI（npx hyperframes@latest；check / snapshot / render） |
| network | GSAP 3.14.2（合成页在预览/渲染时由浏览器加载；未随包分发） |
| cli | yt-dlp（取真实帖子的说明、计数与时长；登录态外可用） |
| network | Instagram Reels 直链下载（登出页面里的 scontent-*.cdninstagram.com mp4，用 Safari UA + instagram.com Referer 取；链接数小时内失效） |
| package | Node 18+（自带脚本无第三方依赖） |
| cli | 素材来源：用户自备或按上面配方自抓的片段、头像、字体（SKILL.md 把它们归为用户侧副作用，须来自有权使用的来源） |
| package | 随包的真实应用图标表（icons-tiktok.svg / icons-instagram.svg，从公开移动端 DOM 抠出的 <symbol> 集；含他人商标，声明为戏仿/评论用途） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: node scripts/build.mjs --out <dir> [--id …] [--duration 10] [--icons tiktok
- 网络端点: 声明外部网络访问: registry.npmjs.org：npx 取 HyperFrames CLI（SKILL.md 自述 @latest 可变，建议钉版本）
- 本地工作目录: 文件读写与工件输出: build.mjs 只写 --out 内：index.html、hyperframes.json、assets/{plate.png,screen-s
审计说明： 。判黄而非蓝/绿，是因为执行期确有可预期的联网：每次 check/render 经 npx 从 registry.npmjs.org 取 HyperFrames CLI（且用的是可变的 @latest 标签），合成页在预览/渲染时从 cdn.jsdelivr.net 加载 [email protected]（渲染非完全离线）；此外 skill 自带的取材文档会引导 agent 访问 www.tiktok.com 与 instagram.com 抓真实 UI 与帖子。未落橙的依据：全目录**无任何凭证读取**（无 env/cookie/keychain；配方走登出页面，不用 cookies-from-browser），build.mjs 明确无网络并拒绝穿符号链接写，且 SKILL.md 声明 no telemetry / no paid operations。未达红的判断：配方虽然对外站点使用了 Safari/iPhone UA 与 Referer，但这是为取公开页面与公开 CDN 资源所需，未发现 TLS 降级、验证码绕过、自动化侦测规避（无 stealth patch、无 AutomationControlled 之类）或任意代码执行面。需要用户知情的是版权/商标面：底图取自他人公开照片（已抹屏后作梗图模板再分发），图标表复刻了 TikTok/Instagram 的商标 glyph 并声明仅戏仿/评论用途，成片发布责任在用户。
5第二遍独立确认
- [ok] build.mjs 是否真的无网络、无第三方依赖 — import 仅 { promises as fs } from 'node:fs'、path、fileURLToPath；无 fetch/http/https/dns/child_process。全部行为是读模板、字符串替换 __COMPOSITION_ID__/__DURATION__、写文件与拷贝资源。头注释亦声明 '// No network access. No dependencies beyond Node 18+.'
- [ok] 『不改 rig』是否只是文案（模板与 spec 是否一致） — 模板 #screen-left{left:223px;width:495px} / #screen-right{left:724px;width:498px}、.screen{top:105px;height:849px}、圆角 56px 12px 与 screen-spec.json 的 rect/outer_corner_radius_px/hinge_corner_radius_px 完全对应；build.mjs 也把可用视口打印成 '495x849' / '498x849'。
- [ok] feed-recipes.md 引用的图标 symbol 是否随包（避免抄了配方却没有图标） — grep 确认 assets/icons-instagram.svg 内含 id="ig-like-filled"（配方里 tl.set('#ig-heart-use', { attr: { href: '#ig-like-filled' } }, 2.7) 用到），另有 ig-like/ig-comment/ig-share/ig-home/ig-reels/ig-search/ig-camera/ig-verified 等 10 个 symbol；icons-tiktok.svg 含 tt-like/tt-comment/tt-bookmark/tt-share/tt-plus/tt-home/tt-discover/tt-inbox/tt-profile/tt-search/tt-add/tt-live/tt-verified/tt-note 共 14 个。
- [discrepancy] SKILL.md 的『Network and side effects (complete list)』是否真的完整 — 该清单只列 registry.npmjs.org 与 cdn.jsdelivr.net，把抓取归入『Anything YOU add to the screens … is your side effect』；但同目录的 references/sourcing-real-ui.md 给出了具体抓取路径（www.tiktok.com、instagram.com、scontent-*.cdninstagram.com）与 UA/Referer 做法，并附 ffmpeg 裁片命令。对只读 SKILL.md 的用户而言，执行期外发面被低估了（文档级出入，非代码行为不符）。
- [unlocatable] 『几何是从照片逐像素量出来的』能否在包内独立复核 — screen-spec.json 给出了量测结论（左右 rect、r=56/12、铰链 x719–723）与出处推文，但两个屏幕已被抹平、原始推文照片不在包内，且本次为只读侦查不联网取原图，故这些数值无法独立复算；references/screen-geometry.md 提供的是重测方法而非原始数据。
- [ok] 状态栏与铰链的还原是否有据可依 — screen-spec.json 的 hinge 字段（x 719 / w 5 / rgb(130,133,142)）与 status_bar（左 9:41@x44,y18；右 wifi_battery_right_inset 40）给出像素级依据；feed-recipes.md 的忠实度清单要求复现该分置，SKILL.md 亦在 Flow 第 3 步复述。
- [ok] 底图与预览图的引用是否都在包内 — SKILL.md 正文  与 build.mjs 拷贝的 assets/plate.png、assets/screen-spec.json 均在包内；plate-preview.jpg 仅作预览，不参与渲染。
6结论
适合： 适合：做两屏对比/梗图类型短片的社交内容创作者与剪辑师——TikTok vs Reels、ChatGPT vs Claude、before/after、两个 app 同屏比赛；只要按 495×849 / 498×849 对准内容，rig、圆角、铰链、状态栏都已量好；也适合想学「用实测几何替代图像分割做设备屏替换」的工程师（screen-geometry.md 是一份可直接照做的方法）。
不适合： 不适合：① 想用单屏、笔记本或自己提供设备边框的项目（这是同一张照片）；② 想改幅面比对（16:9/1:1 只能作为后续裁切，不能改 rig）；③ 期望装置可动（唯一 rig 运动是一台缓慢推镜，其余时间必须靠屏内内容撑住）；④ 不想承担素材版权与商标问题的商用场景；⑤ 完全离线渲染（GSAP 与 CLI 都要网）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload duo.tar.gz
sha256:
Option B · Copy Guide for Agentd33100badc2a58ee…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit ba7a0bb6d3.