christine røde@chrstnerode
open on x ↗
1/11

we just wrapped our Spring quarter at @diabrowser. before i jump to the next big thing (!), a short behind-the-scenes on one of my favorite projects to date: artifacts! the design challenge: how do you make AI-generated docs that don’t *feel* AI-generated? (🧵 1/10)

2/11

we started prototyping Dia Files in Feb, and instantly found internal PMF. it was a richer, better way to read and share insights, vs. plain ol' chat responses. then the novelty wore off. the beige Claude look gets old. or you ask about fish, you get a page that looks like the ocean — fun, but hardly something you send your boss.

3/11

we wanted files made by Dia to feel elevated, consistent, well-crafted. designed, but not *over*-designed — the content should always come first. so i explored: what’s the very opposite of AI-generated slop design?

4/11

i kept landing on old physical media. memos. typewriters had no bold, no italic. metal type came in three sizes. more colors cost more money, so you make do with one. that became the thesis: in a world where full-fidelity interactive websites are cheap, constraints are a perk.

5/11

the trick is in the balance. too rustic and it's unpleasant to read. too polished and it looks too finished, authoritative, or vibecoded. the sweet spot is “you asked your assistant to do some research, and they came back with this.” a rough draft, for your consideration.

6/11

printed out, ready on your desk. black & white, cheap paper. still warm from the xerox machine. still beautiful. (cue me going mildly crazy hunting for the perfect crosshatching textures so charts could be rich even without color.)

7/11

the design process started in Figma, but quickly moved to Cursor for higher fidelity prototyping. it's been so empowering to own the execution on this level — to spend hours on every viewport, mode, and hover state, instead of driving engineers mad with my perfectionism.

8/11

reports are deferential. it’s your document, so Dia steps back. the Morning Brief is the opposite: opinionated, maximum expression, directly from Dia. it shows up first thing every day. instead of another stressful dashboard — can we make the start of your day better? calmer?

9/11

what if the morning brief felt like receiving a lovely, personal postcard? every brief features a public domain painting from the National Gallery of Art. words by LLMs, deliberately set against their antithesis: centuries-old, handmade art. all manually curated.

10/11

everyone gets the same art. we wanted to see: could art spark discussion? a watercooler moment? and nothing has made me happier than seeing the reactions inside and outside the company. because underneath all of this is a single goal, one of our company values:

11/11

obviously, all this took a whole amazing team: massive shout out to @jonathan_jlo for relentless prototyping, @jeffrafter for caring about grids even more than i do, and @jumhyn for being the voice of reason when it comes to avant-garde chart textures now onto the next project 🚀

5962940.6K
#dia-browser
#product-design
pinned 12 JUN 26· live

related

@PaulSolt@_chenglou@dr_cintas@beechinour@abouelatta_ali@by__huy@_madebygrayLow-key websites I quietly rely on 1) http://roadmap.sh Gives you a brutally clear learning path for roles like frontend, backend, DevOps, etc No fluff, just “learn this → then this → then this”. 2) http://playcode.io An online playground to quickly test HTML, CSS, JS without setting up anything locally Perfect for quick experiments and debugging ideas 3) http://usehooks.com A collection of reusable React hooks with real use cases Saves time and helps you avoid rewriting the same logic again and again 4) http://devhints.io Concise cheat sheets for languages, frameworks, and tools. Ideal when you forget syntax and don’t want to read a 20-minute blog 5) http://jsoncrack.com Turns messy JSON into a clean visual tree Makes understanding large APIs and configs way easier than staring at raw text 6) http://realtimecolors.com Lets you generate and preview color palettes instantly Useful when you want decent UI colors without guessing or copying blindly 7) http://regex101.com Build, test, and debug regex step by step with explanations Honestly, the fastest way to stop hating regex 8) http://bundlephobia.com Shows how big an npm package really is before you install it Helps you avoid bloating your app with “tiny” libraries 9) http://caniuse.com Tells you which CSS/JS features actually work across browsers Essential before using shiny new features in production 10) http://toolbox.googleapps.com Google’s own diagnostics tools for DNS, email, headers, and network issues Surprisingly useful for debugging real-world problems 👉 Which one of these do you already use and which one did you not know existed?@shekhu04@UiSavior@bertwitt12+13