← BLOG
Mobile-First Isn't Enough. Design for AI-First Discovery.

Mobile-First Isn't Enough. Design for AI-First Discovery.

Designing for AI-first discovery means structuring your site so AI assistants — ChatGPT, Perplexity, Claude, Gemini — can read, parse, and confidently cite your content when someone asks a relevant question. It's not just SEO. It's not just accessibility. It's a different contract between your site and the people who might find it. At Nuclear Marmalade, we've been sitting with this since late 2024, and the conclusions sting a little if you've spent years chasing scroll depth and bounce rate.

For most of the last decade, "good design" meant mobile-first. Fast load, thumb-friendly nav, readable on a 375px screen. That was the right answer — it probably saved a lot of businesses from their own worst instincts. But the way people find things is shifting again. This time the intermediary isn't a search engine surfacing blue links. It's a language model summarising your work in two sentences and deciding whether you're worth mentioning at all.

What does AI-first discovery actually mean?

AI-first discovery is what happens when someone asks an AI assistant a question and the AI — not a search engine — decides which sources to surface, quote, or recommend. It's happening right now, at real scale. Perplexity crossed 100 million monthly queries in early 2025. ChatGPT's browsing feature and Claude's web search do the same thing: they read your site, extract meaning, and either cite you or don't. The design decision that matters isn't what your site looks like on an iPhone. It's whether your content is structured so a language model can pull a clean, accurate answer from it. Most sites aren't. The ones that are will have a real edge over the next three years.

Why does visual design still matter if AI is doing the reading?

Here's where people get it wrong: AI-first doesn't mean humans stop visiting. It means the humans who do visit arrive already primed — they heard your name from an AI and they're coming to verify. That first impression still needs to land. If the page looks like it was built in 2011, the trust collapses immediately.

So you're designing for two audiences at once: the crawler that extracts your content and the human who shows up afterward. Both need clarity. The AI needs clean semantic structure — proper heading hierarchy, factual opening sentences, no ambiguity about what the page is about. The human needs exactly the same thing, honestly. If your H1 is a clever pun and your first paragraph is brand poetry, you're failing both. Good AI-first design is just good design with less room for ego.

How does content structure affect whether AI cites your site?

Language models pull the opening sentences under headings first — that's where they look for answers to match against a query. If your H2 says "Our Philosophy" and the paragraph below it opens with "We believe in the transformative power of human connection," an AI will skip right past you. If your H2 says "How long does a website build take?" and your first sentence says "Most projects at Nuclear Marmalade run 6-12 weeks depending on scope," that's citable.

I tracked this pattern across several client sites. The ones we restructured with question-based headings and direct opening answers started appearing in AI-generated summaries within weeks. No technical trick — the content just finally answered the question in a form a model could extract. Our UI/UX skills work shows what this looks like in practice: structure that serves both reading modes at once.

What technical changes make a site AI-readable?

Three things matter more than anything else.

First, semantic HTML — actual <h1>, <h2>, , tags, not divs styled to look like headings. Crawlers and language model agents both depend on document structure to understand hierarchy. Second, FAQ schema markup. If you're writing question-based headings (and you should be), wrapping them in FAQPage structured data tells every crawler exactly what the page contains. Third, clean text extraction — no content locked inside JavaScript that requires execution to render.

We rebuilt a client's product landing page last year using this approach. A SaaS tool with 40% of its content rendered client-side via React state. We moved the key descriptive content into server-rendered HTML. AI citations went from zero to appearing in Perplexity results within six weeks. That's not magic. It's just being readable.

Is this the same thing as SEO?

It overlaps, but it's not identical. Traditional SEO optimises for ranking signals — backlinks, keywords, domain authority, click-through rate. AI-first discovery optimises for extractability — can a model pull a clean, confident answer from your content and stake its reputation on it? That's a different bar. An AI assistant won't cite a page because it ranks first. It'll cite a page because the content is specific, structured, and trustworthy enough to quote directly.

The irony is that most of what helps AI citation also improves traditional SEO: clear headings, specific claims, fast load, good semantic markup. But the priority order shifts. A 2,000-word page with one clear thesis and well-structured sections will beat a 500-word keyword-stuffed page in AI results even if the shorter page technically ranks higher on Google. Specificity beats density. Always has — we just have a new reason to care about it.

What did we get wrong when we started doing this?

Honestly? We over-indexed on crawlability and forgot the human. There was a phase where sites we touched were technically excellent — perfect schema, clean HTML, question headings — and kind of soulless to actually read. The content was structured like a FAQ database, not like a person explaining something they actually understood.

Turns out AI assistants are pretty good at detecting that too. The citations improved when we went back and made the writing sound like a human who knew what they were talking about, not a content brief being fulfilled. That's the balance the Nuclear Marmalade design approach tries to hold: technical structure and genuine voice, not one at the expense of the other. If you want to see how that plays out in a real build, the Telehance project is a good example — complex information architecture that still reads like something a person actually wrote.

What should you actually change on your site first?

Start with your most important pages — homepage, top service pages, anything you'd want cited if someone asked an AI about your industry. For each one: rewrite the first paragraph so it contains one clear, factual, standalone claim. Restructure your H2s as questions. Make sure the first 50 words under each H2 directly answer that question. Add FAQ schema if you haven't. Move any critical descriptive content out of client-rendered JavaScript and into the initial HTML response.

That's the 80% case. Beyond that, you're into nuance — crawl budget, internal linking strategy, entity disambiguation. If you want to think through what this means for your specific site, reach out to Nuclear Marmalade and we'll tell you honestly what's worth changing and what isn't. No fluff, no retainer pitch on the first call.


Key Takeaways

  • AI-first discovery means language models are now a primary way people find your business — design for that, not just for mobile screens.
  • The opening sentence under every heading is what AI assistants extract first. If it's vague, you won't get cited.
  • Semantic HTML and FAQ schema aren't optional extras — they're the foundation of being readable to any automated system, AI or otherwise.
  • The sites that show up in AI-generated answers share one trait: they answer the question in the first sentence, not the fifth.
  • Fixing this doesn't require a full redesign. Restructuring three pages with better headings and cleaner opening sentences can move the needle fast.