Context engineering for Claude, ChatGPT, Cursor & Figma Make

Turn any web app into a spec your AI can rebuild.

Click through your app once. Click2spec captures every visible control, the measured design system, the tech stack and the navigation — and writes a ready-to-paste pack your AI tools can actually build from.

No card·Runs in your browser·Works behind your login

app.meridian-finance.example/invoices
REC 00:00
DashboardInvoicesApprovalsCustomersReports
Search invoices

Invoices

New invoice
AllDraftPendingPaid
INV-1041 · Acme CorpPaid
INV-1042 · GlobexPending
INV-1040 · InitechPaid
INV-1039 · UmbrellaPaid

New invoice

Submit for approval
Customer *Acme Corp
Amount *
Due date *
Invoice INV-1043 submitted for approval
sidebar 232 px · #171A21
header 56 px · 3 controls
button #4F46E5 · radius 8
3 required fields · Inter 14
stack React 18 · Next.js 14
context.md · 3.1k tokens

Your app, in words an AI can build from.

11controls, by region
9colors, measured in hex
4fields · 3 required
2routes + navigation map
ClaudeChatGPTCursorFigma Make
Claude

New invoice

Submit for approval
Customer *
Amount *
Due date *
Currency
DashboardInvoicesApprovalsCustomersReports
Search invoices

New invoice

Submit for approval
Customer *Acme Corp
Amount *12,400
Due date *
CurrencyUSD · EUR · GBP
NEW · from your prompt
✓Matches your app — plus what you asked for
context.md↑
Claude
✓ Same as your app
ChatGPT
✓ Same as your app
Cursor
✓ Same as your app
Figma Make
✓ Same as your app

Record once.
Rebuild anywhere.

One spec pack. Any AI. The same screen as your app — every time.

ClaudeChatGPTCursorFigma Make

Click through your app once.

PASTE-READY FOR ClaudeChatGPTCursorFigma Make+ any AI tool that reads markdown

THE PROBLEM

AI tools are brilliant. And blind to your product.

Ask an AI to redesign a screen it has never seen and it confidently invents a product that doesn’t exist. Everyone working on a real app knows the workarounds:

⌘

Screenshot archaeology

You paste fourteen screenshots and hope the AI infers the flow, the controls and the rules behind them. It doesn’t.

✎

Specs from memory

You hand-write how the app works today. Two hours per feature, incomplete by nature, stale within a month.

↻

Prompt roulette

Without real context the AI restyles what must stay, misses constraints that matter, and you iterate five times before settling.

The fix isn’t better prompts. It’s better context.

HOW IT WORKS

From walkthrough to context in minutes.

No integrations, no API access to your product, no tickets to IT. If you can use the app in your browser, you can document it.

01

Record

Open your app, click the Click2spec icon, hit Record and use it normally. Every screen, control and click is captured as structure — not just pixels.

02

Add what the UI can’t show

Drop a one-line note where knowledge lives: “only admins can approve”, “limit is 50 per account”. Click2spec works out the app’s purpose and users on its own.

03

Review

Emails, card, phone and similar numbers are masked automatically. You inspect every step, screen spec and screenshot, and drop anything sensitive before anything is generated.

04

Generate & paste

One pack, four formats: Claude, ChatGPT, a Cursor rules file and a Figma Make reconstruction spec. Copy & open your AI tool in one click, paste the numbered screenshot storyboard next to it, or export a ZIP with everything.

WHAT IT CAPTURES

Everything an AI needs to rebuild the screen — measured, not guessed.

⦿

Every visible control

Buttons, icon-only buttons, menus with their full option lists, tabs, toggles, data grids and dialogs — grouped by region, with honest totals when a screen is huge.

◐

The design system

Hex colors with transparency, fonts, radii, the primary vs. ghost button styles, status badges, theme (light or dark) and the icon set — measured from the live UI.

⚙

The tech stack

React, Next.js, Angular, Vue, Tailwind, MUI, Ant Design and more — plus live chart configurations — so generated code matches what you run.

⇄

Navigation & app shell

Which button leads to which screen, the persistent sidebar and header described once, and every route with its pattern — ready to wire a prototype.

▦

Data model & rules

Entities inferred from forms and lists (types, required fields, enums), validation messages, feedback toasts, and your own notes.

✓

An acceptance checklist

Claude, ChatGPT and Cursor packs end with checkboxes observed in the real product, so you — or the AI — can verify a rebuild is actually faithful.

REAL OUTPUT

Don’t take our word for it. Read a pack.

Below is genuine, unedited output from Click2spec’s generator for a short recording of a demo invoicing app (fictional company, fictional data).

 context.claude.md↓ Download full sample

    

Table sample cells are replaced by their format (‹text›, $##,###.##) and record pages are named by type (“Contact detail”), not by the person shown. Headings, labels and text you type are captured as they appear — that’s what the review step is for.

WHO IT’S FOR

For anyone who works on a product with AI next to them.

Product designers

Paste the Figma Make spec and get a redesign that keeps the real controls, labels and tokens — not a generic dashboard.

Engineers

Drop the Cursor rule into .cursor/rules and rebuild or extend a legacy screen with the right routes, fields and validations.

Product managers

Give Claude or ChatGPT the real workflow before asking for a spec, a test plan or onboarding docs.

Agencies & consultants

Document a client’s app in one session — behind their login, without asking for API access or source code.

SECURITY

Built to pass your security review.

A recorder that can see internal apps has to earn trust architecturally — not with promises.

Local-first, always

Captures live in your browser’s extension storage. There is no backend for your data, no background upload and no telemetry. We never see what you record.

Scoped permissions

No “all sites” access and no browsing-history permission. Click2spec asks for one site at a time, and Settings shows every site it can access with a one-click revoke.

Masked at the source

Password, one-time-code and card fields are never captured — even after “show password”. Emails, card, phone, IBAN and API-key-like strings are masked inside the page. Screenshots aren’t masked, so you review each one.

Your model, your endpoint

Generate fully offline with the built-in template, with your own Anthropic or OpenAI key, or with any OpenAI-compatible endpoint you run (https only). Screenshots are never sent to a model.

Human review gate

Nothing is generated until a person reviews every step, screen spec and screenshot. What you delete is removed from the pack and its exports.

Injection-resistant output

Every pack tells the AI that captured UI text is data, never instructions — and page text can’t forge the document’s structure.

“Captured data stays on the employee’s machine. Generation goes only to the endpoint you choose — including one you run yourself. There is no Click2spec server that receives, stores or trains on your data.”

— The sentence your security team is waiting to hear. We don’t have a SOC 2 report today; send us your questionnaire and we’ll answer it honestly.

PRICING

Try it on your real app. Upgrade when it earns its place.

Free

$0
Try it on real work — just an email, no card
  • 2 spec packs with a free key sent to your email
  • Every format: Claude, ChatGPT, Cursor, Figma Make
  • Smart synthesis with your own AI key
  • Screenshots, ZIP & JSON export, local Library
Add to Chrome — free
PRO

Pro

$19.99 /user/month
For people shipping with AI every week
  • Unlimited spec packs
  • Combine workflows into app-level packs
  • Everything in Free
  • Secure checkout by Lemon Squeezy · cancel anytime
Start free — upgrade in the app

A pack is one recording turned into a document — switching formats, re-exporting or reopening a pack is always free. Teams: one Pro seat per person.

FAQ

Fair questions.

Does it see my passwords or login pages?+

No. Password, one-time-code and card fields are never captured — including fields switched to “show password” and one-time codes split into separate boxes. Click2spec won’t record identity-provider sign-in pages (Okta, Microsoft, Google sign-in, Auth0 and similar). It documents what happens after you’re in.

Where does my recorded data live?+

On your computer, in the extension’s local browser storage, protected by your computer account like the rest of your browser profile. Nothing is uploaded in the background. With the built-in template nothing ever leaves your machine; with smart synthesis on, the text capture (never screenshots) goes only to the AI endpoint you configured, when you generate or switch formats.

Does it work behind login, SSO or VPN?+

Yes — that’s the point. Click2spec records inside your already-authenticated browser session, so it needs no credentials, service accounts or network access to your app.

Which apps does it work with?+

Web apps in Chrome, including single-page apps built with React, Angular or Vue, dense, icon-heavy tools, and web components. One browser tab per recording. Content inside embedded iframes isn’t captured (the frame is declared in the pack so the AI doesn’t drop it), and canvas-drawn tools such as design canvases or WebGL dashboards yield screenshots and your notes rather than a full control inventory. Desktop and native mobile apps are out of scope.

What counts as a pack, and what happens after my 2 free ones?+

A pack is one recording turned into a document (or several recordings combined into one app pack). Switching formats, re-exporting and reopening packs in your Library never count. The free plan runs on a free license key: enter your email on Lemon Squeezy (no card), paste the key into Click2spec, and each new pack uses one of its 2 packs. The count lives with Lemon Squeezy, so reinstalling the extension doesn’t reset it. After your 2 free packs you can keep recording and keep everything you made; generating new packs needs Pro.

How does Pro billing work?+

Pro is $19.99 per user per month. Checkout runs on Lemon Squeezy (cards and the usual wallets, sales tax and VAT handled for you); you get a license key on the receipt, paste it into Click2spec, and you’re done. Cancel anytime from the Lemon Squeezy customer portal. The license check only sends that key — never anything you record.

Which AI tools can use a spec pack?+

Anything that reads text or files: Claude (chats and Projects), ChatGPT, Cursor (as a project rule), Figma Make, and other assistants. A ZIP bundles the document with every screenshot, and a JSON export exists for your own pipelines.

What will our security team want to know?+

The data flow fits in one sentence: captures stay in the browser, and the only outbound request carrying your data is the one you trigger, to the endpoint you configured. Add per-site permissions with one-click revoke, in-page masking, a human review gate and support for your own model endpoint. We don’t have a SOC 2 report today — bring your questionnaire and we’ll answer it honestly.

2 free packs · 2-minute install

Give your AI the context it’s been missing.

Record one workflow today. Paste the pack into your favorite AI tool. You won’t go back to screenshot archaeology.