A free, open-source kit that captures your product's real screens, tokens, and patterns into a local library. Your AI then designs in your product's language, not from generic memory.
If you'd rather not use a terminal
Open your AI assistant on a folder where you keep projects. Make one if you need to; ~/Design Context is fine.
Paste this prompt.
Read https://raw.githubusercontent.com/20prateeksingh/design-context-for-ai/main/INSTALL.md and follow it.
Your assistant needs to read files on your machine and run commands, so a browser chat window will not do. Claude Code on the web will not either: it runs in a remote sandbox, with no local browser and no reachable localhost. Whatever you use, the assistant that installs the kit is then the AI that reads your library: same window, no second tool.
If you'll use the terminal
git clone https://github.com/20prateeksingh/design-context-for-ai.git my-product
cd my-product
tools/start.sh
On Windows, the last line is tools\start.cmd.
It installs what it needs the first time, then opens the dashboard and hands you to the onboarding wizard.
How it works
You run one script. The kit does the capture and tells you what it did. Then your AI has a real product to design against instead of a description of one.
STEP 1
tools/start.sh (or tools\start.cmd on Windows) installs what it needs, starts a local server, and opens the dashboard. The dashboard asks three things: your product's URL, whether you sign in to use it, and what kind of product it is. You never answer a question in the terminal.
STEP 2
It follows your product's links and downloads each page as a snapshot: the real HTML, a screenshot, every word of copy, and the styles it actually uses. Pages that share a layout collapse to one example, with the count kept. You watch it land, page by page, and it tells you what it capped or skipped.
STEP 3
Point Claude Code, Cursor, or a chat window at the library and ask for a change. A wireframe comes back built on the captured page itself: your product's own shell, spacing and content, reduced to lo-fi, with the new part marked as new. Then take any page into Figma in one paste.
What your AI actually gets
A screenshot, the real HTML, every word of copy, the styles it uses, a digest your AI writes, and the metadata. All of it extracted from the real product, and nothing here is a summary of a summary. Your AI starts at registry.json; you start at INDEX.md.
method: ai.
Captured a product you sign in to? The library then holds your real account data. It stays in your folder, and the browser profile the login created is gitignored and never leaves your machine.
The dashboard
One self-contained HTML file beside the library: a map of every page, the design language measured across them, and a ledger of what changed. Every number on it says where it came from.
Rings are honest clicks-from-home; the fog is what you haven't captured yet.
Every captured page sits at its measured distance from the home page, sized by how linked-to it is. Pages the kit found but never downloaded stay as dashed ghosts in the fog.
Click one, and the rail tells you what it is and what unlocking it would cost. Here a ghost covering 131 assorted one-off pages is selected: the kit offers one example of the shape rather than all 131, because 131 near-duplicates teach your AI nothing new. 0.9 per cent of this product is explored, and the kit says so instead of rounding up.
Measured from your product, or absent.
Colours, type ramp, spacing ladder and radii, aggregated from the captured pages, every value carrying the count and page-spread behind it.
As here: the product's darkest tone is ×42,696 across all thirty-eight pages and the accent is ×24,479, also across all thirty-eight. One toggle re-reads the same colours as a treemap of how often each appears. The tab opens with method: heuristic in its own words: evidence of how the product is styled today, not a claim about its authored tokens. It even names what it left out: values seen on a single page stay in tokens.json instead of being promoted into the ramp.
It borrows your product's own colour: observed, never guessed.
A journal down the side of the dashboard: what was captured, what your AI read, what it wrote, what changed. The top slot holds the one move worth making next, and it changes as the work lands.
When pages are waiting to be read it asks for that, with the describe prompt ready to copy; here every page has been read, so it has moved on to a hygiene note instead, a page nothing links to, with a fix prompt ready to copy. And the accent the dashboard wears is lifted from the product you captured: observed, never guessed.
Any product
Point it at what you design for. Seven real captures in seven separate workspaces (a marketplace, a retailer, a sports site, a travel platform, an encyclopedia, a payments product, a developer platform), each dashboard wearing that product's own colour, observed rather than configured. Eighteen to forty-one pages in each library, and each map says out loud how little of its site that is: from eleven per cent down to four-fifths of one. Same kit, same one script, nothing set per product.
flipkart.com#2874F0
amazon.in#2162A1
espncricinfo.com#0860C4
airbnb.co.in#DA1249
en.wikipedia.org#3366CC
xflowpay.com#5E76E3
github.com#0969DA
Every hex above was measured, not chosen: it is the most-used colour in that product's own captured pages that a UI accent could plausibly be, and the dashboard then wears it. Nothing was configured per product.
Which is also why six of these seven hexes sit inside a twenty-degree band of blue and only airbnb's crimson doesn't. A palette someone picked would be prettier than this, and that is rather the point. Where a product's colour can't clear the dashboard's contrast floor, the kit lightens it just enough and records that it did, which is why amazon.in's measured #2162A1 paints as #2367A9. Where no colour qualifies, no accent is recorded at all and the dashboard keeps its own indigo: absent rather than invented.
These maps are shown small on purpose. At this size a captured product is only its shape (how many pages, how far from home, how much fog), which is all this section claims.
Every map here has also been read: all 256 pages across the seven libraries carry a description, written by an AI and labelled method: ai in the library so it is never mistaken for a captured fact. That is what the accent rim marks: a page whose description exists. That is why these maps are warm where earlier versions of this page were pale. A purple ×N disc is described too; it simply also stands for a template shape, so it wears that badge instead. The hero at the top of this page, and every other full-size dashboard view below it, is the same product: en.wikipedia.org.
Following links is all the kit does, so a page that only opens behind a sign-in, or that answers a link with a soft 404, doesn't come home. amazon.in's run recorded seven of those (six auth-redirect, one soft-404), each with its reason, in the same file that lists what did come home. The maps above are what one read-only crawl reached, not a claim that every page type is reachable.
Straight into Figma
Click ⧉ Copy for Figma on any page or state in the dashboard: no plugin, no Dev Mode, no paid seat. The conversion happens locally, in your browser, from the snapshot's real DOM, so what lands in Figma is the product's own structure as nested auto-layout frames and real text layers, not a flat image.
Read back out of the Figma file a pasted page landed in: frames and text, nested, editable.
Html → Body 1718 × 2137
└ Section
└ Container
├ Background+Border
│ └ Text
├ Container → Text
└ Margin → Container → Text
Arrange or restyle freely; your Figma library stays untouched. There are two network moments, stated plainly below, and neither uploads your page.
A copy loads Figma's own converter from mcp.figma.com at the moment you click, and if that host can't be reached it falls back to the converter bundled with the kit, which fetches public font files from a CDN so your pasted text stays text. Neither uploads your page: the conversion happens in your own browser, and no data of yours is sent to either host.
The rules it lives by
Two disclosures those lines earn: capture dismisses a cookie banner when one blocks the page, and it logs that it did: the single exception to never clicking. And each page's one-line description is written by your AI, which is why the dashboard labels it method: ai everywhere it appears. Everything else was extracted deterministically.
Get started
Both ways in are on this page: an AI assistant that reads files, or a terminal. What each one needs is below. Name the folder after the product you are capturing.
What the assisted way in needs
Cold-tested with Claude's desktop app and its terminal CLI, which is what INSTALL.md was written for. Assistants that read AGENTS.md are expected to work and have not been verified here, so if yours stalls, read that as unsupported rather than broken.
Whichever assistant you use is its own product, on its own plan. The kit itself is free and needs no account.
What the terminal way in needs
git is only for the clone. Without it, download the repo as a zip from GitHub instead.
The setup steps an assistant follows are in INSTALL.md; what the kit does once it's installed is in the README.
This page counts page views; the kit counts nothing. The counter is Vercel Web Analytics, served from this site's own domain, so the page still fetches nothing from a third-party host. Vercel's privacy documentation states that it uses no third-party cookies, identifies visitors by a hash created from the incoming request, discards the session after 24 hours, and stores nothing that could reconstruct your browsing across other sites or personally identify you. The kit itself is untouched by this and stays local-only: your captures never leave your machine.