Capture from live app (Addendum B v4)

Use the Chrome extension to create projects from coded apps.

The Blue Painter Inspector Chrome extension lets you capture page structure from any live web app and create a project from it. Compare design flows with your actual implementation.

Steps

  1. Install the Chrome extension from the Downloads page
  2. Navigate to your app in the browser
  3. Click "Capture current page" in the extension
  4. You'll be redirected to Blue Painter to create a project from the capture

The extension extracts links and routes from the page. The project saves the page title and URL. Go to Capture in the sidebar for instructions.

v4 capabilities (planned)

Blue Painter Inspector will support: Quick Audit (record a flow and get a coded flow report with buildability checks), Compare Design vs Implementation (align design screens with live app and highlight gaps), and CI/QA Sanity Check (replay flows on staging to detect regressions).

See Coded flow report for report structure and checks.

What the extension captures (Addendum B 7.3)

  • URL + title per step
  • DOM snapshot (node tree, tag, attributes, roles, ARIA)
  • Computed styles for text and interactive elements (colors, font sizes, spacing)
  • Interaction events (clicks, key presses, navigation, form submissions)
  • Viewport dimensions (for responsive behavior)

Coded flow report (v4)

After capturing or recording a flow with the browser extension, a Coded Flow Report appears in the project. Sections: Coded Flow Overview (flow steps, URL/route names, implementation complexity, responsive/A11y/colorblind badges); Issues View (same system as Figma plus implementation-specific types: focus trap in modal, keyboard navigation skips, text contrast fails WCAG); Design vs Implementation Comparison when linked (side-by-side Figma screen vs live step, differences in components, layout, states, A11y).