Artifact Studio example
What John can show you
A single page can explain code, trace a system, show a database shape, compare options, graph evidence, and leave you with a copyable next prompt.
Annotated code walkthrough
Like the Claude example: code on one side, explanation on the other. Click a line to see why it matters.
01export async function publishArtifact(artifact) {02 await assertPublicSafe(artifact.files)03 await writeStaticPage(artifact.path)04 await updateManifest(artifact.id)05 const url = await deployWithWrangler()06 await verifyPublicUrl(url)07 return { url, status: 'verified' }08}
System diagram with inspector
Instead of dumping architecture notes into chat, the artifact can show the runtime path. Click a component to inspect its role.
Graph or dashboard slice
For evidence-heavy work, I can show the few signals that matter instead of forcing you to read a report.
Database relationships
For schemas, I can show tables as business objects, not only SQL. Click a table to highlight what it owns.
Artifact stores the public page and identity. It is the object Stephane reviews.
Options, tradeoffs, and snippets
Artifacts can compare paths side by side, then include copyable code or prompts so a decision can move back into the conversation.
Chat answer
Fast, but structure is hidden in paragraphs. Good for simple explanations.
Static diagram
Clear visually, but hard to iterate or inspect. Good for a single idea.
Artifact page
Best for review, because code, diagrams, notes, and decisions can live together.
create table artifact_iterations (
id uuid primary key,
artifact_id uuid references artifacts(id),
request text not null,
summary text not null,
verified boolean default false,
created_at timestamptz default now()
);
John, update the artifact so the database section explains
which table owns the source of truth, which joins are risky,
and which fields a non-dev should care about.
This is the kind of page I can generate when you say: “make me an artifact that explains this system.”
Timeline or investigation log
For long work, the page can become a calm status surface: what happened, what was verified, and what needs attention.
Source read
Files, logs, schemas, screenshots, or conversation context are inspected before the artifact makes claims.
Shape chosen
John decides whether the artifact needs code annotations, a system map, database cards, data charts, or all of them.
Public review
The artifact is deployed, verified, and opened as the thing we iterate on together.