Alright, I did something ridiculous this weekend.
I went and reverse-engineered Claude’s UI.
Not the model. Not the API. The design — the way it presents artifacts, the project structure, the typing indicators, the subtle animations when context windows fill up. All the stuff that makes Claude feel less like a chat bot and more like a collaborator.
Why? Because I was bored, and also because I wanted to understand why every AI chat app still feels like a web form from 2010.
Here’s what I found.
Claude’s interface isn’t magic. It’s a carefully orchestrated set of composable patterns — almost like a design system designed by someone who actually uses the product. The artifact panel, for instance, has a very specific layout: a resizable pane with its own state management, independent of the conversation thread. That’s not obvious until you try to rebuild it.
I spent two hours crawling through the minified CSS and React component tree (yes, they use React, and yes, the source maps are half-baked). What I pulled out was a clear pattern: every interactive element — the code blocks, the image previews, the table renderers — follows the same data flow. The model emits a structured JSON block, and the frontend picks it up with a set of pre-registered renderers. It’s decoupled, extensible, and frankly, well thought out.
The boring part? Most of it is just good engineering. The artifact system is basically a virtual DOM renderer with a custom bridge to the chat state. The “thinking” indicator is a state machine with four states. The project tree is a recursive component with lazy loading.
The interesting part? They didn’t invent anything new. They just committed to a few decisions that other teams leave as “we’ll figure it out later” — like treating every model output as a first-class UI event, not just a string to slap on the screen.
I won’t pretend I reverse-engineered the entire application. That’s impossible from the client side, and ethically fuzzy if you push too far. But I did extract enough to rebuild a working mock of the artifact system, the project layout, and the conversation panel — all in plain HTML/CSS/JS, no framework, no bundler. Around 800 lines of code.
And yes, I open-sourced it.
You can find it on GitHub: [link placeholder]. MIT license. Free to use, modify, laugh at.
The repo is called claude-ui-patterns. It’s not a production thing — it’s more like a reference implementation for anyone who wants to understand how modern AI chat UIs could work. If you’re building your own AI tool and need a starting point for the interaction layer, this gives you the skeleton.
Look, I know open-sourcing a reverse-engineered design system sounds like something a person with too much time and not enough sense would do. And you’d be right. But here’s the thing: the real value of AI isn’t in the model alone. It’s in how the output meets the user. And right now, most products treat that as an afterthought.
Claude’s design team did the hard work of figuring out what “good” looks like — and they made those patterns visible by using them consistently. I just copied the homework and put it on the street corner.
If you’re building something, steal from them. Don’t copy the pixels — copy the thinking. The artifact system isn’t just a widget; it’s a philosophy that says “the conversation and the output are separate concerns.” The project tree isn’t just a sidebar; it’s a way to give the AI memory that feels natural.
Go read the code. It’s 800 lines. You can finish it during a coffee break.
Then go build something that doesn’t feel like a chat window from 2015.
P.S. I’m fairly sure Anthropic’s legal team is not going to come after me for publishing a deconstructed version of their CSS and component logic. But if they do, I’ll just call it “educational fair use” and apologize really nicely.