Prototyping with Artifacts

What is an artifact?

An artifact is an interactive render the AI generates and displays alongside the conversation: a complete HTML/CSS page, a React component, an SVG — that actually runs in a dedicated panel. You don't read code while imagining the result: you see the result, you click around in it, you test the hovers. And when you request an adjustment, the artifact updates before your eyes.

Measure the change versus the classic flow: Figma mockup, export, integration, deployment to a preview environment, client feedback three days later… Each feedback loop cost hours. With an artifact, the loop lasts thirty seconds. It's not just "faster": it's a change in nature. When iterating costs nothing, you explore ten directions instead of defending the only one you had time to produce.

For Studio Mango, it's the weapon of the day: instead of presenting three static boards to the client tomorrow morning, you'll show them a living page — one that scrolls, reacts to hovers, and can be viewed on their phone. The difference in perception is enormous: an interactive prototype triggers concrete feedback ("that button, there, I'd see it higher up"), not abstract debates about intentions.

Why the short loop changes how you design

The artifact loop always follows the same cycle: you write a prompt, the render appears, you observe, you formulate precise feedback, the render updates. Repeat. This ultra-short cycle has a precious psychological effect: it takes the drama out of mistakes. A bad idea costs thirty seconds, so you dare to test it. How many good ideas have died in meetings because there was "no time to mock that up"?

flowchart LR
  P["Prompt"] --> R["Render in the artifact"]
  R --> F["Precise feedback"]
  F --> M["Live update"]
  M --> R

Watch out for the flip side, though: the ease of iterating can produce wandering. Twenty iterations with no heading, and you end up further from the goal than when you started, unable to say when it went off the rails. The remedy: keep your art direction brief in view, and before each modification request, check that it serves the brief. Iterate fast, yes — drift, no.

Preparing the ground: the opening prompt

The quality of your prototyping session is decided in the first prompt. Three ingredients must be in it: your design system (the :root block from the previous chapter, pasted in full), the expected structure (the list of sections in order), and the mood brief with its don'ts. Without the tokens, the AI improvises colors; without structure, it invents sections; without don'ts, it falls back into the generic.

Create the Sereno landing page (meditation app) as a single self-contained HTML/CSS page.

DESIGN SYSTEM (use exclusively — no hard-coded values):
[paste your full :root block here]

STRUCTURE:
1. Header: text logo + "Log in" link
2. Hero: strong headline, subtitle, primary CTA "Try for free", calming abstract visual in pure CSS (no external image)
3. Three benefits as cards: Sleep better, Manage stress, Focus
4. Testimonial: quote + first name + occupation
5. Simple pricing: free vs premium tier
6. Understated footer

MOOD: minimal, generous with space (sections spaced by var(--space-24)), gentle animations on hover only.
DON'TS: garish gradients, emojis, heavy shadows, more than one accent color.

Iterating in small touches

First render obtained: it's decent, not extraordinary. That's normal — the first draft is a foundation, not a finished product. The discipline that follows makes all the difference: one iteration = one intention. "Round the card corners more", then observe. "More air between the hero and the benefits", then observe. "The CTA must dominate the hero", then observe.

Why this apparent slowness? Because if you request five changes at once and the render degrades, you don't know which one is to blame. Change by change, you see precisely the effect of each decision — and you learn along the way: you discover empirically what 16px of extra space does to a section. It's the same principle as debugging in programming: you isolate the variables.

Concretely, an effective session looks like this: three or four iterations on structure (section order, hero proportions, card density), then three or four iterations on style (fine spacing, heading sizes, shadow intensity), and finally a details pass (hover transitions, alignments, icon consistency). Structure first, style next, details last — never the reverse, otherwise you're polishing sections that will be deleted.

The vocabulary of visual feedback

Your iterations will only be as good as your phrasing. Here are the patterns that work: name the zone ("in the benefits section…"), name the problem in design vocabulary ("…the three cards are almost touching, the rhythm feels suffocated…"), and give the direction ("…space them by var(--space-8) and reduce their internal padding one step"). Zone, problem, direction: three beats, ten seconds to write, and the AI fixes exactly what's needed.

• Hierarchy: "the headline and the subtitle have almost the same presence; strengthen the headline (size +1 step, weight 600) and soften the subtitle (--color-text-muted)"
• Rhythm: "the spacing between sections varies; standardize to var(--space-24) everywhere"
• Accent: "the accent color appears in six places; reserve it for the primary CTA and links"
• Density: "the pricing section is cramped; double the cards' internal padding and air out the feature lists"

Artifacts, v0, Figma AI: which tool for what?

Artifacts aren't the only way to prototype with AI, and it's useful to map the ecosystem. Each tool has its zone of excellence; the choice depends on your deliverable and your starting point. For Studio Mango's challenge — exploring, iterating in conversation and delivering a living page in a few hours — artifacts are the natural tool. If the project required production-ready React in a Next.js stack, v0 would take the lead; if the team already worked in Figma mockups with handoff to integrators, Figma AI would be the obvious choice.

From rough draft to presentable

In about ten disciplined iterations, you go from a decent skeleton to a page you can project in a client meeting. Before stopping, run the verification pass: test the mobile render (half of Sereno's visitors will come from a phone — explicitly ask "show me the render at 375px wide" and check that the hero doesn't collapse), hover over every interactive element, and reread the copy, because the AI sometimes slips in approximate filler content.

One last professional reflex: archive the stages. Copy the code of the key versions (V1 raw, V2 structured, V3 final) into dated files. If the client ultimately prefers the V2 direction, you bring it back in a minute. And by presenting the V1 → V3 progression, you show the studio's reasoning — which is often worth more than the final render itself.