Quick Start

This walkthrough takes about ten minutes. By the end, you will have opened the sample project, edited one layer, run a skill in the terminal, seen the file change on disk, and watched the change propagate into a layer downstream.

You do not need to have written anything yet. The sample project is fully populated.

1. Open the sample project

On the Home screen, click Open sample project.

Denote will ask where to put the copy. Pick any folder. Denote will copy the sample into a new project directory and open it.

The sample project is a recipe portion calculator. A small utility that lets a home cook scale any recipe up or down by serving count. Every layer is already filled in, so you can see what a complete Denote project looks like before you build one from scratch.

2. Orient yourself

The main window has three regions.

Left: a vertical rail of the six layers (Vision, Extract, Map, Structure, Layout, Plan). Click a layer to switch to it.

Center: the canvas for the current layer. Each layer has its own shape. Vision is a text-first scratchpad. Extract is a list of entities, personas, and tasks. Map is a governance editor. Structure is a page inventory. Layout is a set of wireframe regions. Plan is a rendered Markdown plan.

Right: the embedded Claude Code terminal. This is where skills run. Anything you type here is sent to Claude Code.

3. Look at the Extract layer

Click Extract in the left rail. You will see the entities Denote's /extract skill pulled out of the vision: Recipe, Ingredient, Serving, Cook. Each card shows the entity name, a short description, and the attributes the skill identified.

The entities did not come from nowhere. They were derived from the Vision layer when someone ran /extract in the terminal. This is the pattern: each layer is derived from the one above it by running a skill in the terminal.

4. Edit the Vision

Click Vision in the rail. You will see goals, constraints, audience, and open questions, all editable.

Add a new goal by clicking the goals section and typing:

Save favorite scaling ratios per recipe

Hit Enter. Denote writes the change to design/vision.json on disk immediately.

5. Run the extract skill

Click into the terminal on the right and type:

/extract

Claude Code reads the new Vision, re-runs the extraction, and updates design/entities.json and related files. When it finishes, you will see a notice in the terminal and the Extract canvas will update.

Switch to Extract in the rail. A new entity (ScalingRatio or similar) will have appeared. The existing entities may have new attributes. The cascade happened because you changed an upstream layer and ran the downstream skill.

6. Look at what changed on disk

Open the project folder in Finder (or your code editor). You will see:

design/
  vision.json       ← updated with your new goal
  entities.json     ← updated with the new entity
  .denote/
    activity.jsonl  ← log entry for the skill run

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

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.
• Extract pulls the objects out of the idea.
• Map assigns governance to the objects.
• Structure derives pages from the map.
• Layout wireframes the pages.
• Plan assembles a build plan Claude Code can execute.

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.

Where to next

• If you want the conceptual picture, read The six layers overview.
• If you want to understand how Denote and Claude Code share work, read The two app model.
• If you want to go deeper on a specific layer, jump to Vision, Extract, or any of the others.
• If you are ready to start your own project, create a new project from Home and run /vision in the terminal to begin.