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 中检索不到 "mobile-app" 的硬编码引用，本模板没有被任何代码特判。
模板正文不会单独执行，而是被拼进最终 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=mobile、scenario=design、aspect_hint=iPhone 15 Pro frame（无 featured，选择器里排到推荐桶之后）。选择器按 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.html（6249 字节），无 example.md。
生效链（宿主行为，非本模板代码）：宿主 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）。
模板只锁一屏语义（状态栏→头部→主内容→Tab bar），不给视觉风格清单，风格由共享设计指令（排版/色彩/网格/动效）统一约束。
next/src/lib/templates/skills/mobile-app/SKILL.md
- App header (标题 / 头像 / 搜索)
与 poster-hero / ppt-keynote 不同，本模板没有任何配色或字号硬约束，属"结构型"而非"风格型"模板。
输出长度天然短：一屏 + 四条布局线，不会与共享指令的"内容驱动数量"规则冲突（该规则针对 slide/frame/card/section 数量）。
next/src/lib/templates/skills/mobile-app/SKILL.md
【意图】一个屏幕的 mobile app 设计, 放在像素级 iPhone 15 Pro frame 里。
一屏模板适合"我就想要一张 app 截图"的窄需求；内容多时该选 mobile-onboarding 或原型类模板。
2核心能力
01单屏 App 的信息架构骨架（status bar / app header / main content / bottom tab bar 四层）
02主内容区必须收敛到一个明确 archetype，避免"什么都放一点"
03设备真实感细节：dynamic island 与 safe-area 留白写进规格
04像素级 iPhone 15 Pro 外框作为场景设定（一屏，不做多屏叙事）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind Play CDN（共享指令对产物的要求） |
| network | jsdelivr CDN（可选：图表/动画脚本） |
| network | Google Fonts（共享指令指定） |
| cli | 本机 coding-agent CLI（宿主检测 PATH 并 spawn） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
声明可访问域名与密钥范围
面向管理者
密钥最小权限，保留请求日志
判定依据（文件路径与关键语句摘要）
- 网络端点: 声明外部网络访问: 产物侧（由共享设计指令要求）：生成的 HTML 会在浏览器里引 cdn.tailwindcss.com（Tailwind Play）、Google F
审计说明： 。判级口径：只判本 skill 目录（SKILL.md + example.html），宿主壳与产物外链不参与判级。目录内零脚本、零网络端点、零凭证读取、零写盘指令：全目录 token 扫描（api_key|token|secret|.env|process.env|child_process|fetch(|curl|wget|npm|npx|exec(|subprocess|writeFile|fs.）零命中；SKILL.md 亦未点名任何运行时要引入的 CDN/字体/接口（无 http/CDN/fetch/API 字样）。 仅作说明、不改档的两点：① 宿主壳（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 / 数据 / 模板） — 目录实为 2 个文件：SKILL.md 与 example.html；无 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 15 Pro 边框, 一屏 app 截图）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目（Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI）逐条回到 shared.ts 与 argv.ts 原文取证；本模板无目录级端点条目。
- [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/mobile-app 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] 随包 example.html 的外链与脚本面 — mobile-app/example.html（6249 字节）全文无 http(s) 外链、无 <script>、无 <link>：样式为内联 CSS，属完全自包含的静态预览，预览 iframe 不会因它发起外部请求。
6结论
适合： 适合只需要"一张 iPhone 单屏 app 设计稿"的场景：App 首页/详情页的信息架构初稿、给非设计同事看"我们这个页面长什么样"。内容本身不多、以单屏呈现为主时最省事。
不适合： 不适合需要叙事或长内容的需求（多屏流程、多页 deck、长文档）；也不适合要求指定品牌配色/字体体系的场景——模板对视觉风格零约束，风格一致性得靠共享指令与用户内容自带的设计说明。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload mobile-app.tar.gz
sha256:
Option B · Copy Guide for Agentf478316a24ed4cc0…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.