I built a free tool that gives your AI your real product

I've been building a thing that does this for real, on and off, for a few months. It's ready, so this is the post where I actually hand it over.

Quick recap of the idea, in case this is the first one you're reading. Your AI hands you generic design help because it has never actually seen your product. The fix isn't a cleverer prompt. It's giving the model your real product to work from. I built a tool that does exactly that, for any product, and it's open source and free.

It's called the Design Context Kit.

Where it came from

I'm a designer. I work on a cross-border payments product at Xflow, and building developer tooling is not my day job. So this started the way my side projects usually do, as a hacky internal thing held together with code that made our engineers wince.

The problem was small and specific. Every time I asked an AI to help with a screen, it redesigned a screen we'd never built. So I wrote something that captured our real pages as HTML the AI could open and edit, instead of imagine. It worked embarrassingly well. Then it hit me that the idea had nothing to do with Xflow, so I spent a few weeks generalising it and pointing it at other products, Airbnb, Amazon, Wikipedia, a cricket site, to make sure it wasn't secretly hardcoded to my world. It wasn't. That's what's shipping today.

What it does

You point it at a product and it turns the real thing into a context library your AI can read.

• Capture. Point it at your product and it grabs your real pages as a clean, self-contained library. There's a wizard, so you don't have to live in a terminal. Logged-in product? A guided mode lets you drive to the screens a crawler can't reach.
• See it. A dashboard shows what you've got. An atlas of your real screens, a map of what's captured and what's still missing, and the design language it reads straight off your product. Your real colours, your real type, pulled in as facts.
• Use it. Hand the library to your AI, Claude or Cursor or whatever you use, and its help is suddenly about your product. Ask it to wireframe something new and it builds in your product's own language.
• Ship to Figma. Copy any screen, captured or freshly wireframed, into Figma as editable layers. No plugin, no paid seat.

One thing I care about, because payments. It runs against your own product, nothing touches production, and for logged-in capture the advice is to use a safe test account. The library is yours, and it's local.

Try it in five minutes

Three lines. It installs what it needs the first time, then opens the dashboard in your browser.

git clone https://github.com/20prateeksingh/design-context-for-ai.git my-product
cd my-product
tools/start.sh

The dashboard asks three things: your product's URL, whether you sign in to use it, and what kind of product it is. Then it captures, and you watch it happen. Hand the library to your AI afterwards and ask it to change one of your screens. The first time you watch it edit your actual product instead of inventing a lookalike, the whole thing clicks.

Rather not touch a terminal? Open your AI assistant on a folder and paste this:

"Read https://raw.githubusercontent.com/20prateeksingh/design-context-for-ai/main/INSTALL.md and follow it."

It installs the kit and opens the dashboard for you, and it's then the same assistant that reads your library. There's a walkthrough of both ways in on the landing page.

What's rough, and what's next

It's v1 and I'm building it in the open, so I'll be straight with you. It's a designer's tool built by a designer, and some of it is still held together with tape. I'd rather ship small and hear from real people than polish in private for another month.

The next big step is closing the loop. Not just reading your product, but designing new things grounded in it, landing them back in the library, and out to Figma in one move. That's where this is going.

If you try it, I really want to know what breaks. That's the whole point of doing this out loud.

Grab it

• Landing page and walkthrough: prateeksingh.in/tools/design-context-kit
• Source: github.com/20prateeksingh/design-context-for-ai

And if you want the thinking behind it, the earlier posts in this series cover it. This is just the first piece that's actually yours to use.

---

Part of a series on building an AI collaborator for our design team at Xflow. The Design Context Kit is the first piece of it that's yours to use. Each post stands on its own.