Product screens
Clearer navigation, useful status labels, and tables that support the work. Keep the product's rules and data meaning intact.
WingmanPM Product Designer
Give your coding agent better design judgment.
Review and improve product screens with a skill that respects your product, brand, and users.
Same content. Clearer design.
Give the work a clear home.
- Navigation gets its own space, so the main work stays in view.
- Status labels and a grouped overview make the same data easier to scan.
Authored examples with the same content and actions on both sides. Fictional company and sample data. Results depend on your project and agent.
Improve the screens
people use.
For founders, developers, and product teams building with Codex, Claude Code, or Cursor. Start with one screen or a shared design system.
Forms and account flows
Make the next step clear. Include validation, keyboard paths, loading states, and a way to recover when something fails.
AI review flows
Keep scope, sources, uncertainty, and approval in view. Help people check a draft before an action has consequences.
Marketing and design systems
Give new pages a clear direction. Use the brand and shared components already in the project.
Start with the product.
Finish with checks.
Read the context
Inspect the screens, stack, brand, and shared components. Understand what people need to do.
Set the scope
Refine what works, elevate a screen, or explore a new direction. Keep the change tied to your request.
Build the change
Work in your project. Include small screens, real states, and the interactions behind the layout.
Check the result
Use project checks, keyboard review, and browser evidence. Name anything still unverified.
Use it in your
coding agent.
Install the skill, open your project, and ask for the outcome you need. Start with a review.
No WingmanPM account required. Your coding agent’s access and usage costs still apply.
View npm release 1.0.01 Run this in your terminal
npx wingmanpm-product-designer@1.0.0 install --agent codex
2 Open your project in Codex
Start a new agent session, then paste this first request. Replace “billing settings” with the screen you want reviewed.
$wingmanpm-product-designer review billing settings
Node.js 20+ required. Installs the standalone skill for Codex. This request reviews the screen; ask for a fix when you are ready.
Other install methods and compatibility
These commands use npm release 1.0.0. Agent Plugins, Agent Skills, and native Codex and Claude Code plugin setup are in the install guide.
Claude Code’s native plugin uses /wingmanpm-product-designer:wingmanpm-product-designer. The standalone skill above uses the shorter command.
Claude Code and Cursor live behavior tests remain deferred in the published report. Host support does not imply official marketplace approval. Read the compatibility evidence.
The complete skill folder is required. Do not install only the SKILL.md file. Browser checks can need additional project packages and Chromium.
Open source.
Your project stays yours.
A design skill that runs through your chosen agent. Its access stays within the permissions you give that agent.
Read the source- Apache-2.0 licensed
- Read, use, and adapt the source under the license terms.
- No plugin telemetry
- The plugin does not collect usage data or send project files to its publisher. Your agent and selected tools have their own data policies. Plugin privacy.
- Checks have a clear scope
- Browser and accessibility checks help find defects. They do not guarantee a result. React has the most complete generated test setup; other stacks use portable guidance.
- Help comes from the source
- Use the plugin issue tracker for questions and reproducible bugs.