Introduction

Denote is the structure-first design tool for AI-built software. Other AI design tools render a screen from a prompt and bury the structural decisions inside the output. Denote inverts the order through Object Oriented UX. You name the objects, define their relationships and governance rules, and derive the page inventory and layout intent from the model. Every layer is a checkpoint. Every decision has a reason. When you are ready, Claude Code reads your decisions and builds.

The problem Denote addresses

Other AI design tools are visual first. You write a prompt. The tool renders a screen. The structure is whatever the model invented. You have no access to that structural decision until it is already painted into pixels. You either accept a black box you did not shape, or you tear the output apart to retrofit your real information architecture, workflows, and hierarchy.

The faster these tools get at rendering, the further that decision slides out of your control. Speed is not the problem. Blindness is.

What Denote does differently

Denote is structure first. You shape the object model, the governance rules, the page inventory, the layout intent before any code or visual is generated. Every layer is a checkpoint. Every decision has a reason. Nothing is hidden. Claude Code generates the visual output at the end, governed by decisions you already made.

The methodology

Denote follows Object Oriented UX, a design method developed by Sophia Prater. Name the objects. Define their attributes, states, and relationships. Derive actions, screens, and flows from the object model.

Denote is an OOUX authoring tool compressed into a pipeline: Vision, Extract, Map, Structure, Layout, Plan. You move through the layers in order, each one capturing a different class of decision. By the time Claude Code reads the output, every structural question has an answer you chose.

The two app model

Denote is the thinking tool. Claude Code is the building tool.

Denote runs as a desktop app alongside Claude Code. Denote writes structured files to your project directory. Claude Code reads those files and generates the code. Both apps open at the same time, pointed at the same filesystem.

This split is the point. The thinking layer stays visual, structured, and reviewable. The building layer stays terminal-native and code-aware. Neither tool pretends to do the other's job.

See The two app model for the full explanation.

The six layers

The pipeline moves through six layers. Each one captures a different class of decision.

1. Vision is the living scratchpad for the evolving idea. Goals, constraints, audience, open questions.
2. Extract pulls entities, personas, and tasks out of the vision.
3. Map assigns governance to the entities. Visual cues per trait, patterns per context, priorities when rules conflict.
4. Structure derives the page inventory and navigation from the map.
5. Layout places global shells, per-page region wireframes, and surface patterns.
6. Plan assembles everything into a build plan Claude Code can execute.

You do not need to fill every layer before Claude Code starts building. You do need to know what each layer is for, and what decisions it captures.

See The six layers overview for a deeper walkthrough.

Why no styling

The moment Denote owns color pickers and token editors, it becomes another mockup tool. Denote refuses the styling game on purpose.

The Style layer captures aesthetic intent (the feel, the register, the references) and a pointer to where tokens actually live. Tokens live in the target environment. The default is shadcn's token set. You can point at a different token file, or tune shadcn through prompts. Claude Code applies them at build time.

See The design system pointer for how this works in practice.

What this documentation covers

Get Started gets you installed and running.

Core Concepts explains the model: the two app split, the six layers at a glance, the governance schema, the design system pointer, the intelligence system.

The Layers goes deep on each of the six. Schema, authoring flow, the skills that operate on it.

Working with Claude Code covers the embedded terminal, the skills that ship with Denote, and how to write your own intelligence.

Reference is the file-by-file map of a Denote project, an FAQ, and troubleshooting.

Where to next

If you are new to Denote, start with Installation, then follow the Quick Start through a ten-minute walk of the full pipeline.

If you want the conceptual picture first, jump to The two app model and read through Core Concepts in order.