1实现原理 · 为什么它能做到
三屏叙事结构写死在正文：封面 → Today's quests（XP ribbon + level bar）→ quest detail（子任务 + 奖励）。
next/src/lib/templates/skills/gamified-app/SKILL.md
- Frame 2: Today's quests + XP ribbon + level bar
注：三屏一次交付，是「app 展示图」而非单页——模型按三帧决定信息量分配。
「暗色舞台」由示例落地为 `--stage: #0e0d0c` 的深色 showcase 底，三台 phone frame 并排。
next/src/lib/templates/skills/gamified-app/example.html
--stage: #0e0d0c;
注：示例另建了 stage-bar 与逐屏 tabbar，观感比正文描述的 4 行规范丰富得多。
等级/XP 语义被固定成可套用的标签：LEVEL / Level 14 / +N XP。
next/src/lib/templates/skills/gamified-app/example.html
<div class="meta"><div class="label">LEVEL</div><div class="name">Level 14</div></div>
注：示例把游戏化词汇（LEVEL、XP、quest、step）都实现了，模型可直接照搬命名。
模板本体就是 prompt：SKILL.md 正文经 loader 读出后与共享前言、用户内容拼装，交给本机 agent CLI 执行。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：运行时不吃模板目录里的代码：/api/convert 只收 {agent, templateId, content}，用 loadSkill(templateId) 取 SKILL.md 正文当 prompt 主体，再交给本机已登录的 agent CLI；HTML 由 stdout 流回前端。
skill 目录是纯文本资产：loader 读盘取 SKILL.md 正文，目录内无任何可执行代码被加载。
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
注：文件系统里的 skill 只是文本：loader 逐个目录读 SKILL.md，frontmatter 抽成 picker 元数据、正文作为 body 返回；本模板目录内没有任何模块被 import 或执行。
共享前言先于模板注入，把「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」定为最高优先级。
next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
注：共享前言在模板正文之前注入，规定「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」——所以本模板里的版式清单是「可复用版式池」，不是页数/帧数上限。
共享前言先于模板注入，把「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」定为最高优先级。
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
注：前言明令禁用文件系统工具、要求纯 HTML 从回复正文流式输出，落盘由前端负责——skill 侧因此没有写盘行为。
skill 目录是纯文本资产：loader 读盘取 SKILL.md 正文，目录内无任何可执行代码被加载。
next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
注：目录里的 example.html 是随仓库分发的黄金样本，预览路由直接读盘返回（无构建、无编译），既是质量基线也是详情页素材。
2核心能力
01三屏 phone frame（封面 / 任务面板 / 任务详情）
02XP ribbon 与等级进度条
03quest tile 双列网格
04子任务 steps 带 done 态与逐条 XP 奖励
05底部 tab bar（面板/详情各一）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 规范过松，出图稳定性差 — 正文仅 4 行，版式细节（网格列数、间距、字号）全靠模型自定，同一模板两次生成的观感差异明显。
- 示例 tip 承诺的 [theme] 交互不存在 — 照抄示例文案会写出做不到的说明；若要交互需另行要求模型补脚本。
- 示例引 Google Fonts（Instrument Serif / Inter / IBM Plex Mono） — 离线或内网环境下字体回退为系统字体，serif 观感会明显走样。
🟢 绿色（风险提醒：绿色，放心使用）。判级对象＝skill 自身目录：目录内出现的 URL 仅 https://fonts.googleapis.com、https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap、https://fonts.gstatic.com —— 全部在 example.html（产物示例）或 frontmatter 出处标注里，SKILL.md 正文无一处要求运行期外发。目录内只有 SKILL.md、example.html，零脚本、零可执行代码、零网络端点、零凭证读取、零写盘指令——照 SKILL.md 执行的结果是宿主模型输出一段 HTML 文本，不含任何外发或落盘动作。宿主壳与产物使用侧行为不作为档位依据，只记入 verdict.risks：shared.ts 前言要求产物引 Tailwind CDN(https://cdn.tailwindcss.com) 与 Google Fonts、runtime 会 spawn 本机已登录的 agent CLI（envFor 透传 process.env）、预览 iframe 为 sandbox="allow-scripts allow-same-origin"。
5第二遍独立确认
- [ok] 规范↔示例：覆盖率 — 正文 4 行（三屏 + quest tile 渐变/等级 ribbon/tab bar）在示例中全部落地：stage-bar + 3 台 phone + level-ribbon + quests 双列网格 + steps + 两个 tabbar。
- [discrepancy] 示例自述的 [theme] 切换 — 示例 tip 写「Toggle [theme] in the toolbar to switch theme & layout」，但全文件无 toolbar 控件、无 <script>——照抄该提示会出现做不到的说明。
- [ok] 「暗色舞台」措辞核对 — 示例 `--stage: #0e0d0c;` 与深色 body 底色落地了正文的 dark showcase stage 描述。
- [discrepancy] 示例规模 vs 规范强度 — 正文只有 4 行规范，示例却是 16KB 完整三屏（含示例自创的 stage-bar/tabbar/steps 命名）——规范未覆盖的实现细节全部由示例单方面定义，两次生成差异可能较大。
- [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html；无 scripts/、无 references/、无数据文件、无包管理器清单。
- [ok] 可执行代码普查 — example.html 内 <script> 计数 = 0，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
- [ok] 外链端点普查 — 目录内 URL：https://fonts.googleapis.com、https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap、https://fonts.gstatic.com（皆为 example.html 产物示例或 frontmatter 出处标注；正文未要求运行期外发）
- [ok] official_desc 逐字核对 — meta.official_desc 与 SKILL.md frontmatter 的 description 逐字一致。
6结论
适合：习惯养成/RPG 化产品概念稿、app 三屏展示图、作品集里的「游戏化」界面样例；正文松、示例具体，适合让模型自由发挥版式。
不适合：需要真实可交互原型（示例无脚本）、需要严格品牌一致性（规范太松无法约束）、需要多语言字体稳定渲染（依赖 Google Fonts）的场景。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 gamified-app.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentf8255d49dbd0de8f…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；package.json "license": "Apache-2.0"；GitHub API spdx_id Apache-2.0）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。