Introducing Denote
Yesterday I publicly launched Denote, a spec-driven product design tool. I built it all by myself on nights and weekends for the past few months. What a time to be alive! Anyway, Denote is a Mac app where you design a product as a system (the objects, the screens, the rules that connect them) and it writes all of that thinking to plain files that Claude Code (or any other IDE) builds from. You think in Denote, you build with Claude Code. The beta is free to download today, and the rest of this post is the story of why it exists.
I'll first start with an admission… I've built this thing three times. Sheesh!
The first attempt was a web app called Design Compiler. The idea was to pull the structure out of a product idea (the objects, the relationships, the patterns they imply) and map it to real UI patterns. The concept worked. The output didn't. I could extract a beautiful model of a product, and then I'd hit a wall trying to get a browser to render anything a designer would actually take seriously.
The second attempt was a desktop app that tried to do everything. The design thinking layers and an AI pipeline that generated interactive prototypes, dev server and all. The thinking layers were good. The prototype pipeline was a haunted house. Slow, fragile, and hungry: my evenings went into debugging plumbing instead of improving the design experience. Somewhere around the hundredth pipeline bug I finally admitted defeat. Building a coding pipeline all by myself wasn't the best idea. Better to build a tool around the expertise I actually have, which is the product thinking part.
Besides, the rendering problem is already solved. Claude Code generates working code natively, happily, all day long. It didn't need my janky pipeline. What doesn't exist (what has never existed, as I ranted in Drawing With Words) is a tool for the thinking itself.
So the third version does something that sounds almost lazy: it doesn't render anything. Denote is the thinking tool, and Claude Code (or any other IDE) is the building tool. This time I just embedded the terminal and added Claude Code into it, instead of building a custom chat on top of the API. I went down that road before. It looked nicer, but it was simply less powerful than the real thing. Denote stays out of the design system business too. There are a zillion amazing tools for that already, and there's something nice about solving one problem well instead of trying to do everything in one app (cough, cough, Figma, cough. Who, me? I didn't say anything). What did all that restraint turn into? An app where you design the product structure itself instead of drawing pictures of it and keeping all that product logic in your head, meeting notes, and scattered documentation. You work through four layers, each one building on the last.
Let's dive into those layers, shall we?
Vision
Vision is a conversation. You talk through the idea with Claude in a terminal that lives right inside the app, and the things worth keeping (goals, constraints, who it's for, the open questions) accumulate in a sidebar as you go. Think of it as a simple PRD generator that the rest of Denote works off of. It's the one layer that never really finishes, because the idea keeps evolving. That's not a bug; that's the whole point of having it. Learn more in the docs.
Ontology
Ontology is the invisible model, made visible. The entities with their attributes, states, and relationships. The personas and what they already expect from tools like yours. The tasks that actually matter. In Drawing With Words I wrote that every product designer carries this model in their head and no canvas tool could ever hold it. This layer is where it finally gets to live outside your skull. Learn more in the docs.
Architecture
Architecture turns the model into screens. Which screens exist, how they're organized, how you move between them. Every screen carries a pattern choice, and a note on why that pattern won, because six months from now nobody remembers the why. Learn more in the docs.
Screens
Screens decides what content lives where (I should have really called it Wireframes, but it's too late now). The shells (the persistent chrome around everything), and each screen's zones, filled with labeled content chips: heading here, filters here, card grid there. What content, in what order. The closest Denote ever gets to a picture is a schematic wireframe, and that's deliberate. Learn more in the docs.
And when you're ready to build, Denote generates a spec out of all of it. Data model, routes, screen compositions, the works. Learn more in the docs.
Here's the part that makes it click, though: everything you touch writes instantly to plain files. Markdown and JSON, in a folder, inside your actual project, next to your actual code. There's no export step, no handoff deck, no "attached please find the redlines." You design in Denote, the files update, you turn to Claude Code and say "build the settings page," and instead of guessing, it opens the blueprint and knows what the settings page is for. Something feels wrong in the build? Adjust it in Denote, ask Claude to rebuild that screen. The loop runs about as fast as you can think.
Notice what's missing. Denote doesn't generate code, doesn't run a dev server, and makes no mockups. It also captures zero aesthetic intent, on purpose: your project's existing design system owns how things look, and Claude Code adapts to it when it builds. Denote's edge is the thinking underneath, the layer our tools never expressed. Structure is the antidote to generic output, and Denote is that antidote with a UI.
It does come with opinions, though. Denote ships with a design intelligence system: dozens of plain-text knowledge files encoding how I think about hierarchy, patterns, and object-oriented UX, which the AI leans on when it makes recommendations. Every file is readable and editable. If you disagree with anything in the intelligence layer, put it in writing and remove any of the defaults, and the tool will take your thinking from then on.
And here's the part that still makes me laugh. I'm a designer. I don't write production code. And Denote is a real, signed, notarized Mac app with an auto-updater, shipped by me directing Claude Code, in exactly the kind of loop the app itself is built around. The tool is its own proof. If "a designer telling an AI what to build" sounds far-fetched, well, you're reading a post about an app that exists because of it.
Some honest fine print: Denote has been in beta since July, and it moves fast (the release notes have become their own genre). It's Mac only for now. It's a personal craft project, not a startup, which is exactly why it gets to be this opinionated. You can download it at denote.cool, and if you try it and something feels off, email me. I read everything.
For 25 years I've been painting pictures of interfaces. Thousands of screens, in Photoshop and every tool that came after it. The paintings looked great, and making them was genuinely fun; I still love them. But the painting was all our tools could hold. The actual product thinking, the blueprints behind every screen, never got captured. That part lived in our heads the whole time.
Now there's a tool that holds the thinking.