Make Demo Videos & Audit My UX/UI with Claude

Your app already contains a design system. Make it visible.

Designed and built by Legion Code Inc.

Make Demo Videos & Audit My UX/UI with Claude turns a running web application into a documented component library, measured design tokens, organized screenshots, demo videos, and actionable UI inconsistency findings.

Inspect what users actually see. Find mismatched colors, inconsistent spacing, and components that behave like they were built by five different teams. Package the results for Claude Design or map them to shadcn/ui.

Designed and built by Legion Code Inc.

I am Legion. We are Legion.

Quick start

claude plugin marketplace add legioncodeinc/app-auditor-plugin-claude
claude plugin install webapp-capture@legioncodeinc

Then start Claude Code in a project where your app is running:

/webapp-capture doctor
/webapp-capture all http://localhost:3000

The first command reports missing local requirements and their fixes. The second opens intake and dry-run steps before capturing the full app.

What you get

Type /webapp-capture in Claude Code, answer a few questions, log in once in a browser window, and Claude does the rest.

The package is built from measured values, never guesses. It reads the rendered page, not your source, so it works with React, Svelte, Vue, Next.js, Rails, plain HTML: anything that runs in a browser.

Proven on a real app

The first production run captured an 87-route AI gateway dashboard: 107 page states, 25,698 elements, grouped into 948 visual groups and merged into 252 documented components, with 255 icon glyphs, candidate tokens, and a 74-finding visual audit. Findings included seven near-identical white overlays used 1,678 times, eight different fills for "primary" buttons, and three incompatible treatments for destructive actions.

Installation

The quick start is the recommended Claude Code installation path. The equivalent interactive commands are /plugin marketplace add legioncodeinc/app-auditor-plugin-claude and /plugin install webapp-capture@legioncodeinc.

Plugin distribution for Claude Cowork

Download dist/webapp-capture-plugin-1.1.0.zip from this repository and upload it as a plugin. Use the /webapp-capture command from the plugin's commands.

Skill-only distribution for claude.ai

Download dist/webapp-capture-stinger-1.1.0.skill and upload it under Settings, Capabilities, Skills. The skill carries the full procedure; script-based capture needs an environment that can run Node and a browser.

Verify downloads against dist/SHA256SUMS.

Requirements

The plugin's script dependencies (Playwright core and sharp) install on first use.

How it stays safe

• You log in, Claude never does. A real browser window opens; you sign in (MFA and SSO work). Claude never sees, types, or stores your password. The saved session is owner-only and checked for gitignore coverage.
• Read-only by default. Ordinary capture navigates pages, scrolls, and switches tabs. An optional local or seeded onboarding plan can submit only the exact setup actions you approve, once, with a screenshot before every step and built-in blocks for secrets and destructive controls.
• Stays on your app. Navigation to any other origin is blocked; popups are closed.
• Secrets stay out. Captured text passes redaction patterns seeded from GitHub secret scanning and the OWASP logging guidance. Sensitive screen regions are painted over with solid masks.
• Demos need your approval. The recorder refuses to run a demo plan you have not approved, and refuses destructive-looking clicks or typing into secret fields.
• Nothing ships silently. Every run ends with a report and a security, quality, and repository hygiene gate before anything is committed.

What's inside

.claude-plugin/marketplace.json          marketplace catalog (legioncodeinc)
plugins/webapp-capture/
  .claude-plugin/plugin.json             plugin manifest
  commands/webapp-capture.md             /webapp-capture orchestrator instructions
  agents/webapp-capture-worker-bee.md    agent for delegated capture runs
  skills/webapp-capture-stinger/
    SKILL.md                             the skill
    guides/                              foundation, demo, library, audit, shadcn procedures
    references/                          field tables, shadcn catalog, prompt templates, research archive
    scripts/                             doctor, session, parallel runner, capture, inventory, handoff, shadcn, demo, audits
dist/                                    Cowork plugin zip, claude.ai skill file, checksums
tools/build-dist.sh                      rebuilds dist/

Build from source

git clone https://github.com/legioncodeinc/app-auditor-plugin-claude.git
cd app-auditor-plugin-claude
claude plugin validate ./plugins/webapp-capture
tools/build-dist.sh

Support

For installation help and reproducible bug reports, see SUPPORT.md. Feature requests and fixes are welcome through GitHub Issues and pull requests.

Support development

If this plugin saves you time, help us keep building.

Sponsor Legion Code Inc. to support maintenance, documentation, compatibility updates, and new capabilities for our open-source developer tools.

I am Legion. We are Legion.

Verified sponsorship links will be added after the corresponding funding accounts are active.

Contributing

See CONTRIBUTING.md for setup, validation, generated-distribution rules, and pull-request expectations. Please read SECURITY.md before reporting a vulnerability.

Credits

Webapp Capture was designed and built by Legion Code Inc.: the capture pipeline, the component grouping and merge method, the safety model, the orchestration, and the research behind it. It stands on Playwright, sharp, FFmpeg, and the Design Tokens Community Group format.

License

Licensed under the GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later). Use it commercially or privately, free of charge. Keep the copyright and license notices intact, and if you modify it, share your changes under the same license.

© 2026 Legion Code Inc.

I am Legion. We are Legion.

#vibewithlegion