07 · Ship your first artifact

The chapters so far were the how-it-works. This one is a single run, about twenty minutes, ending with something you can open in a browser, export, and keep editing.

We'll build a landing page. It's a single file, it's obvious when it's wrong, and it needs no assets.

Before you start

• OpenDesign installed (02)
• An agent connected and visible in the UI (03)
• A clear idea of what this page sells and to whom — this matters more than anything else here

Step 1 · Pick a type and a system

Create a new artifact and choose Prototype.

Don't skip the design system. Pick one from the library that's close to the register you want: grid-based and restrained for developer tooling, high-contrast and expressive for consumer products.

Step 2 · Write the prompt

Not "make a nice landing page". Say three things: what it sells, to whom, and what you want them to do.

A landing page for a meeting-notes tool aimed at small teams.

Audience: whoever organises meetings on a team of 5 to 20. Today they
either write up notes themselves afterwards, or don't bother.

The page has to convince them this can happen automatically, and that
the recording never leaves their control.

Structure:
1. Hero — one-line value proposition and a single primary action
2. Three core capabilities, one sentence each
3. A section on how the data is handled (local, never uploaded, deletable)
4. Three pricing tiers
5. Four FAQ entries
6. Closing call to action

The primary action is "Start a 14-day trial". Restrained tone —
not a launch keynote.

What makes this prompt work isn't its length. It's that every line answers something the tool couldn't have guessed.

Step 3 · Answer the discovery form

Fill it the way 05 describes: audience as state rather than title, tone with a reference object, and an explicit line about which numbers are real.

If pricing isn't decided yet, say "prices are illustrative, label them". It will do exactly that instead of inventing three convincing-looking numbers.

Step 4 · Generate, and watch the left pane

Watch it once, on the first run. You'll see which context it read, which craft rules it loaded, which files it wrote. You won't need to watch again, but that first pass calibrates you on what it understood.

Step 5 · Review before you change anything

Don't open with "make it nicer". Run the checklist:

• [ ] Can someone who's never heard of the product understand the hero line?
• [ ] Is the primary action singular and obvious?
• [ ] Do the three capabilities say something, or are they three nouns?
• [ ] Are the pricing numbers real, or labelled as illustrative?
• [ ] Any horizontal scrolling at phone width?
• [ ] Do buttons have hover and disabled states?
• [ ] Any purple gradients, generic icons, or an invented "10,000+ users"?

That last line is the standard slop inventory. If it's there, name it and have it removed.

Step 6 · Fix

Three ways, cheapest first:

1. Edit — one word, one type size, directly in the preview.
2. Comment / Mark — the problem belongs to an element or a region; attach it there.
3. Talk to the agent — reserved for directional problems.

A directional note looks like this:

Section 3 (data handling) currently reads like legal boilerplate, but it's
the strongest selling point on the page. Move it above the three
capabilities, rewrite it as one plain sentence plus three concrete
practices, and give it the same visual weight as the hero.

Step 7 · Export

For	Export as
Reading it, sending it to a colleague	HTML with inline assets — one file
Handing it to engineering	Nothing; use the source in your repo
Archiving or approvals	PDF

The artifact was already in your project directory. Git manages it, diffs it, reverts it.

After the run

You've been through one complete loop. Two directions from here:

• Making a deck: go to the deck workshop, ten steps, the spine of this book.
• Making this repeatable: go to Go deeper / Skills and write what you just did into a SKILL.md.

The first thing you make won't be good

That's expected. The official tutorial says it plainly: treat the first version as a working draft, not a result. The gap is closed by the comparison and refinement afterwards, not by writing a more beautiful first prompt.