web framesImport project
Choose a supported web project. Web Frames discovers routes, attaches to your local dev server, and maps pages spatially on the canvas.
Developer preview · macOS
The visual workspace for your next product review.
Bring live web pages, mobile screens and PDF references onto one native Mac canvas. Compare designs, collect component variants and pin precise feedback. Give Codex or Claude Code the visual context, then review the proposed changes before Apply.
Version 1.1.9 · Apple notarized · Apple Silicon · macOS 15+ · Release notes
Import project
→
Explore live pages
→
Compare or comment
→
Fix with your agent
→
Review & apply
Core workflow
From UI exploration to a reviewed fix.
Visual QA usually fractures across browser tabs, screenshots, chat threads, and unverified AI edits. Web Frames brings project pages, visual evidence, and guided agent fixes into one continuous loop.
Explore live pages
Interact with live localhost pages, public URLs, and reference images (PNG/SVG/PDF) on an infinite canvas with real DOM and responsive viewports.
Compare or comment
Pin precise feedback directly to UI elements. Live frames capture DOM hierarchy and styles; reference images capture crops and pin coordinates.
Fix with your agent
Send open comments to Codex or Claude Code through your signed-in connection, or expose them to other tools via local MCP. Agents can resolve comments when you enable that permission.
Review and apply
Inspect exact side-by-side diffs before anything is written to disk. Confirm changes, reload the live frame, and verify the updated UI.
Developer preview
Web, mobile and PDF references in one workspace.
Review live pages, simulator screens, components and PDF pages together. Keep feedback attached to the evidence, then give your agent a focused task.
Live pages on an infinite canvas
Arrange localhost dev servers, public websites, and reference images side-by-side. Pan, zoom, and inspect responsive viewports on a native canvas instead of flipping between disconnected browser tabs.
Components & CSS variables
Inventory exported components and tokens directly from project source. Preview supported components in isolation (mock data or environment configuration may be required).
Routes & server controls
Import supported web projects to auto-discover routes, place pages on the map, and monitor connected dev server status in real time.
DOM-aware annotations
Pin feedback directly to UI elements. Live frames capture selector, DOM context, and styles; reference images capture frame title, coordinates, and crops.
Fix with your agent
Send open comments and visual evidence to your signed-in Codex or Claude Code connection to generate targeted code patches under your supervision.
Connect your agents with MCP
Use the setup wizard to connect Claude Code, Claude Desktop or another MCP client and test board access. Agents can read comments, screen recipes and references. Comment status and screenshot updates have separate permissions, both off by default.
Implementation vs reference diff
Compare live localhost frames with PNG or SVG design references. Astra analyzes matching viewports to pinpoint visual differences and layout drift.
The model proposes. You decide.
In the built-in Fix workflow, proposed changes appear in an exact diff viewer. Apply writes the patch only after your review. Independently running agents retain their own tools and permissions.
PDF pages become frames
Import a deck, specification or exported design as individual image frames. Choose all pages or a range, add comments and compare them with your implementation. Images stay inside the board after the original PDF is moved. One Undo restores the whole batch.
Native iOS & Android screenshots
Capture screens directly from iOS Simulator and Android Emulator. Record actions, save test data and themes, build and install your app, then refresh up to 20 screens together with one Undo. Preview the selected screen live without replacing its saved screenshot. Runs locally with Xcode or Android SDK/JDK; no tapflow account or extra service required.
Your variants, your reference
Collect related frames in a section, choose its reference and give your agent a task. Magnetic guides help align frames; screenshot batches arrive in a spaced grid. Save screen flows and deeplinks on image frames so an external agent can capture the right screen. Screenshot updates preserve comments and links, and Undo stays correct after saving and reopening.
Focused on supported web projects
Web Frames is currently in developer preview. We support select web project layouts, and component previews depend on project configuration. Broad framework omniscience, auto-detection of every dynamic state, and automatic refreshes of static imported screenshots are not supported. AI features require a connected, signed-in coding agent; they are not fully offline.
Roadmap
What is available, and what can follow.
Web Frames is built step-by-step with clear milestones. No speculative timelines — here is what is available in preview and what remains an idea for later.
Available in preview
Web workspace
The complete web loop: live localhost and public web pages on an infinite canvas, route discovery, dev server control, component and CSS variable inventory, visual and DOM-aware comments, Astra comparison, and Fix with your agent with explicit diff review.
Future idea
Component cleanup
Advanced inventory intelligence: detect similar and duplicate components across the codebase, analyze real-world usage patterns, prune unused components, and consolidate styles with AI agents — with all changes subject to review and confirmation.
Available now: manually collect variants, choose a reference and assign an agent task. Automatic grouping and duplicate detection remain planned.
Available in 1.1.8
iOS & Android
Native simulator capture, action recording, batch refresh, build and install, saved test states and a live preview of the selected screen. Refresh the same cards while preserving comments, links and Undo history.
Requires local Xcode/iOS runtime or Android SDK/JDK. Agent captures and project builds each need separate permission. Test states prepare your app with saved values and actions; they do not create backend accounts.
Start with a real review task.
Step-by-step guides for the ways you already work: specifications, competitor research, component consistency and reviewed code changes.
Review a PDF beside your UI
Turn selected pages into frames, pin the exact detail and keep your references with the board.
Turn competitor research into a brief
Compare one flow, keep observations attached to screens and ask an agent for a prioritized plan.
Choose the component to follow
Collect related variants, pick the reference yourself and describe the change before code is edited.
Design review becomes actionable when the feedback, the code change, and the proof live in the same place.
WEB FRAMES · NATIVE VISUAL WORKSPACE FOR WEB PROJECTS
Developer preview
Bring your next review into Web Frames
Web Frames is a native macOS developer preview designed for developers, designers, and teams building products with AI coding agents. Explore the project, join the discussion, and follow our roadmap.