The models are fine. The tools are fine. The shortfall, in almost every AI-assisted build session I've watched, is the human not having a vocabulary.
When you build with Claude Code, Cursor, v0, or an AI site editor, the ceiling on what you get back is set by how precisely you can ask. "Add that thing that expands when you click it" gets you three revisions and a mess. "Add an accordion with keyboard support" gets you the feature in one. And once a vague prompt lands in your context window, the model carries that vagueness forward into every prompt after it in the same session.
There's also a second thing nobody tells you. The component you just shipped has a second audience. ChatGPT has to read it. Perplexity has to read it. Google AI Overviews has to read it. And half the time, the exact components you just built are hiding your content from them.
This article covers both. Ten common components, each with what to call them and what they do to the AI crawlers that are supposed to be citing your brand.
The two unlocks
Unlock 1: name it, then prompt it. AI coding tools are astonishingly good at building known components when you use their names. "Accordion." "Tabs." "Sticky sidebar." "Destructive button." "Toast notification." The output quality jumps two grades when you use the right word, because these tools were trained on millions of examples of those exact components. They know the patterns. They just need you to point at the right one.
Unlock 2: know what it does to crawlers. Every UI component behaves differently for the AI crawlers trying to ingest your page. Some render their content directly into the initial HTML and work perfectly. Some require JavaScript to reveal their content, at which point AI crawlers usually give up and see an empty panel. This is the thing that turns a beautifully-built site into one that's invisible in ChatGPT results.
Most tutorials teach one of these lenses. The two compound when you learn them together.
The grammar beyond names
Names are the first 80%. The grammar is the rest. Real UI prompts carry more than just a noun:
A weak prompt: "Add a button that sends the form."
A strong prompt using the grammar: "Add a primary submit button with a loading state, disabled when the form is invalid, anchored to the bottom of the form on mobile."
Both end with a submit button. The second one lands without revisions because it tells the model what good looks like.
Ten components, two lenses each
1. Accordion
Also called: collapsible, disclosure, expander, "the thing that opens and closes."
Prompt it: "Add an accordion with three items, smooth open/close animation, and keyboard support."
What it does to AI crawlers: This is the most consequential component on this list. Browser-native <details> and <summary> elements render their content into the initial HTML, and AI crawlers read them fine. Popular JavaScript accordion libraries render content only on expansion, which means AI crawlers see an empty panel. Half the sites I audit have their best content (FAQ, service descriptions, specs) buried inside JS accordions where Perplexity and ChatGPT never find it.
Fix: Use <details> or a library that server-renders the panel content and animates visibility in CSS, not JS. If you're on React, Radix and shadcn/ui accordions are safe; most "fancy" custom implementations are not.
2. Tabs
Also called: tab panel, segmented control, tab bar.
Prompt it: "Add a tabs component with three panels, URL-synced so each tab is linkable."
What it does to AI crawlers: Same risk as accordions. If the non-active tab panels aren't in the initial HTML, AI crawlers miss them. The URL-sync move (where each tab state has its own URL) also gives crawlers a way to discover each panel as a separate page.
Fix: Render all tab panels server-side; hide inactive ones with CSS. Alternatively, use URL state so each tab is a crawlable page.
3. Carousel
Also called: slider, slideshow, rotator.
Prompt it: "Replace the carousel with a horizontal-scroll card grid; keep the carousel only if autoplay is essential."
What it does to AI crawlers: Most carousels are JavaScript-driven, which means crawlers see slide 1 and nothing else. I have seen more than one brand accidentally cite "AI-first" on a slide-3 headline that nobody outside of the browser ever saw. If your value prop is on slide 2 or later, it does not exist to AI.
Fix: Prefer a non-carousel pattern (horizontal scroll, grid, feature list). If you must have a carousel, ensure every slide is rendered into the initial HTML so it is at least present in the DOM.
4. Modal
Also called: dialog, popup, lightbox, overlay.
Prompt it: "Add a modal dialog that opens from the primary CTA, with a close button, ESC-to-close, click-outside-to-close, and focus trap."
What it does to AI crawlers: Modals are almost always invisible to crawlers. If your onboarding flow, pricing details, or product walkthrough is behind a "Learn more" modal, AI tools describing your brand will never see it.
Fix: Anything important enough for AI to cite should be on a dedicated page, not inside a modal. Use modals for confirmations, file pickers, and focused tasks; never for substantive content you want cited.
5. Primary navigation
Also called: main nav, header nav, top nav.
Prompt it: "Add a sticky primary nav with five links, condensed to a hamburger on mobile, with an active-page indicator."
What it does to AI crawlers: The primary nav is how crawlers discover the rest of your site. If it's rendered server-side with standard <a> tags, crawlers follow the links and find all your pages. If it's client-rendered only, you're invisible beyond the home page.
Fix: Ensure the nav renders in server HTML with real anchor tags pointing to real URLs. This is the single most important piece of crawler-friendly infrastructure on the site.
6. Sidebar
Also called: side nav, secondary nav, rail, drawer (when it slides in/out).
Prompt it: "Add a sticky sidebar with sections for Overview, Settings, and Reports, collapsed to an icon rail on tablet, drawer on mobile."
What it does to AI crawlers: Same concern as primary nav. Sidebars are often client-rendered in SPAs, which means crawlers can't traverse them to find interior pages. If it ships as static HTML with real <a> tags, you're fine.
Fix: Prefer <aside> with anchor tags. If behavior requires JS (drawer open/close), ensure the anchor tags are in the initial DOM regardless of drawer state.
7. Dropdown / select
Also called: select, picker, combobox (when it supports typeahead), menu (when it holds actions rather than form values).
Prompt it: "Replace the native select with a combobox that supports typeahead search, keyboard navigation, and a clear state."
What it does to AI crawlers: Dropdowns rarely matter for AEO because they hold form values or menu actions, not content. The crawler concern here is more about accessibility than visibility.
Fix: Prefer native <select> unless you need features it doesn't support. If you build custom, use a well-tested library with proper ARIA.
8. Card
Also called: tile, panel, preview.
Prompt it: "Add a card grid of case studies, three per row on desktop, one per row on mobile, each with an image, title, one-paragraph description, and a 'View case study →' link."
What it does to AI crawlers: Cards are generally crawler-friendly since they're standard HTML. The risk is that a "card" hiding content behind a hover-to-reveal interaction hides that content from crawlers. If the full description only appears on hover, crawlers see only the title.
Fix: Any card content that matters should be in the initial HTML. Use hover for visual polish, not to hide information.
9. Hero section
Also called: lead, above-the-fold section, opener, banner.
Prompt it: "Rewrite the hero section with an eyebrow label, an H1 with a gradient accent on the second half, a one-sentence subtitle, and two CTAs (primary + secondary outline)."
What it does to AI crawlers: Hero sections are fine for crawlers when the content is real text. The failure mode is when the hero headline is rendered as an image or SVG with no alt text, at which point the most important line on the page is invisible to AI.
Fix: Keep hero copy as real text. If using a custom font treatment, render the text as text, not as an image.
10. CTA button
Also called: primary button, action button, submit, "the big one," "the pill."
Prompt it: "Add a primary CTA button labeled 'Book a call' anchored to the bottom of the mobile viewport with a hover-grow effect, auto-dismissed after the user scrolls past the contact section."
What it does to AI crawlers: Buttons with real links are fine. The risk is that a button triggers a modal or JS action where the actual destination URL is hidden, which means crawlers can't follow it to whatever page it would open. If your main conversion flow is trapped behind a JS button, AI recommendations for your brand can't point at the conversion URL.
Fix: Anchor tags with real href values for anything that should be linkable; reserve <button> for in-page actions.
The vocabulary that transfers
The ten above are the most common. There are probably a hundred more. The grammar still applies: name it, give it a variant, give it states, give it placement, give it behavior, give it a responsive rule.
You can feel the difference in your own prompts. Before: "Add a notification thing at the top." After: "Add a warning-variant alert banner above the fold, with a dismiss button, auto-dismissing after 10 seconds, sticky on mobile." Same feature. The second prompt ships in one pass.
And for the AI-reader side, the rule of thumb holds across all of them: if the content isn't in the initial HTML, AI crawlers don't see it.
The full library
I put together a reference with 30+ components, every one with a rendered preview, definitions, three prompt-flavor templates (chat-to-build site editor, code-generating AI, design-generating AI), and the same crawler-impact note. It lives here: /resources/ui-component-library.
Bookmark it. Use it while you build. The next time you find yourself describing a shape on a call, the word is probably there.