1实现原理 · 为什么它能做到
本 skill 不是可执行程序，而是一段纯文本提示词模板：宿主用正则解析 SKILL.md 的 YAML frontmatter，把正文 body 作为提示词主体加载。
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
注：仓库对目录约定的自述：‘SKILL.md — frontmatter (id, scenario, tags, …) + prompt body’，以及 ‘Adding a template = adding a folder. No TS code change required’——模板靠目录约定注册；全仓 TS/TSX 中检索不到 "mockup-device-3d" 的硬编码引用，本模板没有被任何代码特判。
模板正文不会单独执行，而是被拼进最终 prompt 的"模板段"：共享设计指令 + 本模板正文 + 用户内容。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：shared.ts 的 assemblePrompt 自述：‘Wrap a per-template instruction body with the shared design directives and the user content tail.’；请求先经 const skill = loadSkill(templateId); 取到本目录的 body，再拼装。
全局"内容驱动数量"规则覆盖模板里的任何数字：模板只定义版面/风格/配色/组件库，不定义输出长度。
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
注：该规则被标为"最高优先级, 覆盖模板里的任何数字"，并明写 deck 类模板里"6-10 张"这类数字"一律视为短示例下的参考下限"。因此本模板给的是可用版面与约束，不是页数上限。
产物形态被全局硬约束：单文件 HTML、纯 HTML 无围栏、第一个字符必须是 <、且不得写文件（由前端捕获 stdout）。
next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
注：同一段还写明 ‘禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具’——文件落盘由宿主前端负责，模板侧不产生写盘行为。
frontmatter 的元数据驱动选择器呈现（中文名/英文名/emoji/描述/分类/场景/画幅/标签/示例元数据）。
next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
注：本模板元数据：category=poster、scenario=product、aspect_hint=1920×1080 (16:9)、featured=47。选择器按 category/scenario 分组、按 featured 排序，全部由 frontmatter 决定，无代码特判。
随包示例资产经两条只读 API 暴露给前端：example.html 原样返回进 iframe，example.md 作为"预览"按钮的输入内容。
next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
注：example.html 的响应头是 Content-Type: text/html; charset=utf-8；另一路由以 content: skill.exampleMd ?? "", 把示例文本交给客户端。本目录：有 example.md（434 字节）与 example.html（8958 字节）。
生效链（宿主行为，非本模板代码）：宿主 spawn 本机已登录的 agent CLI，把拼好的 prompt 经 stdin 送入，从 stdout 流式回收 HTML。
next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
注：子进程以 cwd=process.cwd()（cwd: opts.cwd ?? process.cwd(),）运行、stdio 全 pipe；prompt 走 stdin/--message 而非 shell 拼接（not interpolated into a shell command）。
这是 9 份里规格最密的一份：画布、设备摆位、材质色、反射、光斑、动画全部给到可执行参数，模型只需按参数落地，几乎无自由发挥空间。
next/src/lib/templates/skills/mockup-device-3d/SKILL.md
- **画布**: 1920×1080, 暖灰渐变背景
注：模板自述 Inspired by hyperframes vfx-iphone-device，并在 frontmatter 用 example_source_url 标注出处（属来源标注，不是运行时请求）。
屏幕内容的两种来源在模板里分流：文本走"自动渲染 mock app 界面"，HTML 走"原样嵌入"，并明确不用 iframe/srcdoc 而用 div+Tailwind，避免嵌套文档出问题。
next/src/lib/templates/skills/mockup-device-3d/SKILL.md
用户提供的是 HTML → 原样嵌入屏幕 div 内
注：原文同段还有"单文件 HTML; iframe 不要用 srcdoc 嵌套 (容易出问题), 用 `<div class="screen">` + Tailwind 渲染内容"——这同时是本模板唯一的"嵌入外部内容"面：嵌入的是用户自己的 HTML。
动画被显式设计为可关闭：@keyframes turntable 做 rotateY -12 ↔ 12 的 8s 往复，并允许按 prefers-reduced-motion 关闭。
next/src/lib/templates/skills/mockup-device-3d/SKILL.md
@keyframes turntable
注：无障碍考量写进模板正文，是这 9 份里唯一带 motion 偏好的模板。
2核心能力
01用 CSS 3D transform 伪造 GLTF 设备展架（1920×1080 画布 + 反射地面）
02iPhone 摆位与材质写死到 transform / 边框色 / 圆角 / 屏幕宽高
03屏幕内容双来源：用户给文本→渲染 mock app 界面；用户给 HTML→原样嵌进屏幕 div
04禁止外链 mockup 图片，设备一律 CSS / SVG 现画
05反占位符纪律：屏幕内必须填用户真实数据
06可选的 8 秒转盘动画并支持降低动态偏好
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Tailwind Play CDN（共享指令对产物的要求） |
| network | jsdelivr CDN（可选：图表/动画脚本） |
| network | Google Fonts（共享指令指定） |
| cli | 本机 coding-agent CLI（宿主检测 PATH 并 spawn） |
| network | 随包示例 example.html 的外链（产物示例） |
| network | 示例出处标注（frontmatter，非运行时请求） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 用户内容逐字拼进 prompt，无隔离标记 → 指令注入面 — assemblePrompt 把用户内容直接接在 ‘【用户内容】:’ 之后，模板正文在前、用户内容在后且无分隔；宿主侧 agent 以高权限运行（claude 为 --permission-mode bypassPermissions），注入若生效即为高权限落地。
- 宿主环境变量全量透传给被 spawn 的 CLI — argv.ts envFor 以 ‘const base = { ...process.env };’ 构造子进程环境：shell 里存在的一切变量（含各类 *_API_KEY）都会随 agent 进程可见。属宿主行为，非本模板代码。
- 预览 iframe 允许脚本且同源 — 产物/示例经 sandbox="allow-scripts allow-same-origin"（template-picker.tsx:544 与 preview-pane.tsx:297）加载；同源 + 允许脚本意味着产物内 JS 可达宿主页面上下文。本模板的 example.html 不含 <script>，风险来自将来生成的产物。
- 产物运行期外链第三方 CDN — 共享指令要求 <head> 引 cdn.tailwindcss.com（必要时 jsdelivr / Google Fonts）：断网或 CDN 变更会让产物外观退化；CDN 被投毒则脚本进入产物执行环境，模板侧无 SRI/完整性校验。
风险提醒：绿色，放心使用。判级口径：只判本 skill 目录（SKILL.md + example.html/example.md），宿主壳与产物外链不参与判级。目录内零脚本、零凭证、零写盘指令、无 SKILL.md 要求的运行时外链。目录内实际出现的端点有三处，均属产物/标注而非 skill 运行指令：① example.html 在 <head> 引 cdn.tailwindcss.com（随包静态预览）；② frontmatter 的 example_source_url=https://hyperframes.heygen.com/catalog 为出处标注（前端展示用）；③ SKILL.md 正文点名 hyperframes vfx-iphone-device 作为灵感出处。另需正名："绝不外链 mockup 图片 URL"这条属禁令而非外发要求。 仅作说明、不改档的两点：① 宿主壳（loader.ts → assemblePrompt → agents/invoke.ts spawn 本机 CLI；claude 参数含 --permission-mode bypassPermissions，envFor 以 {...process.env} 全量透传环境变量）属宿主行为，已写入 verdict.risks；② 宿主注入的共享设计指令要求产物在 <head> 引 Tailwind Play / Google Fonts（属产物运行期外链）。
5第二遍独立确认
- [ok] skill 目录资产面（脚本 / references / 数据 / 模板） — 目录实为 3 个文件：SKILL.md 与 example.html、example.md；无 scripts/、无 references 目录、无任何可执行文件（.sh/.py/.js/.mjs/.ts 零命中）。
- [ok] 「无脚本、无网络、无凭证、无写盘」的反例搜索 — 对目录递归 token 扫描（api[_-]?key|token|secret|\.env|process\.env|child_process|fetch\(|curl |wget |npm |npx |exec\(|subprocess|writeFile|fs\.）：零命中；SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描，仅命中 font-semibold / font-black 这类字重类名，无端点。
- [ok] 官方描述 vs 实际能力（有无夸大） — frontmatter description（iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目（Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI）逐条回到 shared.ts 与 argv.ts 原文取证；本模板另有 example.html 的 cdn.tailwindcss.com 外链，已在该 example.html 原文中定位。
- [ok] 宿主执行链（供 security.reason / verdict.risks 使用，不参与判级） — prompt 经 stdin 送入被 spawn 的本机 CLI（invoke.ts），HTML 从 stdout 分流捕获；claude 参数含 --permission-mode bypassPermissions、envFor 透传 process.env；预览 iframe sandbox="allow-scripts allow-same-origin"（template-picker.tsx:544 / preview-pane.tsx:297）。
- [ok] 路径与 commit 一致性 — 工作副本 /var/ytdown/skills-portal/spy-repos/html-anything 的 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 一致）；skill.path=next/src/lib/templates/skills/mockup-device-3d 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] "屏幕内嵌用户 HTML"是否等于外部内容注入 — SKILL.md 说的"原样嵌入屏幕 div 内"是把用户提供的 HTML 渲染进产物里的 <div class="screen">（同页同上下文），不是把远端页面抓进 skill；目录内无抓取代码。风险仍在产物侧（嵌入脚本与会话同域执行），已写入 verdict.risks。
- [ok] example_source_url 会不会被运行时请求 — loader.ts 仅把它当字符串放进 meta.example.source（fm.example_source_url ? {...} 分支），preview / example 两个路由只做 loadSkill + 返回 JSON 或 HTML；全仓未见对该 URL 的 fetch。
6结论
适合：适合产品发布/App 演示/设计稿展示：需要"把 UI 放进真实设备屏幕里"的单图或单页展架，且不方便准备 3D 资源时。
不适合：不适合需要真实 3D 旋转/运镜的视频级需求（本模板是仿 GLTF 的静态 CSS 展架）；不适合要求使用官方设备图/外部 mockup 素材的场景——模板明确禁止外链 mockup 图片。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 mockup-device-3d.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent26cd54243c71eab9…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nexu-io / nexu-io/html-anything
原始 GitHubnexu-io/html-anything ↗
Stars8827
最近推送2026-09-15
本 skill commit
553ed98c28许可Apache-2.0（仓库根 LICENSE 首两行为 "Apache License" 与 "Version 2.0, January 2004"；pool.json 记 license=Apache-2.0）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。