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 agentmods add skills/ryanzhao1011/workframe/html-demonpx 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.svg" alt="Measured on agentmods" 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 | $0.00085 | $0.01889 |
| Opus 5 | $0.00043 | $0.00945 |
| Sonnet 5 | $0.00017 | $0.00378 |
| Haiku 4.5 | $0.00009 | $0.00189 |
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 4d 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 — 78 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.
- 4d ago First seen · 78 lines · 85 tokens per session scan A e009b04045c9
html-demo is a skill published in the GitHub repository ryanzhao1011/workframe (4 stars, last pushed 17d ago), licensed MIT. It adds 85 tokens to every session and 1,889 once invoked, about $0.0004 per session on Opus 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
Generate HTML prototypes (single-file, browser-openable) for product mockups using the user's design system — fonts, color scales, radii, shadows, components, all driven by a tokens.css file. Use when the user asks to make a 原型 / mockup / HTML 设计图 / 设计图给前端 for a PRD module, OR redesign an existing prototype. Output…
ui-walkthrough
把一份 UI 设计 HTML 和研发上线的页面，同视口、同状态截图比对 + 读 computed style 实锤，产出 UI 还原度差异清单（结构 / 组件 / 颜色 / 字体 / 圆角 / 图标 / 间距 七维，每条标明设计值 vs 线上值）。Use whenever PM 说「UI 走查」「走查一下 UI」「对一下 UI」「UI 还原度」「还原度走查」「线上跟设计稿对一下」「前端还原得对不对」「页面跟这份 HTML 对一下」「UI 验收」「设计还原走查」，或给出 设计 HTML 路径 + 线上 URL 让 Claude 比视觉差异。区别于 feature-acceptance skill：那个验业务逻辑 / 字段 / 操作…
frontend-ui-ux
Designer-turned-developer who crafts stunning UI/UX even without design mockups.
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
design-to-code-check
Check alignment between a specific design specification and its code implementation — a focused, single-component or single-screen comparison. Trigger when someone says: does this match the design, check implementation, design code alignment, what's different between the design and the build, spec check…
frontend-patterns
Context enrichment for frontend UI development using shadcn/ui and Tailwind CSS. Use when building component libraries, implementing UI designs, theming, or working with accessible React components.