i inkling Tutorial · for a friend
your documents · no ceiling

No ceiling on your docs.

Markdown caps what a thinking document can do. inkling doesn't. Your perf report renders its chart from a CSV. Your architecture explains itself on click. Your learning note is a real notebook, not a memo. Interactive. Computational. Aesthetic. Warm. Whatever the doc earns — built turn-by-turn by your agent as you think out loud.

the problem

Markdown is a ceiling. Your thinking deserves more.

You write the doc. The numbers go into a static table because markdown can't chart them. The architecture goes into ASCII art because markdown can't render diagrams. The decision tree gets flattened into bullets. The CSV gets pasted as a code block. The doc ships. It gets archived. You never reopen it — because there's nothing to reopen into.

Below is the same Q1 funnel rendered two ways — flip the tab and see what the format actually costs you.

# Q1 Onboarding Funnel The funnel has four steps. Counts shown below. | Step | Users | |-----------|-------| | Landing | 4200 | | Signup | 2100 | | Verify | 900 | | Activate | 540 | The biggest drop-off is between Verify and Activate (40% loss).

Q1 Onboarding Funnel

Hover any bar. Click for context. Toggle the view.

Bars and labels are computed from the JSON below — the doc reads its own data. Markdown can't do any of this. Inkling treats it as the default.

the solution

Let the agent build the doc your thinking deserves.

inkling is a Claude Code skill. You describe the document in natural language — no markup, no slash commands. The agent designs the chassis for this specific doc, invents the structural shapes it needs, writes the styles, wires the interactions, parses your data, and renders a folder of HTML + CSS + JS + data you can open offline, archive forever, or share.

Every render must hit five axes. None are negotiable. If any axis falls below threshold, the agent fixes it before declaring done.

01

Interactive

The doc reacts. Click-to-explain on diagrams, decision walks, drawers, focus mode, scroll-spy, glossary popovers. Things markdown literally cannot do.

02

Computational

The doc computes. Inline CSV parsing renders charts. Decision trees walk from source data. Numbers update when the data changes. Bound, not pasted.

03

Aesthetic

Typographic care, layout discipline, restraint. Real serif type for prose, mono for code, a warm-notebook palette inherited across every doc in the kit.

04

Warm

Paper tones, gentle interactions, no chrome-junk. The doc invites reopening — it reads like a notebook page, not a SaaS landing.

05

Originality

Every render must invent at least one structural shape the kit hasn't seen. No template menu — the agent designs what this doc earns. Below 5/10 is a hard fail.

The rest of this page shows how it actually works — the primary flow, a typical session, what a doc folder looks like inside, and the prompts to paste into Claude Code to start your own. This page was built by inkling. Scroll to the bottom to see its own event log.

The primary flow

What happens between your message and the live doc

Click any step to see what the agent does, and what you see.

A typical session

Six turns that build a real doc

A simulated conversation with the agent — friend talks on the left, the agent reports on the right with the files it actually touched. Notice you never see a slash command.

Friend
Hey, create an HTML doc for our Q1 onboarding revamp. It will have a funnel chart and a few sections.
Claude
Got it. Started a new doc at docs/2026-05-14-onboarding-revamp/. The chassis isn't decided yet — that gets designed on the first real content add. Just told you what verb I picked: new
+ index.html + style.css + runtime.js + doc-source.json
Friend
Here's the drop-off CSV. Parse it and show a bar chart.

step,users
Landing,4200
Signup,2100
Verify,900
Activate,540
Claude
Copied the CSV into the doc as data/funnel.csv so the chart is reactive — edit the file, the chart updates on reload. Designed a dashboard chassis because the first content was data-shaped, not prose-shaped. Invented one new behavior: renderFunnelChart with paper-warmed bars. add
~ index.html ~ style.css ~ runtime.js + data/funnel.csv
Friend
Now add a section titled "What we changed" with three principles: simplify, surface, sequence.
Claude
Added a principles section under the chart. Three numbered cards. Reused the existing token palette but invented a new three-principle chassis for this doc — narrower cards, clay accent on the numerals. add
~ index.html ~ style.css
Friend
Actually, change the chart to show conversion percentages instead of raw counts.
Claude
Edited the chart to compute each step as a percentage of Landing. Updated the chart legend, recomputed the bars. The CSV stays raw — the math is in runtime.js, so when you swap in new data later the percentages recompute automatically. edit
~ index.html ~ runtime.js
Friend
Drop the "What we changed" section. We're going to rewrite it differently.
Claude
Removed the principles section, plus the styles and any classes that no longer have a reference. Recorded a remove event in the log so we can replay or undo later. remove
~ index.html ~ style.css
Friend
Open it. I want to see it.
Claude
Opened it in your browser: docs/2026-05-14-onboarding-revamp/index.html. Five-axis audit on the doc as it stands now — Interactive 8, Computational 7, Aesthetic 8, Warm 9, Originality 8. show
What a doc actually is

Anatomy of a doc folder

A doc isn't a file — it's a folder. Click any node in the tree to learn what each file does and why it's there.

docs/<slug>/
examples

Three docs inkling has rendered.

Each link below opens a real inkling artifact. Read the doc-source.json inside each folder to see the event log that produced it — provenance is part of every doc.

Your turn

Start your first doc in two messages

Open Claude Code in any folder. Paste the first prompt. After it replies, paste the second. That's it.

Message 01

Start the doc

Tell the agent what the doc is for. No slash commands. No template names. Just intent.

Hey, create an HTML doc that captures my notes on [topic]. It should be interactive and feel like a notebook, not a memo.
Message 02

Add something real

Paste data, an image, a section, anything. The agent reads your intent and edits the live folder.

Now add a chart from this data.

step,users
A,100
B,72
C,40
Message 03 (optional)

Iterate naturally

Change anything. Move things around. Drop sections. The agent maintains state across turns — you don't have to re-state which doc you mean.

Make the chart use percentages. Add a footer with my name and today's date.
Message 04 (optional)

See it

Ask to view it. The agent opens the rendered index.html in your browser.

Open the doc. I want to see how it looks.

This page was built by inkling

You're looking at the output of the same tool the page describes. Below is the event log this page produced as it was being built — read directly from its doc-source.json. This is the meta-computational pillar in action.

Reveal the event log
(loading…)