maps
Semantic region map
Overlays colored, labeled frames on a sample page to mark every semantic region (header, navigation, main, complementary, footer) by role and accessible name, and isolates in red the content no landmark covers: the real gap assistive tech cannot skip. A side panel tours the regions and highlights the matching frame on hover.
See it live and copy its promptWhat you can adjust
- Frame opacity
- Edge thickness
- Path speed
- Show names
- Highlight orphans
- Color by role
How this catalog works
Every component ships with its reproduction prompt: the text you paste into an AI builder to get exactly this piece. The values above are editable, and the prompt you copy carries the ones you chose, so what gets generated is what you were looking at.
