Designing better artifacts for Dia Browser

We just wrapped our Spring quarter at The Browser Company , and before I move on to the next big project, I wanted to write up a behind-the-scenes of my favorite Dia project to date: Chat-generated artifacts.

It started with a question that sounds simple and isn't: How do you make AI-generated documents that don't feel like slop?

A bit of context: Dia is the browser we’re building. It connects everything you’re working on across your apps so you can think, prep, and create — not just search. Download or learn more at diabrowser.com

The problem with AI design

When we started prototyping Files back in February, they immediately took over how we worked internally. In seconds Dia could create rich data dashboards, project progress updates, summaries of research findings — a far better way to consume and share information than chat responses.

But the novelty of the designs themselves faded fast. The signature Claude look — the beige backgrounds, the bold italic serifs, the rounded cards with that weird left-side border — reads as slop. You ask about fish, and get a page that looks like a fish tank. Fun exactly once, but not something you want to share with your boss.

Everyone has seen generic AI output by now. Our job was to produce work people are proud to read, reference, and share — without it feeling like it's trying too hard. We wanted Dia's files to feel elevated and well-crafted. Designed, but never so designed that the design gets in the way of the content. Our driving design principles became:

• Consistent — so that you can share a weekly update report with your boss every week, and know it'll look similar each time
• Subtly varied — so that you can have multiple documents open at once, and still tell the difference at a glance
• Rooted in convention — so you don't tire of of looking at it. It should, at the end of the day, look like a document, not a website

That meant rooting our visual language in traditions that sit outside of what AI naturally produces today.

Looking for inspiration

So I asked myself: what's the polar opposite of AI-generated design?

Thick, hardcover books? Fine art?

Or the other extreme — old office memos, typewritten ephemera, crappy laser prints on cheap colored paper? Artifacts from the office work of a bygone era?

On a typewriter, there is no bold or italic — with one size and one weight, hierarchy comes from underlines, ALL CAPS, and spacing. In traditional typesetting, fonts were physical lead letters; your drawers might hold 12pt, 16pt, and 72pt, and nothing in between. In print processes, more colors cost more money. For ephemera, you make do with one color.

Apply those constraints to digital design, and you get an aesthetic that's genuinely unique in today's landscape, precisely because AI doesn't naturally produce it.

That became the thesis: in a world where full-fidelity interactive websites are cheap and abundant, restraint is the differentiator. Constraints aren't a drawback — they're a quality guarantee.

The design process

I still start every project in Figma. This one kicked off with tons of different visual explorations. I find it's the quickest way to get lots of ideas out still. I can create 20 different revs in Figma in time it takes Claude to think through one idea.

But once I had a couple of ideas I liked, I quickly moved to prototyping in Cursor.

As a designer, being able to own the execution at that level is genuinely empowering. I can spend hours on every viewport and hover state instead of burdening engineers with my perfectionism!

And it had a concrete product payoff: we were able to use much of the code I (or, uh, Claude) created as-is, meaning it was feasible to bundle in "non-MVP" ideas like a customization panel from the get-go.

Two opposite projects

Somewhere along the way, we realized we weren't designing one thing. We were designing two opposite things.

• Reports are the user's documents. Dia steps back and lets the content lead.
• The Morning Brief is Dia's voice — the one place it gets to fully express itself. Same design system, opposite personalities.

I. Reports as Ephemera

The trick with reports is getting the balance right. Too rustic, and it looks careless, not worth sharing. Too polished, and it looks too finished, too authoritative, vibe-coded.

The sweet spot is: you're Don Draper, you asked your assistant for some research, and they came back with this. It's competent, but also utilitarian. For your eyes only.

So the default report is deliberately a working draft. Monochrome palette, minimal typographic hierarchy instead of heavy font weights. Printed out, ready on your desk. Black and white, cheap paper, still warm from the xerox machine. Still, somehow, beautiful.

There's a product idea buried in that restraint: if the default is a draft, then branding is the upgrade. When you apply your company's colors and typefaces, the document visibly transforms from internal working draft into official communication — something printed on glossy, thick paper, ready for distribution.

II. The Morning Brief as a moment of beauty

The Morning Brief flips every dial the other way. It's delivered before your day starts, so the question was: how do we make this a joyful moment — something to read leisurely with your coffee — rather than another stressful dashboard?

What if felt like your browser sent you a beautiful letter? Or a postcard?

Every brief features a real painting: a public domain work from the National Gallery of Art, a different one each day, all manually curated. Words by LLMs, deliberately set against their antithesis: centuries-old, handmade art. Large enough to see the brushstrokes.

It makes each morning visually distinct — like a magazine, every issue is recognizably the same publication, but you'd never confuse January's cover with March's.

One deliberate choice: everyone gets the same painting. I wanted to see whether art could spark discussion — a watercooler moment.

Nothing has made me happier than watching people inside and outside the company react to the day's painting like it was addressed to them personally.

Make them feel something

Underneath all of this was a single goal — one of our company values, in fact. Not "make it pretty." Make them feel something.

Judging by the team's Slack — reactions ranging from "soon as I saw this bloke I knew it would be a good day" to "this didn't hit for me" in the same day — I think it worked.

Of course, none of this could have happened without an amazing team. Massive shout-out to Jonathan Lopez for relentless prototyping, Jeff Rafter for caring about grids even more than I do, and Frederick Kellison-Linn for being a voice of reason on my more avant-garde pushes.

Now — onto the next project. 🚀

Postscript

One of my favorite quotes is by Tibor Kalman. Having spent much of my career working for large tech companies, it's a rare opportunity to create something different. We are usually optimizing for making things that two billion people will find inoffensive, not creating beauty.

But in an age of AI, I think this is more important than ever. Polished, perfect output is no longer interesting. Humans, with all their quirks and flaws, are.

We live in a society and a culture and an economic model that tries to make everything look right. Look at computers. Why are they all putty-colored or off-fucking-white? You make something off-white or beige because you are afraid to use any other color - because you don't want to offend anybody. But by definition, when you make something no one hates, no one loves it. So I am interested in imperfections, quirkiness, insanity, unpredictability. — Tibor Kalman