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 PANGKAIFENG/ai-product-manager-skills --skill ui-wireframe-to-htmlgit clone --depth 1 https://github.com/PANGKAIFENG/ai-product-manager-skillsWrote 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/pangkaifeng/ai-product-manager-skills/ui-wireframe-to-html)<a href="https://agentmods.dev/skills/pangkaifeng/ai-product-manager-skills/ui-wireframe-to-html"><img src="https://agentmods.dev/badge/skills/pangkaifeng/ai-product-manager-skills/ui-wireframe-to-html/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/pangkaifeng/ai-product-manager-skills/ui-wireframe-to-html"><img src="https://agentmods.dev/badge/skills/pangkaifeng/ai-product-manager-skills/ui-wireframe-to-html.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.00116 | $0.01934 |
| Opus 5 | $0.00058 | $0.00967 |
| Sonnet 5 | $0.00023 | $0.00387 |
| Haiku 4.5 | $0.00012 | $0.00193 |
Grade A, and why
ui-wireframe-to-html 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 12d 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 — 191 lines — stays where its author put it; the contents beside it link to each section on GitHub.
ui-wireframe-to-html
中文速查
- 中文名：PRD 到 UI 线框 / 结构阶段
- 英文稳定名：
ui-wireframe-to-html - 分类：产品与 PRD
- 你可以这样叫我：
把 PRD 变成线框、先出 UI 结构、先做 ASCII 布局、只确认页面结构和状态、生成低保真 HTML wireframe - 适合：从 PRD 界面定义输出 screen inventory、状态模型、ASCII layout 和低保真 HTML mockup，先明确结构和状态再决定是否进入高保真。
- 不适合：直接做高保真视觉；让前端复刻 UI；对齐真实项目组件、token、icon；输出 component map 或 implementation notes。这些场景用
ui-mockup-desktop-workbench。
Relationship To ui-mockup-desktop-workbench
This Skill is the structure-only stage of the broader UI mockup workflow.
Use this Skill when the user explicitly wants to stop at structure, wireframe, information architecture, state model, or low-fidelity HTML.
Use ui-mockup-desktop-workbench instead when the user wants:
- high-fidelity visual handoff
- real frontend project alignment
- project-native preview route/component
- production component mapping
- implementation notes
- screenshots for final UI approval
- "开发完全复刻这个 UI"
The normal staged path is:
PRD -> ui-wireframe-to-html -> structure confirmation -> ui-mockup-desktop-workbench -> visual handoff / preview -> implementation
When ui-mockup-desktop-workbench is already active, do not call this Skill separately. The main Skill includes this structure stage internally.
Overview
将 PRD 中的界面定义逐步推进为：
- Screen inventory
- State model
- ASCII layout
- Optional low-fidelity HTML wireframe
The purpose is to make the page structure, state coverage, and interaction skeleton reviewable before anyone spends effort on visual polish.
Context Intake
优先确认或读取：
- 关联 PRD、页面需求、草稿或 UI 目标。
- 当前页面在全链路中的位置。
- 目标屏幕范围：主页面、列表、详情、弹窗、设置、异常状态等。
- 已有结构定义、流程图、状态说明或截图。
- 是否存在
docs/templates-local/下的 UI override。 - 用户是否明确要求只做结构阶段，还是最终要进入高保真。
If the user provides enough PRD context, proceed with assumptions instead of asking broad questions. Ask only when the missing answer changes page scope or state coverage.
Responsibilities
这个 Skill 负责：
- 读取关联 PRD 和当前模块定位。
- 明确页面在全链路中的位置。
- 提取 screen inventory。
- 补齐关键状态模型。
- 输出 ASCII 结构图。
- 需要时生成低保真 HTML mockup。
- 列出进入高保真前必须确认的问题。
What ships with it
6 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 12d ago First seen · 191 lines · 116 tokens per session scan A 081ac1a3527c
ui-wireframe-to-html is a skill published in the GitHub repository PANGKAIFENG/ai-product-manager-skills (11 stars, last pushed 12d ago), licensed MIT. It adds 116 tokens to every session and 1,934 once invoked, about $0.0006 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
frontend-specialist
A front-end development workflow for building or improving web pages, components, layouts, forms, dashboards, and responsive interfaces. It covers common tools and frameworks such as React, Vue, Next.js, Tailwind, and CSS.
figma-to-elementor
Use when the user says 'figma to elementor', 'build this figma design in elementor', or hands over a Figma frame to rebuild in WordPress. Maps the Figma node tree to Elementor widgets and containers and writes clean Elementor JSON into a draft duplicate, so nothing live is touched.
figma-to-bricks
Use when the user says 'figma to bricks', 'build this figma design in bricks', or hands over a Figma frame to rebuild on a Bricks Builder site. Maps the Figma node tree to native Bricks elements with BEM global classes, imports the frame's palette into the Bricks design system, and writes to a draft, so nothing live…
figma-to-divi
Use when the user says 'figma to divi', 'build this figma design in divi', or hands over a Figma frame to rebuild in WordPress on a Divi site. Maps the Figma node tree to native Divi sections, rows, columns and modules (Divi 5 blocks or Divi 4 shortcodes, auto-detected) and writes to a draft, so nothing live is…
figma-to-gutenberg
Use when the user says 'figma to gutenberg', 'figma to blocks', or hands over a Figma frame to rebuild on a WordPress site that uses the block editor. Maps the Figma node tree to core Gutenberg blocks, registers the frame's palette in Global Styles, and writes to a draft, so nothing live is touched.
html-to-bricks
Use when the user says 'convert this html to bricks' or 'paste html into bricks', or has a Webflow, Framer, CodePen, or old static export to bring into a Bricks site. Converts raw HTML and CSS into native Bricks elements, mapping colors, type, and spacing to design tokens, plus ACSS classes when installed.