This is the second in a series of posts about what shipped in Caffeine V3. The first covered the new multi-agent build architecture. This one is about how V3 produces better-looking apps through three things working together: a design brief, an inspiration image, and a library of proven UI patterns.
Visual quality in an AI builder isn't just about the models. It's about when design decisions get made, what references the agents have, and whether they're building on proven patterns or improvising from scratch.
In V3, we addressed this on three levels. First, a dedicated Design agent produces a DESIGN.md: a structured design brief that every frontend agent reads and follows. Second, an AI-generated inspiration image gives agents a visual reference alongside the written brief. Third, a component pattern library ensures agents build on established UI conventions rather than reinventing the wheel.
The result is apps with more coherent visual systems that's largely invisible, because when it's working well, you just see an app that looks polished.
Before anyone writes a line of code, there's a designer
In the V3 multi-agent team, the Design agent runs in the first wave in parallel with the backend, before any frontend code is written. Its entire job is to answer one question: what should this app look like?
The output is a DESIGN.md file. It's a plain-text markdown document that captures a complete design system for your app: the visual theme, the color palette, the typography rules, how components should be styled, and crucially, what not to do. It's a brief, not a collection of hex codes.
Every frontend agent in the build receives this brief. When your app has multiple pages being built in parallel by separate agents, they all follow the same DESIGN.md. This is why the pages feel like they belong together. They're all working from the same source of truth, not improvising independently.
The idea of capturing a design system as a structured document isn't new. Tools like Google's Stitch use design specifications to bridge the gap between intent and implementation. Caffeine's DESIGN.md draws on the same thinking.
Here's what a DESIGN.md typically contains:
Visual theme and atmosphere — the mood and philosophy in plain language. "Dark-mode-native with content emerging from a near-black canvas" or "warm minimalism with generous whitespace." This isn't decoration, it's direction.
Color palette with roles — not just colors, but what each color is for: background, primary text, accents, interactive elements, status indicators. It’s a color system with principled relationships between values.
Typography hierarchy — font families, size scales, weights, line heights, and letter-spacing. A full table from display headings down to captions and labels.
Component styling — how buttons, cards, inputs, and navigation look, including hover and focus states. Made upfront, these decisions create a coherent system instead of the patchwork you get when each agent improvises.
Do's and don'ts — explicit guardrails like "no competing accent colors" or "maintain 4:1 contrast ratio minimum." These prevent the small visual mistakes that make an app feel unpolished.
You tell it what you want
The Design agent responds to what you describe. Say "dark and minimal with a single accent color" and that becomes the brief. Mention "clean and professional, like a fintech dashboard" and the agent picks up on that tone.
After the DESIGN.md is generated, you can review it and tell Caffeine what to change: swap the palette, tighten the typography, add guardrails. Every frontend agent downstream follows the updated brief.
If you want to start from a known visual direction, community collections like getdesign.md offer 60+ files inspired by the visual patterns of well-known products, including Vercel, Stripe, Spotify, Linear, and others. These aren't official design systems; they're curated starting points based on publicly visible design choices. Find one you like and reference it in your prompt or drop it into your project.
You can also ask Caffeine to generate a DESIGN.md inspired by any website. Describe the site, paste its URL, or upload a screenshot. Caffeine will analyze the design vocabulary (font choices, color relationships, spacing, surface treatment) and distill it into a brief. This isn't about copying a site's layout. It's about extracting the underlying design decisions so you have a principled foundation to build from.
The inspiration image
The Design agent doesn't just write a brief, it also generates an inspiration image.
When the DESIGN.md is done, the agent prompts an image model to create a visual representation of the design direction: the color palette applied to an abstract composition, the texture and mood of the theme. This image gets attached to every frontend agent in the build alongside the written brief.
It works for the same reason that showing a screenshot to an AI produces better results than describing it: visual information carries things that words approximate. As Caffeine CTO Kepler Vital describes it: "The agent sees both the brief and the image. It improves the design quality quite a bit, similar to when you upload a screenshot to the chat, but now everyone just has this by default behind the scenes."
If you have a specific visual direction in mind, you can also drop your own inspiration image into the project: a screenshot of a site you like, a mood board, a UI mockup. The frontend agents will use it as a reference alongside the DESIGN.md brief, giving you more direct control over the visual outcome.
Building on proven patterns
A good brief and a strong visual reference go a long way, but the agents also need to know how to build the actual components.
V3 frontend agents draw on a pattern library built on component.gallery: a catalog of 60 common UI components documented across 95 real-world design systems, with over 2,600 examples. Instead of inventing a drawer from scratch every time, the agent knows what a Drawer is, what width it should be, how overlay behavior typically works, and what the anti-patterns are. The same goes for modals, navigation bars, form layouts, and dozens of other components.
The practical effect is that Caffeine builds on established conventions rather than improvising. This means fewer surprises:components that behave the way users expect, follow accessibility patterns, and produce a more professional end result.
Same workflow, better results
Your workflow is the same. You describe what you want. You get an app.
What changed is that there's now a design layer between your description and the first line of frontend code. A brief is created, shared with every agent that touches the frontend, and persists with your project. When you iterate (add pages, change features, make adjustments) the design brief is already there, and the agents that do the work follow it.
Since adding this design layer, we consistently see apps that look nicer and work better than anything previous versions produced. We're not done! More font options, smarter variety, and better response to niche visual references are all actively improving,but the difference is already clear.
Next in this series: npm packages, connectors, CLI, MCP — and why V3 was built to keep getting better fast.