Skip to content
Docs

Quick Start

This walkthrough takes about ten minutes. By the end you'll have opened a project, worked through one layer, run a skill in the terminal, seen the file change on disk, and watched the change propagate downstream.

1. Open or create a project

The Home screen offers three ways in:

  • New project creates a fresh project. Denote asks for a name, a location, and which product types you're designing for (responsive web, desktop app, native mobile). Pick responsive web if you're not sure; you can change it later in Project settings.
  • Open existing folder opens a project you've already started.
  • Try the sample project copies a small finished example (an expense tracker) so you can explore every layer with real content before starting your own.

[Screenshot TODO: Home screen with the three CTAs.]

2. Orient yourself

The main window has four regions, left to right:

  • The rail — vertical strip of layers: Vision, Ontology, Architecture, Screens, Spec, plus Intelligence below. Theme toggle and Settings sit at the bottom. Click a layer to switch.
  • The terminal — the embedded Claude Code terminal, where skills run. Drag its right edge to resize.
  • The canvas — the current layer's workspace. Each layer has its own shape: sections for Vision, entity rows and a relationship graph for Ontology, a sitemap for Architecture, a home grid for Screens, a Markdown preview for Spec.
  • The right panel — contextual. It shows your Sources on Vision, Write Status on Spec, and a detail panel for whatever you select everywhere else.

[Screenshot TODO: four-region workspace with rail, terminal, canvas, and right panel.]

3. Start with Vision

Click Vision in the rail. The canvas shows seven empty sections (Goals, Constraints, Non-Goals, Audience, Competitive Context, Open Questions, Scratchpad). The right panel holds Sources, where you can drop in reference material (a PRD, research notes, any file) for the skills to read.

Click into the terminal and type:

/vision

Claude Code starts a conversation about your product idea. As you talk, it proposes items and writes them to design/vision.json with status proposed. The canvas updates live. Confirm the items you want to keep. You can also select any text in the terminal and add it straight to a Vision section from the popover that appears.

For this walkthrough you can describe anything — a recipe portion calculator is the small example used throughout these docs.

4. Run the ontology skill

Once Vision has a few confirmed items, type:

/ontology

Claude Code reads your sources and design/vision.json, runs the ontology skill, and writes design/ontology.json — a single file containing intent, entities, personas, tasks, mental models, and priority rules.

Switch to Ontology in the rail. Entities, personas, the relationship graph, and task flows all appear — the objects, users, and workflows of the product, pulled out of the conversation.

5. Look at what changed on disk

Open the project folder in Finder (or your code editor):

design/
  project.json        ← product types, written at creation
  vision.json         ← written by /vision
  ontology.json       ← written by /ontology
  .denote/
    activity.jsonl    ← log entry for every skill run

Every skill run is logged. Every file change is on disk. Nothing is hidden in app state.

6. Keep going through the pipeline

The same loop works for every layer:

  • /architecture reads ontology, writes design/architecture.json. Screen inventory and typed navigation, with a template + variant for each screen on each surface it appears on. Also writes task.screenTouchpoints[] back into ontology.
  • /screens reads architecture + ontology, writes design/screens.json. Shells (chrome), per-page compositions (zones filled with chips), global overlay rules — one composition per page per surface.
  • /spec reads everything, writes design/SPEC.md. The design specification an implementer reads to build the product.

You run skills in the terminal to move between layers. You edit the canvas in Denote to shape the content of a layer. Both tools are looking at the same files the entire time.

7. What just happened

You worked through one layer, ran a skill, and a downstream layer filled in. That loop is the whole pipeline.

  • Vision captures the idea.
  • Ontology pulls the objects, users, and rules out of the idea.
  • Architecture derives screens and navigation, with a template + variant per screen.
  • Screens composes each page with chips in zones, per surface.
  • Spec rolls every decision into a single SPEC.md for hand-off.

Where to next