---
prompt-id: "21"
name: Rendered UI mockup via Artifacts
status: live
mcp: none
model: Sonnet 4.6 (Opus 4.7 for complex multi-section layouts)
environment: claude.ai with Artifacts enabled
inputs:
  - Component or screen description
  - governance.spec.md + [archetype].spec.md (or loaded in Project)
  - tokens.css (or loaded in Project)
outputs:
  - A complete, self-contained HTML file rendered as an Artifact in claude.ai
  - All values via CSS custom properties — no raw hex
chains: []
prereqs: []
documented-in: Ch17 — Claude Design
---

# Prompt 21 — Rendered UI Mockup via Artifacts

Generates a complete, self-contained HTML file that renders as a live Artifact in the claude.ai interface. Replaces the old "Claude outputs HTML/CSS, you copy it to a local environment, run a server, screenshot" loop with a single in-conversation experience: describe → render → screenshot → import to Figma as a reference.

## When to use

Workflow A first mile (Path A · Greenfield). When you have a description but no Figma frame, and want a rendered visual to anchor design discussion or to import to Figma as a starting reference. Run iteratively — each iteration is a new Artifact in the same conversation.

## Output shape

A single HTML file with everything inlined: tokens at the top in `:root`, component markup below, all states (default/hover/focus/disabled) visible adjacent in the layout via variant clones (no JS toggle). Renders directly in claude.ai's Artifact panel.

## Chain memberships

- None. Standalone exploratory tool. Outputs may feed into Chain 3 (component generation) once the design direction is locked.

## Prompt body

```
RENDERED MOCKUP — Artifact output

[If not in a Project: paste governance.spec.md and
[archetype].spec.md here before this prompt.]

Component / screen to generate:
  [describe the component or screen]

Requirements:
  - Output as a complete, self-contained HTML file
  - Use only CSS custom properties defined in the loaded
    tokens.css (or pasted :root block)
  - No raw hex, no magic numbers in CSS — all values via var(--token)
  - Dark mode by default (if archetype is dark-first)
  - Include all interactive states visible at once
    (default, hover, focus, disabled) using adjacent variants
    in the layout — not JS toggle

Archetype constraints to enforce:
  - Spacing: [archetype]'s spacing base (2px | 4px | 8px)
  - Radii: [archetype]'s radius set (do not use pill if Lattice)
  - Typography: [archetype]'s type scale (fixed px if Lattice/Sentinel)
  - Motion: [archetype]'s duration tokens (instant if Lattice)

Output the HTML as an Artifact so it renders in the preview panel.

META-FOOTER (chain runner)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
USE IN
  claude.ai with Artifacts enabled.
  Sonnet 4.6 recommended for speed; Opus 4.7 for complex
  multi-section layouts.

ARTIFACT → FIGMA HANDOFF (manual procedure, no AI)
  1. View the Artifact in full-screen mode
  2. Screenshot at 2× resolution
  3. Import to Figma as a locked reference frame
  4. Build the Figma component using archetype tokens, with
     the screenshot as the visual target
  The Artifact is a reference, not a source of truth — the Figma
  component built against it is what engineers consume.

VERIFY
  All values reference tokens (search the Artifact source for
  raw hex — should be empty inside the component CSS).

HANDOFF
  "Mockup rendered. Iterate via conversation in this session
  for additional variants. When direction is locked: screenshot
  at 2× and import to Figma. Then continue with Chain 3
  (component generation) for production code."
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```