Skip to content
Docs

Quick Start

This walkthrough takes about ten minutes. By the end you'll have opened a project, edited 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

On the Home screen, click New project to create a fresh project, or Open existing folder to open one you've already started.

[Screenshot TODO: Home screen with the two primary CTAs.]

Denote will ask where to put the project. Pick any folder. New projects start empty; you'll populate them by running /vision in the embedded terminal.

2. Orient yourself

The main window has three regions:

  • Left — vertical rail of the layers: Vision, Ontology, Architecture, Screens, Spec (plus Intelligence + Settings below). Click a layer to switch.
  • Center — the canvas for the current layer. Each layer has its own shape (sidebar for Vision, entity cards for Ontology, sitemap for Architecture, home grid for Screens, Markdown preview for Spec).
  • Right — the embedded Claude Code terminal. Where skills run.

[Screenshot TODO: three-region workspace with layer rail, canvas, and embedded terminal.]

3. Start with Vision

Click Vision in the rail. The canvas is mostly sidebar with seven empty categories (Goals, Constraints, Non-Goals, Audience, Competitive Context, Open Questions, Scratchpad). The terminal is the primary surface here.

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 sidebar updates live. Confirm the items you want to keep.

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 design/vision.json, runs the ontology skill, and writes design/ontology.json — a single file containing intent, entities, personas, tasks, and priority rules. When it finishes, you'll see a notice in the terminal.

Switch to Ontology in the rail. Entity cards, persona cards, task graphs, and the relationship diagram all appear — the objects, personas, 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/
  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; each screen gets a template + variant. Also writes task.screenTouchpoints[] back into ontology.
  • /screens reads architecture + ontology, writes design/screens.json. Shells (chrome), per-screen compositions (zones with chips), global overlays.
  • /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 edited one layer, ran a skill, and a downstream layer updated. That loop is the whole pipeline.

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

Where to next