Laowangba PM Prototype Skill
A Codex skill for B2B and B2C product prototypes: derives page structure, sets a design plan and writes specs for Figma.
- 105 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill creates spec files and, with Figma connected, editable frames
- The product description goes to the model and the Figma service
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/laowangba-pm-prototype-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill creates spec files and, with Figma connected, editable frames
- The product description goes to the model and the Figma service
This is third-party code. Review the repository files before installing.
What it does
The skill splits prototype creation into stable steps. First information architecture is derived: entities, roles, task chains and pages are extracted from the brief, without a template admin screen list. Then `design-plan.md` is written with subject, tone, tokens, grid, a signature detail and the difference from a typical solution. Before Figma an Anti-Slop Review checks for the typical look of AI interfaces, and without a PASS status Figma is not created. Each page is described by a structured `{page-id}.page.ui.yaml` spec that accepts later point edits, and generation into Figma goes through editable frames region by region. The output is `ia-draft.md`, `design-plan.md`, page specs and a Figma file link with frame identifiers. The repository holds three examples: a membership system front end, an inventory back end and an AI price-comparison front end.
Who it is for. Product managers who prepare prototypes for discussing requirements and want editable Figma screens rather than images.
Good fit when
- Pages, roles and task chains are derived from a brief without copying a typical admin.
- A prototype is first described in `page.ui.yaml` so individual pages can be edited later.
- Generation into Figma is held back by a check for the template look of AI interfaces.
- Screens of a B2C storefront or B2B back office are needed for team discussion.
Not a fit when
- A final UI for handoff to development is needed: the authors themselves call the result a prototype.
- Figma MCP or the Figma plugin is not configured: writing to Figma is impossible without it.
- The task is a native mobile app with complex gestures.
Example request
Use the prototype generation skill to prepare a member system front-end prototype: IA and design plan first.Limitations
The result is a prototype for discussion rather than a final design: the authors advise making a more polished picture with another tool for presentation and delivery and not handing such a file to a designer as finished UI. Writing to Figma needs a configured Figma MCP or plugin and skills like `figma-use`, and without them design checks must follow `DESIGN.md`. Documentation is in Chinese. The skill is built for Codex. The repository was last updated on 9 July 2026 and uses the MIT licence.
How to disable. Delete the skill folder from the Codex skills directory. The created `ia-draft.md`, `design-plan.md`, `page.ui.yaml` files and the Figma file stay.
FAQ
What is the output?
An IA draft, a design plan, `page.ui.yaml` page specs and a Figma file link with frame identifiers.
Why is a design plan needed?
Without `design-plan.md` Figma is not created: it fixes subject, tone, tokens and the difference from a typical interface.
What is the Anti-Slop Review?
A check before Figma for falling into the familiar look of AI interfaces. If the status is not PASS, generation does not start.
Is Figma required?
Writing the prototype to Figma needs a configured Figma MCP or plugin. Without it only specs and plans remain.
Is the result fit for handoff to a designer?
No, the authors advise using it for requirements and flows and making a final picture with another tool for presentation.
Discussion
No questions or reviews yet.
Related
SkillsA skill for Figma design systems: read-only audits with WCAG checks, component building and token export to code.
Four Codex skills covering product design stages, from reviewing a single screen to comparing visual directions.
A TypeUI Figma plugin that reads a file's styles and generates DESIGN.md and SKILL.md for Claude Code, Codex and Cursor
A Codex skill that reviews UI screenshots and Figma frames, ranks findings and draws annotated images numbered like the report
A design engine skill for local agents: mockups, prototypes, landing pages, dashboards and slides as self-contained HTML right in your editor
uSpec skills document design-system components from Figma: a component contract, color, structure and screen reader behavior.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Laowangba PM Prototype Skill (this card) | no | 105 | |
| figma-use | no | 615 | a CLI for reading and writing Figma from the command line; here a process from IA and design plan to pages and frames |
| PM-Kit | no | 140 | a product manager workspace in Obsidian with standups and decisions; here screen prototypes in Figma |
README in short
The README lists five parts of the process, the repository structure and three ready examples with IA, design plans and page specs.