Hello!
Today I'm thinking about design systems for AI agents, mostly because we just updated the Intent design system page for anyone who wants a working example of what this looks like in practice. Why does it matter? With agents, anyone on a team can update a website. Marketing adds landing pages, engineering adds docs, a PM tweaks the pricing page, and each of their agents will happily implement its own colors, spacing, and tone unless something steers them toward a unified whole. On Intent, that steering comes from a few pieces working together. An AGENTS.md file tells agents to reuse the theme classes and CSS variables in the site's global stylesheet, which defines colors, fonts, type sizes, the responsive grid, and light and dark themes as design tokens (named values the whole site shares). So when someone asks an agent to add a new button, it reuses the existing Button component, which adapts to dark mode automatically, and no human has to look anything up. For 20+ years (oof!) I've watched the same thing happen: teams invest in a design system, then struggle to keep it current until it describes a product that no longer exists. Building the design system page from the same code as the site fixes that, because it stays current automatically. And here's the part that still makes me smile: design teams have spent years trying to get people to actually read their design system documentation. Agents read it every single time.
How was Ask LukeW feature built?
I created the Ask Luke feature to answer questions about digital product design, startups, and technology using the extensive content I've produced over the years. The feature was released in April 2023, and I've been iterating on it since.
The system runs on a modern web stack built with SvelteKit and Supabase, deployed through Vercel. SvelteKit serves as the backbone, delivering fast performance while keeping the developer experience smooth. Supabase handles the heavy lifting for authentication, database operations, and file storage.
The Ask LukeW feature isn't built on top of any one particular LLM. Instead, it uses a pipeline of multiple AI models to parse, index, retrieve, and rank content before generating any responses. Rather than betting everything on a single AI provider, the system hedges its bets across multiple different LLM services: OpenAI, Anthropic's Claude, Mistral AI, Google's Gemini, Cohere, and AWS Bedrock. Different models excel at different tasks - Claude might nail complex reasoning while Gemini could handle multimodal inputs better.
When someone asks a question, we retrieve the most relevant parts of my content, rank them, and use an AI language model to summarize them into an answer. The application performs both embedding search and keyword search simultaneously. This dual approach ensures comprehensive coverage - the embedding search finds semantically related content even when different words are used, while keyword search captures specific terminology and phrases.
The feature uses various AI models for tasks like speech-to-text conversion, audio diarization, topic extraction, content summarization, and PDF parsing. We regularly update these models as new options become available. Because the AI space is changing so rapidly, I'm regularly trying new models in each step of this pipeline. When one of these models improves part of the pipeline substantially, I implement it. This is a frequent enough use case that I've built an admin system for trying new models and prompts quickly before deploying them.
As answers stream in, we add citations to the relevant articles, videos, PDFs, etc. being used to answer a question in real-time. When users select a source, they are taken to the relevant part of that source: to the relevant point in a video; to the relevant page in a PDF. This makes it easy for users to verify information or dive deeper into a topic.
The UI layer leverages Svelte's component-based architecture, which means less boilerplate. TailwindCSS handles styling without the CSS bloat that haunts larger projects. TypeScript brings sanity to the codebase with compile-time error catching, while Vite powers the development server and build process.
If you're interested in learning more about how the Ask LukeW feature was designed and built, I'd recommend checking out my "How AI Ate my Website" video, which you can find in the Presentations section of my website.