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.5 | $0.00061 | $0.01902 |
| Sonnet 5.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 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 — 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.
- 1mo 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 (16 stars, last pushed 1mo ago), licensed MIT. It adds 153 tokens to every session and 4,756 once invoked, about $0.0006 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…