skills.rest
YYG501
YYG501COMMUNITY
Explore all skills by this author →
GitHub

pmai-mockup

Generates and visually audits interactive mockup directions for product design exploration.

4|Updated May 26, 2026
Search Tags:#product management#design system#prototype#interaction design#mockup#visual audit#design exploration
One-click install
npx skills add https://github.com/YYG501/PM-AI-Harness --skill pmai-mockup-yyg501
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pmai-mockup
Source: https://github.com/YYG501/PM-AI-Harness/tree/main/skills/mockup
Command: npx skills add https://github.com/YYG501/PM-AI-Harness --skill pmai-mockup-yyg501

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Product managers often struggle to judge interaction models, information hierarchy, and task paths from abstract discussion alone. This Skill turns a clarified product problem into concrete, viewable interaction directions so the PM can compare real alternatives before committing to a specification. ## Core Features & Use Cases - Interaction Direction Exploration: Generates 2-3 genuinely different directions when real interaction forks exist, or a single recommended draft when they do not, avoiding fake visual-only variants. - Design Basis Compilation: Reads DESIGN.md, the project design system, and existing product pages, then compiles must-inherit, must-reuse, may-change, and guardrail constraints bound to real repository paths. - Visual Quality Gate: Opens each candidate in a real browser or Playwright, runs screenshot-check-fix cycles on desktop and narrow viewports, and blocks unverified drafts from the review board. - Use Case: During module design, the PM needs to decide between a card-based list and a table layout for a task page. The Skill generates both directions covering the full task path and edge states, audits them visually, and presents them on a review board for selection. ## Quick Start Ask the design workflow to explore interaction directions for the current module and present the verified mockups on the review board.

Frequently Asked Questions about pmai-mockup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I explore multiple UI interaction directions before writing a spec?▼

Invoke the mockup capability during the design phase with a complete task definition. It generates 2-3 genuinely different directions when real interaction forks exist, covering the full task path and edge states, then presents them on a review board for selection.

What counts as a real interaction fork versus a visual variant?▼

A real fork changes the interaction model, information hierarchy, main task path, or page transitions in a way that affects task completion. Changes limited to color, font, corner radius, or left-right swapping do not qualify as separate directions.

Does the mockup skill work without a browser or Playwright available?▼

Visual acceptance requires a real browser or Playwright for screenshot-based audits on desktop and narrow viewports. Without one, the receipt must mark both viewports as blocked with reasons, and the draft cannot be presented as visually verified.

Can mockups modify the implementation spec or build targets?▼

No. The skill only writes to the mockups directory and its manifest. It never modifies project.yml implementation entries or module spec files, and returns to the design workflow after the PM selects a direction.

Why does mockup generation stop and return to design sometimes?▼

It returns to design when the input lacks a complete task definition or when the fork is a product-model decision rather than an interaction question. Visual drafts are not used to substitute for product decisions the PM must make first.

Related Skills

Explore More Product & Management Skills→
saranskumarsaranskumar

ux-flow-designer

Design end-to-end user flows with triggers, goals, and branch logic for MVPs.

Community
Intermediate
adhi-jpadhi-jp

vibe-planning

Convert explicit requirements into a formal implementation plan artifact.

Community
Advanced
moonzffmoonzff
1

design-md-authoring

Create and audit DESIGN.md visual design system files for AI-assisted UI generation.

Community
Intermediate
zli5460zli5460
2

claude-design

Generate self-contained HTML prototypes with embedded CSS and JS.

Community
Intermediate