From looking up a word to getting AI to fix the page

Quick start

1. Create an account. New accounts get starter credits. You can browse the glossary without logging in.
2. Building the page on your own machine? Install the browser extension, open the page, and click “Analyze this page”.
3. No extension, or analyzing someone else's page? Go to page analysis and upload a screenshot or enter a public URL.
4. Read the results and choose “Accept” or “Ignore” for each suggestion.
5. To see the result, click “Preview” or “Agent upgrade”. To have AI make the change, use “Copy for AI” to generate a prompt.

Using the extension

Hover inspection

• Press Alt + Shift + T or click the extension button to turn on inspect mode. Press Esc to exit.
• The element under your mouse is highlighted, and a card shows its standard term name, a one-line definition, and the block and layout it sits in. In development mode it also shows the React or Vue component name.
• In inspect mode, clicking an element pins the card instead of triggering the page's own click. From the card you can open “Details” or “Copy for AI”.
• Local inspection doesn't call AI or use credits. If it can't tell what something is, click “AI identify”. That uploads a screenshot and HTML snippet of the element and uses credits.

Full-page analysis and the side panel

• Click “Analyze this page” in the extension popup. The extension captures a full-page screenshot plus a trimmed DOM structure and submits both.
• Results show up in the side panel. You can also jump to the website for the full report, previews, and Agent upgrades.

Where it runs

By default the extension only runs on localhost, 127.0.0.1, and *.local. Turn it on for other sites, like staging or preview deployments, in the extension.

Page analysis

• Upload a screenshot: PNG, JPEG, or WebP, up to 15 MB each. Click to choose, drag it into the upload area, or paste it from your clipboard. A full page at desktop width works best.
• Public URL: our server opens the URL, takes a screenshot, and analyzes it. Pages behind a login and internal addresses can't be captured.
• Local pages: our server can't reach pages on localhost or your local network. Use the extension, or take a screenshot and upload it.

Analysis usually finishes within 30 seconds. The page shows progress and updates when the results are ready.

Reading the suggestions

The screenshot is on the left of the results page. Numbered boxes on it match the blocks that were recognized, and blocks with problems are highlighted. Click a box to jump to its notes on the right.

Block verdicts

Every block gets a verdict: OKIssueorNot recognized. Blocks that already fit say “OK” plainly. There are no suggestions just for the sake of it. Each block also lists its current layout and components, its content traits (density, purpose, number of items, and so on), and the evidence behind the call.

Suggestion cards

• Current → suggested: what it uses now and what to switch to. Click a name to open the term page.
• Severity:Should fixmeans it's clearly the wrong choice, andCould improvemeans switching would be better.
• Why: anything marked “quoted from the glossary” is the term's own “Good for”, “Not for”, or “Common misuse” text, not something the model made up.
• Rule number: every suggestion comes from a hand-written rule, like R001. The model only recognizes the page structure and content traits. The rules decide the suggestion.
• Alternatives and don'ts: other options worth considering, and choices that clearly don't fit.

Choose “Accept” or “Ignore” for each suggestion. Accepted suggestions are used for Agent upgrades and prompts for AI.

Preview

Click “Preview” on a suggestion card to generate grayscale before-and-after wireframes of that block using the page's real copy. They sit side by side, and on narrow screens you can switch between them. Wireframes show structure only, not the final look.

Agent upgrade

1. Replicate: the Agent rebuilds the original page as a single HTML file from the screenshot and DOM. It keeps the structure, copy, and main colors, without aiming for pixel-perfect.
2. Apply suggestions: it applies the suggestions you accepted to the replica, changing only the blocks involved and leaving the rest as is.
3. Follow-up edits: keep asking in plain language, like “Too many table columns, drop the notes column.” Each edit is saved as a new version, and you can go back to an earlier one any time.
4. Export: download the current version as HTML, or copy a prompt for AI with the changes.

The Agent creates standalone HTML previews and never touches your project code. Generated pages are shown only in a sandbox, with no scripts and no external resources.

Prompts for AI

On the results page or the Agent upgrade page, pick a target tool (Generic, Cursor, or Claude Code), a framework, and a component library, and you get a prompt you can paste directly. It covers:

• which block to change, and from what to what;
• why, with the supporting text from the glossary;
• the target structure and specific requirements, taken from the term's “How to tell AI”;
• which component to use, if you picked a component library;
• a reminder to keep the existing data, copy, API calls, and visual style.

The prompt is built from a template, with no model involved. The wording comes from the glossary and the rules. If you haven't accepted any suggestions, all of them are included.

Your own API key

Add your own model service on the account page. Only OpenAI-compatible APIs (/chat/completions) are supported. Using your own key doesn't use platform credits.

• Vision model: must accept images. Used for full-page analysis, AI identify, and Agent replication.
• Code model: used for previews, applying suggestions, and follow-up edits. Pick a model that's strong at code.
• Both models can come from one key, or you can set up two keys. After saving, click “Test” to check the connection and whether images are supported.
• In “Usage settings”, choose which key handles vision tasks and which handles code tasks. Pick “Use platform credits” to use the platform's models.

Base URLs for common providers (check your provider's docs for model names):

Keys are stored encrypted. The interface only shows a masked version and never returns the plain key. You can edit or delete a key any time.

FAQ

It says I'm out of credits

Enter a redeem code on the account page, or add your own API key. Credits from failed calls are refunded automatically.

It says the platform has no model set up

The platform has no model available right now. Contact the administrator, or add your own API key for now.

Some blocks say “Not recognized”

Results have to match a term that's already in the glossary. If nothing matches, the block is marked “Not recognized” instead of guessed. Try a sharper, more complete screenshot.

How long are uploaded screenshots kept?

Screenshots and results are used only for analysis. Delete them any time from your history. They're also removed automatically after the platform's retention period. See the Privacy Policy.