Termlib · AI frontend revision assistant
Give your AI
a clearer UI brief
Upload your own page, find layout issues, and approve suggestions to get an actionable revision prompt. Generate before and after previews when you need them.
258 terms · 45 hand-written rules · Every reason quoted from the glossary
Run the prompt in your coding assistant. Review generated HTML previews before integrating them into your project.
Workflow demo · authored example and rule templates, not a live AI result
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.
From a screenshot to an actionable revision prompt
01
Upload your own page
Start with a page you need to deliver. Remove personal details, secrets and internal data first.
02
Choose what is worth changing
Read suggestions and their glossary references. Approve what fits; use your judgment beyond the rules.
03
Apply the prompt and review
Paste the prompt into your coding tool. Generate a standalone HTML preview if needed, then integrate and review in your project.
The glossary and local recognition are free. Platform AI uses credits per task. Refinement and canvas require subscription access, including with your own key.
Canvas and the browser extension are advanced tools. Read the full guide
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
258 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 your own page, find layout issues, and approve suggestions to get an actionable revision prompt. Generate before and after previews when you need them.