Skip to main content
Frontend Glossary

Features

From naming a component to getting AI to fix it

The extension names components on your pages, the website diagnoses and previews, the glossary explains every word, and the Agent applies the suggestions to the whole page.

01Browser extension

On pages you're building,hover to see what it's called

Made for the pages you're working on, in Chrome and Edge. This demo runs the same local matcher as the extension, so try hovering.

  • Hover to inspect

    Turn on inspect mode and point at anything to see its standard term name, a one-line definition, and the block and layout it sits in.

  • Local matching

    Matches by DOM tags, ARIA roles, and common component library class names. No AI calls, no credits.

  • AI fallback

    If local matching can't tell, click “AI identify”. Results always map to a term in the glossary, or show “Not recognized”.

  • Component names

    In development mode it tries to read the React or Vue component name, and skips it if it can't.

  • Analyze a page

    One click sends a screenshot and a trimmed DOM structure for full-page analysis. See results in the side panel or open the full report on the website.

Get the extension
localhost:5173/ordersLoading the glossary…

Same matcher as the extension · loading the glossary

02Page analysis

A verdict for every block,a source for every suggestion

Works without the extension. Good for screenshots and public pages.

  • Screenshot or URL

    Upload a screenshot or enter a public URL for full-page analysis. Our server can't reach pages on your machine, so use the extension or a screenshot for those.

  • Block by block

    Each block is boxed on the screenshot, with its layout and components, content traits, and evidence. The verdict isOKIssueorNot recognized.

  • Sourced advice

    Every suggestion spells out current → suggested, what's wrong, how serious it is, and the rule number, with reasons quoted from the glossary.

  • Preview

    Generate grayscale before-and-after wireframes for any single suggestion.

  • Copy for AI

    Pick your tool and tech stack, and turn the suggestions you accepted into a prompt for your AI.

  • Account

    Manage your history, saved terms, credit history, and your own API keys in your account.

Start analyzing

Prompt for your AI

Please adjust the layout of this page (“Customer details”). Only change the areas listed below and leave everything else as it is.

1. The “Customer details” area: change the Single Page Form to a Description List.
   Why: This shows the details of one record. It's only for viewing, not editing, and it has a lot of fields. As a form, every field becomes a disabled input with gray text on a gray background, which is hard to read and makes people think they can edit it.
   Source: Single Page Form, Not for: The data is only for viewing and doesn't need editing (use a Description List)
   Source: Description List, Good for: Showing a single record's details with many fields, mainly for read-only viewing
   Source: Form, Common misuse: Building a read-only detail page as rows of disabled inputs, gray on gray and hard to read, and it looks editable
   Target structure: Made up of label-value pairs laid out in a two- or three-column grid. When there are many fields, they're split into groups, each with a small heading.
   Details: This is a read-only details view. Please use a description list layout: show each field as "Label: value" in a two- or three-column grid, with labels in light gray and values in the body text color. Group the fields by what they mean for the business and give each group a heading. Don't use input boxes to show read-only data. Put an "Edit" button in the top right.

Requirements:
- Keep the existing data, copy, API calls, and overall visual style. Only change how these areas are arranged and which components they use.
- When you're done, explain what changed in each area.

03Glossary

Every word explained:what it looks like, when to use it

Open to everyone, no login needed. 185 terms, and every suggestion quotes its reasons from here.

  • Six categories

    Layouts 24, UI components 58, Interactions 24, Styling & CSS 26, Frontend engineering 27, AI coding 26.

  • Complete entries

    Name, aliases, a one-line definition, a detailed explanation, a wireframe, and “How to tell AI”.

  • The basis for advice

    Layouts and UI components also list their structure, when to use and not use them, common misuse, and how to spot them. Suggestions quote this text directly.

  • Guides

    Grouped by scenario, like the words you need for an admin page, or how to talk layout with AI.

Browse the glossary
Layoutslayout-description-list

Description List

Full entry

Lays out a record's properties as label-value pairs, often in a two- or three-column grid. Good for viewing details in read-only mode.

AliasesKey-value listDetails listProperty listDescriptions

Good for

  • Showing a single record's details with many fields, mainly for read-only viewing (quoted by R001)
  • Users need to quickly scan the properties of one record

Not for

  • Users need to edit or fill in these fields (use a Single Page Form)
  • Users need to see and compare many records of the same kind at once (use a Data Table)

How to tell AI

This is a read-only details view. Please use a description list layout: show each field as "Label: value" in a two- or three-column grid, with labels in light gray and values in the body text color. Group the fields by what they mean for the business and give each group a heading. Don't use input boxes to show read-only data. Put an "Edit" button in the top right.

04Agent upgrade

Apply the advice to the whole pageand see the result

The Agent creates standalone HTML previews and never touches your project code.

  • Replicate

    Rebuilds the original page as a single HTML file from the screenshot and DOM, keeping the structure, copy, and main colors, without aiming for pixel-perfect.

  • Upgrade

    Changes only the blocks covered by accepted suggestions. Everything else stays as replicated.

  • Compare

    See the original screenshot, the replica, and the upgrade side by side, with live progress while it generates.

  • Refine

    Keep asking the Agent for changes in plain language. Every edit is saved as a version you can go back to.

  • Export

    Download the HTML, or generate a prompt for your AI coding tool.

Read how it works

Customer detailsAgent upgrade

v2 · upgrade.html

v2 upgrade · only the “Customer details” block changed; everything else matches the replica

Versions

  1. v1Replicate the page
  2. v2Apply 1 suggestion (R001) (viewing)

Keep editing

Every edit is saved as a new version you can go back to any time.

05Mockup canvas · Pro

One brief,a whole set of page mockups

Have AI plan the pages on a canvas, apply layout terms, generate a matching set of HTML mockups, then pick the best version.

  • Plan

    Write a brief and AI lists the pages, each with a layout term. Check, rename, and they're laid out on the canvas in a grid.

  • One style

    Primary color, corner radius, font size, density, and the app shell live in a style node, and every page shares one navigation menu.

  • Generate and edit

    “Generate all” queues every page. Not happy? Try another direction or describe the change in a sentence. Each try is a new version.

  • Compare

    Put 2–4 versions side by side full screen with synced scrolling, then pick one as the main version.

  • Check

    Run the same rules as page analysis on generated pages. Problems are boxed on the page, and one click applies the fix.

  • Export

    Download a ZIP with one HTML file per page, or copy a full build prompt for Cursor or Claude Code.

Open the canvas

ProSketch · brief → plan 4 pages → generate in one style → compare and check

Try it on the page you're building

Upload a screenshot to analyze it. For pages running on your machine, install the extension and just hover.

Analyze a page for free Install the extension