product-design-audit

Audits product flows by capturing screenshots and reporting UX and accessibility findings.

634|124|Updated Feb 10, 2026
One-click install
npx skills add https://github.com/AIDotNet/OpenCowork --skill product-design-audit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: product-design-audit
Source: https://github.com/AIDotNet/OpenCowork/tree/main/resources/extensions/product-design/skills/product-design-audit
Command: npx skills add https://github.com/AIDotNet/OpenCowork --skill product-design-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Reviewing a product flow manually means clicking through every step, taking screenshots, and writing up UX and accessibility notes by hand. This Skill automates that evidence-gathering process so audits are grounded in real screenshots rather than memory or opinion.

Core Features & Use Cases

  • Screenshot-first auditing: Captures each step of a flow with the in-app Browser, Chrome, or Playwright fallback, then validates every saved image before using it as evidence.
  • Structured findings: Produces numbered step lists with strengths, UX issues, accessibility risks, and evidence limits tied to specific screenshots.
  • Flexible destinations: Places screenshots and notes in Figma (ordered rows with annotations) or a local folder, keeping a local copy either way.
  • Use Case: Ask it to audit your app's onboarding funnel; it walks each step, saves numbered screenshots like 01-start.png, and delivers a step-by-step report of friction points and accessibility risks.

Quick Start

Audit the checkout flow of my web app, capture screenshots of each step, and save the findings to a local folder.

Frequently Asked Questions about product-design-audit

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

FAQPage Schema
How do I audit a product onboarding flow with screenshots?

Name the product, the flow, and a destination (Figma or a local folder). The skill walks each step in a browser, captures and validates a screenshot per step, and writes notes covering strengths, UX issues, and accessibility risks tied to each image.

Can a UX audit be exported to Figma?

Yes. When Figma is the destination, screenshots are placed left to right in rows with step numbers and notes underneath, then wrapped in a titled section. A local copy of every screenshot is kept even when Figma succeeds.

Does a screenshot-based audit prove WCAG accessibility compliance?

No. The audit reports accessibility risks visible in screenshots, such as contrast or labeling concerns, but explicitly states what still needs testing. Full WCAG compliance cannot be claimed from screenshots alone.

What happens if the browser cannot capture a step in the flow?

The skill tries the in-app Browser first, then Chrome, and asks before falling back to Playwright. If no tool can capture a valid screenshot, it stops and reports the blocker instead of fabricating evidence.

What are the limitations of automated design audits?

Findings are limited to what screenshots and observed behavior show in the current run. Cached screenshots, prior chats, and memory are not accepted as evidence, and dynamic states that cannot be captured are reported as named blockers.