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.5 | $0.00046 | $0.00774 |
| Sonnet 5.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 1mo 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.
- 1mo 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 (16 stars, last pushed 1mo ago), licensed MIT. It adds 116 tokens to every session and 1,934 once invoked, about $0.0005 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
baoyu-diagram
Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system…
understand-figma
Analyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) with a kind:"design" dashboard.
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
design-system-synthesizer
Use when the user says 'build a design system for my site', 'extract design tokens', 'capture my brand', or 'build my style guide', or after a rebrand. Reads representative pages, theme files, and media to extract logo, colors, typography, spacing, and components, then writes a visible style-guide page.
lean-ux-canvas
Guide teams through Lean UX Canvas v2. Use when framing a business problem, surfacing assumptions, and defining what to learn next.
art-direction
Use on any page build, redesign, or 'make it look better' request on a site that has (or needs) a saved Art Direction. Loads the direction before the first element is written, plans tokens in two passes against the direction's donts and the known AI-default aesthetics, builds with tokens preserved, checks the result…