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-mockup-desktop-workbenchgit 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-mockup-desktop-workbench)<a href="https://agentmods.dev/skills/pangkaifeng/ai-product-manager-skills/ui-mockup-desktop-workbench"><img src="https://agentmods.dev/badge/skills/pangkaifeng/ai-product-manager-skills/ui-mockup-desktop-workbench/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-mockup-desktop-workbench"><img src="https://agentmods.dev/badge/skills/pangkaifeng/ai-product-manager-skills/ui-mockup-desktop-workbench.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.00153 | $0.04756 |
| Opus 5 | $0.00077 | $0.02378 |
| Sonnet 5 | $0.00031 | $0.00951 |
| Haiku 4.5 | $0.00015 | $0.00476 |
Grade A, and why
ui-mockup-desktop-workbench 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 — 333 lines — stays where its author put it; the contents beside it link to each section on GitHub.
ui-mockup-desktop-workbench
中文速查
- 中文名：高保真 UI 交付对齐器 / 桌面工作台 UI Mockup 生成器
- 英文稳定名：
ui-mockup-desktop-workbench - 分类：产品与 PRD
- 你可以这样叫我：
基于 PRD 和 UI 规范出高保真 mockup、先从 PRD 出 UI 结构和 ASCII 布局再做高保真、生成桌面工作台真实页面、把这个 Agent Client PRD 做成可交付开发的 UI、让前端按这个 UI 复刻 - 适合：把 PRD、UI 规范、真实项目组件、参考截图和状态清单转成先结构、后视觉、再交付实现的 UI contract、mockup 或项目原生 preview。
- 不适合：问题还没定义清楚；只需要 PRD 文案；只做移动端或营销页；不需要视觉/状态确认而是直接写生产功能。
Overview
Use this Skill when the goal is not just a pretty standalone page, but a staged UI handoff that product, design, and engineering can inspect and implement from.
The default output is a UI implementation contract, not disposable HTML. The contract starts with UI structure and states, then moves to visual fidelity only after the screen model is coherent. Standalone HTML is allowed only as one output mode. When the user provides a real frontend project path and wants development to reproduce the design, prefer a project-native preview route/component using the real app's components, tokens, icons, and layout conventions.
The workflow combines:
structure-onlydiscipline: structure and state before polish.- Desktop Agent workbench patterns: navigation, task list, execution canvas, artifact/workspace panel, settings, and result surfaces.
- User-provided UI specifications: tokens, layout rules, component style, copy tone, and interaction constraints override generic design instincts.
- Project-native design discovery: real routes, components, styles, tokens, icons, screenshots, and nearby states must be inspected before claiming production alignment.
- Frontend design quality: dense but readable desktop UI, realistic data, stable dimensions, no decorative one-note visual filler.
Structure-only Mode
structure-only is the lightweight mode for users who only want UI structure, state model, ASCII layout, or a quick low-fidelity HTML wireframe. It is part of this Skill, so there is only one UI trigger surface.
This Skill owns the full chain:
What ships with it
11 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.
- evals/evals.json 12 KB
- references/desktop-workbench-ui-principles.md 5.7 KB
- references/mockup-output-contract.md 10 KB
- references/output-mode-selection.md 902 B
- references/templates/ascii-layout.md 1.0 KB
- references/templates/screen-inventory.md 555 B
- references/templates/state-model.md 743 B
- references/templates/wireframe-handoff.md 695 B
- references/verification-checklist.md 747 B
- scripts/check_mockup_package.py 1.9 KB runs code
- tests/test_check_mockup_package.py 2.2 KB runs code
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 · 333 lines · 153 tokens per session scan A a9764d938fc5
ui-mockup-desktop-workbench is a skill published in the GitHub repository PANGKAIFENG/ai-product-manager-skills (11 stars, last pushed 12d ago), licensed MIT. It adds 153 tokens to every session and 4,756 once invoked, about $0.0008 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.