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, derive the screen inventory and composition intent from the model. Every layer is a checkpoint. Every decision has a reason. When you're ready, Claude Code reads your decisions and builds.

The problem Denote addresses

Other AI design tools are visual first. Write a prompt → tool renders a screen → structure is whatever the model invented. You have no access to that structural decision until it's painted into pixels. You either accept a black box you didn't shape, or 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 isn't the problem. Blindness is.

What Denote does differently

Denote is structure first. You shape the object model, the governance rules, the screen inventory, the composition 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 → Ontology → Architecture → Screens. You move through the layers in order, each capturing a different class of decision. When you're ready to hand off, /spec projects every upstream decision into design/SPEC.md — a complete design specification an implementer reads to build.

The two app model

• Denote is the thinking tool. Desktop app alongside Claude Code; writes structured files to your project directory.
• Claude Code is the building tool. Reads those files and generates the code.

Both apps open at the same time, pointed at the same filesystem. 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 picture.

The four layers

1. Vision — the living scratchpad. Goals, constraints, audience, open questions.
2. Ontology — entities, personas, tasks, visual cues (inline on entities), priority rules.
3. Architecture — screen inventory + navigation. Each screen carries a template + variant directly.
4. Screens — per-screen composition at chip fidelity. Shells, zones, overlays.

A fifth surface, Spec, is the hand-off. Run /spec to roll every layer's output into design/SPEC.md.

You don't 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 four layers overview for the 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.

Denote captures zero aesthetic intent. No color decisions, no token values, no type ramps, no spacing scales. The Spec describes the structure — entities, templates, zones, visual cues like "has image → card with thumbnail". The implementer, working inside the target project, adapts the spec to whatever design system that project already uses (shadcn defaults, an existing Tailwind theme, a tokens JSON, a Figma export — anything Claude Code can read).

The thinking tool stays the thinking tool. Styling lives where it already lives.

What this documentation covers

• Get Started — installed and running.
• Core Concepts — the model: two-app split, four layers at a glance, governance schema, intelligence system.
• The Layers — deep dive on each layer plus the Spec output.
• Working with Claude Code — embedded terminal, the skills, writing your own intelligence.
• Reference — file-by-file project map, FAQ, troubleshooting.

Where to next

• New to Denote? Start with Installation, then Quick Start for a ten-minute walk through the full pipeline.
• Want the conceptual picture first? Jump to The two app model and read through Core Concepts in order.