Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add ryanzhao1011/workframe --skill html-demogit clone --depth 1 https://github.com/ryanzhao1011/workframeWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/ryanzhao1011/workframe/html-demo)<a href="https://agentmods.dev/skills/ryanzhao1011/workframe/html-demo"><img src="https://agentmods.dev/badge/skills/ryanzhao1011/workframe/html-demo/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/ryanzhao1011/workframe/html-demo"><img src="https://agentmods.dev/badge/skills/ryanzhao1011/workframe/html-demo.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00169 | $0.01881 |
| Opus 5.5 | $0.00068 | $0.00752 |
| Sonnet 5.5 | $0.00034 | $0.00376 |
| Haiku 4.5 | $0.00017 | $0.00188 |
Grade A, and why
html-demo scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 20d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 74 lines — stays where its author put it; the contents beside it link to each section on GitHub.
仿真型 HTML 交互 demo
服务「demo 先行」工作流：先出可交互 demo 多轮快速迭代、拍板交互细节，再写 PRD（prd-writer「demo 先行变体」）。
与 prd-writer S5 的「展示型原型」（PRD 写完后生成、功能模块平铺、截图导向，规范见
prd-writer/html-prototype.md）是两种形态，按场景选用：迭代敲定交互 → 本 skill；为已定稿 PRD 配图 → 展示型。
Workflow
Step 1: 输入确认 —— 用户截图（复刻基准，缺则先要）+ 需求一句话
Step 2: 生成 v1 —— 自包含单文件落 tmp/{需求名}-交互方案.html，写完提示用户打开预览
Step 3: 多轮迭代 —— 就地修改唯一一份，每轮改完提示刷新查看；不另存副本、不留版本文件
Step 4: 拍板归档 —— demo 复制到对应需求 prototypes/（删除 tmp/ 原件避免双源）；
需要正式 PRD 时衔接 prd-writer「demo 先行变体」（交互细节从 demo 代码提取）
（按需）Step 5: 关键状态截图 —— 调 screenshot skill 归档 assets/，PRD 嵌图
页面调试确认（默认不开浏览器，按判断树决定）
默认口径：写完直接交付，提示用户刷新查看，由用户人工验收——不开浏览器（实战沉淀：常规控件盲改命中率足够高，起浏览器的时间成本大于收益）。
仅以下三种情况开 Claude in Chrome 实时核对：
| # | 触发 |
|---|---|
| 1 | 用户明确要求看效果，或提出视觉问题（"太丑" / "对不齐" / "显示不对"）——此时必须看着调，不盲改 |
| 2 | demo 含自定义视觉形态：图表 / 矩阵热力图 / 时间轴、动效与过渡、复杂布局（多列网格、自适应宽度、浮层定位、拖拽） |
| 3 | 高保真复刻截图是本次交付重点 |
明确不开（无论首版还是迭代）：常规表单控件（输入框 / 下拉 / radio / checkbox / 开关 / 按钮 / 普通表格列表）、文案替换、选项增删与排序、默认值调整、删除已有内容。简单需求的首版 demo 同样不开。
开了之后的操作纪律：
- 后台跑
python -m http.server <port> --directory "tmp"→ 扩展navigate到http://localhost:<port>/{需求名}-交互方案.html（中文文件名需 URL 编码）→ 之后computer screenshot/read_page/javascript_tool均正常 - 关键坑：Claude in Chrome 扩展无法操作
file://本地页面（navigate / screenshot / read_page 全被拒，报 "browser-internal or unparseable URLs"），必须走http://localhost - server 起一次保持到 demo 拍板，不每轮起停
- 核对用
javascript_tool直接设状态再截图，不用computer点击——扩展的点击 / 滚动会误触发页面事件改乱 demo 状态（实证：选中项莫名跳变，白排查一轮） - 兜底：扩展未安装 / 用户不用 Chrome / 无浏览器权限 / 连接失败时，优雅回退到「写完提示用户打开预览、每轮改完提示刷新查看」，由用户截图 / 口头反馈——用户自查路径始终保留为 fallback
质量规范（生成与迭代）
- 自包含单文件：一个 HTML 内联全部 CSS/JS（CDN 可选）；落
tmp/唯一一份就地迭代 - 复刻真实：以用户提供的截图为准复刻目标系统的布局与视觉；假数据贴近真实业务（真实风格的文案 / 标签值 / 数据形态）。项目级视觉口径（主题色参考等）由项目 local rule 定义
- 全状态可达：每个状态（成功 / 失败 / 空 / 加载中 / 禁用）必须能通过界面操作到达——为不易自然触发的状态提供模拟开关（如「模拟失败」toggle、空态切换），不允许存在"改代码才能看到"的状态
- mock 标注：演示性假设（能力映射、概率模拟等）集中为顶部常量 + 注释「演示用，实际以 {真实来源} 为准」，防止评审者当真
- 代码组织利于反向提取（衔接 prd-writer demo 先行变体（S3 交互细节提取））：状态机集中管理、配置常量化、关键交互规则带注释——写 PRD 时直接从代码读取状态、文案、禁用与显隐逻辑，不靠回忆对话
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 20d ago Changed · -4 lines · +84 tokens per session 4db5eecab280
- 1mo ago First seen · 78 lines · 85 tokens per session scan A e009b04045c9
html-demo is a skill published in the GitHub repository ryanzhao1011/workframe (7 stars, last pushed 21d ago), licensed MIT. It adds 169 tokens to every session and 1,881 once invoked, about $0.0007 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
html-prototype
A method for creating single-file HTML mockups that open in a browser and follow a project's design tokens, such as its fonts, colours, spacing, corners, and shadows.
ui-walkthrough
A UI comparison skill that checks a design HTML file against a live webpage at the same screen size and state. It reads computed styles, the actual values applied by the browser, to document differences in layout, components, colors, fonts, corners, icons, and spacing.
frontend-taste
Premium frontend design skills that override LLM defaults. Prevents generic 'AI-looking' UI. Enforces deterministic typography, calibrated color, asymmetric layouts, spring physics, hardware-accelerated motion. Triggers: 'UI tasarla', 'design a UI', 'premium landing page', 'frontend taste', 'anti-slop', 'dashboard…
design-tokens
Project-level DESIGN.md tokens reference. When the project has a DESIGN.md file, agents producing UI / components / visuals must consult this skill to use canonical color/typography/spacing tokens rather than inventing new ones. Triggers on: UI generation, component creation, design brief, visual asset, tailwind…
frontend-design
Build web pages, components, landing pages, dashboards, or UI layouts. Use when asked to "build a page", "create a component", "design a landing page", "make a dashboard", or any frontend/UI implementation task.
frontend-ui-ux
Designer-turned-developer who crafts stunning UI/UX even without design mockups.