Media
4 items
Description
Record a walk through any web product. Get a map of its pages and components to annotate, compare, document or hand to AI. InSite turns a walk through any web product into a map of how it’s built: the pages you opened, the pages you didn’t open, what’s on each screen, and how you got from one to the next. If InSite spared you some headaches, a coffee keeps me building. Thank you ☕ buymeacoffee.com/seralek How does it work: Click Start recording and use the product the way a customer would. InSite reads each page as you go. It finds the header, sidebar, search, filters and main content, names the controls inside them, and picks out tabs, chips, navigation items and main calls to action. Pop-ups and side panels become their own pages, so the screens where most of the work happens don’t get lost. Forms are listed by field, type and whether they’re required, never by what was typed. Each step keeps a screenshot, with sensitive areas blurred on your device. When you stop, the summary tells you how many pages you opened out of the ones InSite found, then lists them in the order you opened them. Open any page to see its screenshot with each control outlined, what you did there, and what happened after each click. See what you missed. Links you passed but never clicked stay on the map as pages you didn’t open, grouped by section. Nothing is filled in with guesses. Record the same product again in the same project and those pages fill in as you visit them. InSite finds the components a product reuses across pages (the same card, filter bar or empty state) and shows where each one appears. It also pulls the colours, font sizes, corner radii and spacing the product uses most, so you get a rough token sheet of any product you record. Cutomize your canvas: The canvas lays out every page as a card. Move cards around, add notes to a page or to a single button on its screenshot, draw frames around groups like “Onboarding” or “Settings”, draw your own arrows between pages, and tag cards as Good pattern, Pain point, Copy this, Question or Bug. Fix anything InSite got wrong, like a tab it called a chip. Your additions are always marked “Added by you”, and the original recording is never changed. Compare products side by side: Put recordings of different products in the same project and the canvas gives each its own frame. See where each puts search, how deep the settings go, and which parts of the interface they reuse. Export it where you work: • Documentation: Markdown to paste into Notion, Confluence, Linear or GitHub. • Storybook docs: MDX, ready to drop in as a docs page. • AI readable: a small JSON file any AI assistant can read, so it understands the product’s pages, layout, components and flows without 40 screenshots. • AI readable with screenshots: a ZIP with the JSON plus thumbnails, full screenshots and versions with each control numbered. • Full archive: an .insite file you can reopen in InSite later. Your notes, frames and tags come along in their own “Added by you” section, kept apart from what was recorded. Who it’s for • Product designers doing competitor reviews and design system audits. • UX researchers getting to know a product before interviews. • PMs checking signup, onboarding or settings flows. Founders studying how an established product is built before building against it. • Developers and anyone who wants an AI to understand a product’s structure. What it records, and what it doesn’t: Everything InSite shows comes from what happened in your recording. No AI writes any of it. Recordings stay on your device until you export them. No account, no server. Form values, passwords, cookies and tokens are never saved. You grant access one site at a time, when you start recording.