1仕組みと動作原理

中核の工夫：装置をゼロからモデリングせず、既存の写真を採用。plate.png は展開された折りたたみスマホの実写（手、ベゼル、ヒンジを含む）であり、スキルでは再描画、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 固定とし、動くリグ要素は緩やかなカメラのプッシュイン（ズーム）のみに限定しています。

リグは固定ブロック：2つの .screen 矩形、それぞれの角丸、ヒンジの分割線はその写真からピクセル単位で実測されたものであり、エージェントは各 .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-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）がそのまま活かされています。

シーク性を担保するタイムライン規律：全体で許可される GSAP タイムラインは共有の1本のみ（マーカー箇所の tl にトゥイーンを追加）。2本目のタイムライン作成や2つ目の 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 を再現する場合、モバイル版 Web から実際のアイコンやレイアウト寸法を抽出し、実在の投稿やフォロワー数などの数値を組み合わせる必要があります。架空のアカウント名の作成は、ユーザーが明示的に架空／パロディ画面を求めた場合のみ許可されます。

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 |'）、「この 495/498 px スロット向けに約 1.2 倍にスケーリングする」旨が注記されています。

提供フォーマットの意図的な限定：全体サイズは 1448×1086（ベース写真ネイティブの 4:3）に固定。16:9 や 1:1 にしたい場合は後工程でのクロップとしてのみ扱い、コンテンツに合わせてリグのサイズを変更することは禁止されています。

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コア機能

012画面並列比較／ミーム動画の生成：TikTok vs Reels、ChatGPT vs Claude、「私 vs 友達」、Before/After、2つのアプリの動作速度対決

02スクリーンスロットには任意の HTML（動画、疑似チャット、スクロールするフィード等）を配置可能。写真から実測された角丸ジオメトリでリグがマスクし、コンテンツは 495×849 / 498×849 に合わせるだけ

03「同一の物理端末」としてのディテール再現：ヒンジの分割線にはベース写真自体のピクセルを使用し、ステータスバーも元写真に従って左右に分離（左：9:41、右：Wi-Fi＋バッテリー）

04画面内アニメーションのレシピ集（コピー＆ペースト可能なタイムラインコード）：フルスクリーンのスナップスクロール、ドラッグからフリックへの二段慣性、いいねとダブルタップのハート、チャットの文字送りタイピング

05実機から測定された UI 寸法表（375 px ビューポートで実測し、495/498 スロット向けに約 1.2 倍拡大）によるリアルな画面シミュレーション

06リアルな UI の素材収集レシピ：ブラウザからのグリフおよびテキスト寸法の抽出、yt-dlp による投稿・カウンターの取得、curl による Reels の CDN 直リンク取得、ffmpeg によるスロット枠へのクロップ

07コマンド1発でプロジェクト構築：build.mjs が index.html + hyperframes.json（1448×1086@30fps）を生成し、plate / screen-spec / 任意のアイコンシンボルシートをコピー

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

監査ノート： Blue/Green ではなく Yellow と判定した理由は、実行時に想定されるネットワーク接続が存在するためです。チェック／レンダリングのたびに npx 経由で registry.npmjs.org から HyperFrames CLI を取得し（可変の @latest タグを使用）、合成ページはプレビュー／レンダリング時に cdn.jsdelivr.net から [email protected] を読み込みます（完全なオフラインレンダリングではありません）。また、同梱の素材収集ドキュメントは、実際の UI や投稿を取得するためにエージェントを www.tiktok.com や instagram.com にアクセスさせます。Orange に至らない根拠：ディレクトリ全体で**認証情報の読み取りは一切ありません**（env/cookie/keychain は不使用。レシピはログアウト状態のページを利用し、cookies-from-browser も使いません）。build.mjs はネットワーク不使用を徹底し、シンボリックリンク越しの書き込みを拒否します。また SKILL.md には no telemetry / no paid operations が明記されています。Red に該当しない根拠：レシピでは外部サイトに対して Safari/iPhone の UA や Referer を使用していますが、これは公開ページおよび公開 CDN リソースの取得に必要な範囲にとどまり、TLS ダウングレード、CAPTCHA 回避、ボット検知回避（stealth patch や AutomationControlled 対策など）、任意コード実行の余地は確認されませんでした。ユーザーが留意すべき点は著作権・商標の面です。ベース画像は第三者の公開写真（画面を消去してミームテンプレートとして再配布）から取得されており、アイコンシートはパロディ／論評目的として TikTok/Instagram の商標グリフを複製しているため、完成動画の公開責任はユーザーに帰属します。

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 正文 ![plate](assets/plate-preview.jpg) 与 build.mjs 拷贝的 assets/plate.png、assets/screen-spec.json 均在包内；plate-preview.jpg 仅作预览，不参与渲染。

6結論

最も不自然になりやすい部分（端末と手）を実際の写真に置き換え、「再描画禁止・画像差し替え禁止・リグ変更禁止」を厳格化することで、失敗の要因を根本から排除

画像セグメンテーションではなく数値測定に基づいたジオメトリを採用し、試行錯誤の知見や再測定方法をドキュメント化しているため、他のデバイス画像にも応用可能

レンダラーのシーク動作に厳密に準拠したタイムライン規律（単一タイムライン、random/clock/repeat:-1 禁止）により、再現不可能なバグを抑制

実機データに裏付けられたモック画面：アイコンサイズ、行間、フォントサイズ、ボトムバーの高さは 375 px モバイル DOM に基づき、スロットへの拡大比率も提示

最小限かつ堅牢なスキャフォールド：ネットワーク不要、依存関係なし、書き込み前のシンボリックリンク検証を備え、1コマンドでレンダリング可能なプロジェクトを出力

最適な用途： 最適：TikTok vs Reels、ChatGPT vs Claude、Before/After、2つのアプリの画面対決など、2画面比較／ミーム系ショート動画を制作するソーシャルコンテンツクリエイターや映像エディター。495×849 / 498×849 にコンテンツを合わせるだけで、リグ、角丸、ヒンジ、ステータスバーはすべて調整済みです。また、「画像セグメンテーションの代わりに実測ジオメトリを用いてデバイス画面を差し替える手法」を学びたいエンジニアにも適しています（screen-geometry.md はそのまま実践可能な手引書です）。

不向きな用途： 不適：① 単一画面、ノートPC、または独自の端末ベゼルを使いたいプロジェクト（この特定写真の使用が前提）；② アスペクト比を直接変更したい場合（16:9 や 1:1 は後工程のクロップでのみ対応可能で、リグ変更は不可）；③ 端末自体を大きく動かしたい場合（リグの動きは緩やかなプッシュインのみで、それ以外は画面内コンテンツで持たせる必要があります）；④ 素材の著作権・商標権リスクを許容できない商用利用；⑤ 完全オフライン環境でのレンダリング（GSAP および CLI の取得にネットワークが必要）。

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload duo.tar.gz

sha256: d33100badc2a58ee…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit ba7a0bb6d3.