04 · The workspace, step by step
The window itself is simple — progress on the left, preview on the right, type selector up top. What's worth understanding is the shape of the pipeline: which steps wait on you, which wait on the agent, and which one you'll pay double for skipping.
One pipeline
The site describes it in four beats: choose a starting point, set the visual direction, generate the artifact, deliver or make a video. In practice that's six steps:
| Step | Who moves | What you owe it |
|---|---|---|
| 1 · Pick a type | You | Web page, prototype, deck, dashboard, image, or video |
| 2 · Pick a design system | You | A direction. Palette, type, and spacing lock here. |
| 3 · Write the prompt | You | One clear line about the goal |
| 4 · Answer the form | You | The generated questionnaire — ratio, audience, length, tone |
| 5 · Generate | The agent | — |
| 6 · Fix and export | You | Comments, marks, direct edits, then export |
Steps 2 and 4 are the ones people skim, and they're the answer to "why does this look so generic".
Artifact types
The entry points, roughly (names drift a little between versions, and desktop and web don't match exactly):
| Entry | Output | Typical use |
|---|---|---|
| Prototype | Single-file HTML interface | Landing pages, SaaS screens, mobile screens |
| Slideshow | HTML deck | Talks, reviews, proposals. The PPT tutorial calls it Deck Mode. |
| Dashboard | Charted control surface | Data panels, admin consoles |
| Image | Bitmap | Posters, covers, icons, avatars. The tutorial calls it Image Mode. |
| Video | Motion and video | Product shorts, data animation, via hyperframes |
| Design System | A DESIGN.md | Reverse-extract a brand from a screenshot or Figma |
Deck Mode and Slideshow are the same thing
The official PPT tutorial writes "Image Mode" and "Deck Mode"; the buttons say "Image" and "Slideshow". One produces a single image, the other an editable HTML deck. Both namings appear in this book because you'll meet both.
Left pane, right pane
Once generation starts the window splits:
- Left is process. What the agent is reading, which file it's writing, how far along. Worth watching the first time — you can see what it understood your prompt to mean.
- Right is result. A live preview in a sandbox. The artifact is real runnable files, not a screenshot, so what's on the right is the finished form.
Where artifacts land
In your project directory. Worth stating once plainly, because it decides everything about how you collaborate afterwards:
- Git manages it. You can diff it and revert it.
- Engineering can pick it up directly — no export-and-rebuild step.
- It isn't in anyone's database.
Three ways to refine
After generation there are three ways to change something, each with its own occasion. Step 9 of the deck workshop covers them properly; here's the shape:
| Tool | When | Example |
|---|---|---|
| Comment | The problem is attached to a specific element | This logo is too big; this label needs rewording |
| Mark | The problem is a visual region, easier to show than say | This group sits too high; this should align with the title |
| Edit | You already know the exact change | One word, one type size |
The rule: don't regenerate what Edit can fix, and don't describe in prose what you can circle. Regenerating a whole page is the most expensive edit — save it for directional problems.
The button people miss
Next to the generation controls there's usually Critique — a five-dimension self-review of the artifact (philosophy, visual hierarchy, detail, function, innovation), each scored 0–10, producing an evidence-backed report split into Keep / Fix / Quick wins.
Running it after a first version beats staring at the thing yourself. See Go deeper / Anti-slop.
Next
05 · The discovery form — why the questionnaire before generation is the most important step in the pipeline.