For vibe coding beginners
Know what's off,
at a glance
Name the layouts and components a page uses, check whether they fit, preview the fix, then turn it all into a prompt you can paste straight into your AI.
185 terms · 45 hand-written rules · Every reason quoted from the glossary
Step 1, “Spot”: Name the layouts and components on the page.Found a navbar, a sidebar menu, a single page form, an input, and a button.
02Common mistakes
The 12 layout mistakes AI makes most
Each one maps to a hand-written rule. See where it goes wrong, then see the fix.
Read-only details as a disabled form
View-only customer info as disabled inputs: gray, hard to read. Use a description list.
fromSingle Page FormtoDescription List
Description List: when to use it03Browser extension
On your own pages, hover to see its name
The extension matches the glossary's DOM cues right in your browser. No AI calls, no credits. This demo runs the same matcher, so hover or tap to try it.
- Shortcut
- AltShiftT turns on inspect mode. Esc exits.
- Runs on
- Only
localhost,127.0.0.1, and*.localby default. Turn it on for other sites in the extension. - Uploads
- Hover inspection happens entirely in your browser. A screenshot and the page structure are sent only when you click “AI identify” or “Analyze this page”.
Same matcher as the extension · loading the glossary
04Results
How to read the results
The workbench has three columns: the blocks the page splits into, labels on the screenshot, and the story behind each suggestion.
Every suggestion has a rule number
The model only recognizes the page structure. Hand-written rules decide what should change, like R001 “Don't show a read-only record as a form”.
Reasons quoted from the glossary
The why is quoted word for word from the glossary, not made up by a model. Every quote links to its source, where you can read the full “Good for” list.
“The data is only for viewing and doesn't need editing (use a Description List)”
Single Page Form · Not for “Showing a single record's details with many fields, mainly for read-only viewing”
Description List · Good for
It says “OK” when that’s true
Not every block needs fixing. Blocks that are fine are marked OK, ones it can't recognize get “Not recognized”, and it never invents a suggestion just to have one.
05Glossary
Don't know what it's called? Look it up here
185 terms, searchable by name, alias, or the wrong name people often use. Each one says when to use it and when not to.
Layouts · wireframesHover to see part names
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.