Compare designs for a document
Use Artifact Explore to compare layouts, colors, typography, or themes. Start with source material or an existing HTML file:
Use visualize to explore three artifact directions for ./report.html.
Keep our content, facts, assets, and actions fixed. Compare the reading structure
and visual treatment; keep our logo and approved primary color.
You can also ask “show three layouts for this report” or use visualize explore artifact <topic-or-path>.
If you already know which reference to use, apply a theme directly.
Start from your content
You do not need an existing layout or DESIGN.md. The agent reads available project guidance and proposes a structure from your content. For a color or typography comparison, it can keep the layout fixed.
If the project has no usable design guidance, the agent can propose styling for this document. That does not create a project design system. Use teach to record design guidance for future work.
Set what can change
Facts, quotations, citations, actions, required states, accessibility, and factual assets stay fixed. The project's styling applies unless its guidance permits variation or you approve an exception for this document.
Name the choices to compare. For example, a layout comparison might vary reading order and grouping. A style comparison might vary colors and typography while keeping the layout.
For existing HTML, the agent identifies behavior that must survive. If the comparison cannot safely preserve it, the agent explains the limitation before proceeding.
Approve the brief
Before creating directions, the agent asks you to approve a brief covering:
- The reader, purpose, and source material.
- Content, assets, behavior, and design choices to preserve.
- Choices to compare and any exceptions to project guidance.
- Output file, number of directions, screen widths, and imagery needs.
The default is about three directions. If you already supplied an approved brief, the agent can proceed. A specific follow-up authorizes the changes it names without repeating the initial approval.
The original document and project design files stay unchanged during exploration.
Compare color and typography
Name what should stay and what should change:
Keep the Coral primary, layout, content, and Georgia typography.
Compare our current blue secondary with a lower-chroma version and with the
same blue covering less space. Keep an unchanged baseline for comparison.
“Quieter” might mean less saturated color, less contrast, or less colored area. “Opposite” might mean a complementary hue, warm versus cool, or light versus dark. Specify which you mean if it matters to the result.
Keep colors that identify your brand or distinguish chart categories. Text must remain readable against its background, and labels or other cues must carry any meaning that color conveys.
For typography, compare font families, size, weight, or hierarchy on the document's actual content. Keep other settled choices fixed.
Review at desktop and phone widths
Explore creates one self-contained HTML comparison. Switch between directions and Wide or Phone widths, copy a direct review URL, or reset the view. Each direction uses its full height; the page scrolls normally. Without JavaScript, every labeled direction remains readable.
The agent checks each direction at wide and 390 px in light and dark, with system preferences and explicit theme settings. It checks preserved content and behavior, approved constraints, differences between directions, console errors, and overflow.
Choose and apply a direction
The agent explains each direction and its trade-offs, then waits. Choose one, shortlist several, reject all, or ask to combine selected ideas into another comparison.
To change the document, select a direction and ask to apply it. The agent rereads the original file and project guidance, applies the chosen layout or style, and checks the result. The final document excludes comparison controls and unused directions.
Liking one trait does not approve the whole direction. Artifact Explore does not create or replace a project design system.
Compare project design systems
Ask for visualize explore system <topic-or-path> to compare designs for the whole project. If the project already has a consistent design, use teach to record it. The agent explores a replacement only when you ask.
System Explore preserves product facts, audience, voice, content, actions, and required states. It compares complete designs on representative content at desktop and phone widths, in light and dark. You can then narrow the comparison to a choice such as secondary colors or typography.
The comparison does not change project files. After you select a complete direction, the agent presents full DESIGN.md, PRODUCT.md, and tokens.css drafts. It asks for separate approval before writing them and backs up existing files before replacement.
Include generated imagery
Factual assets stay fixed. Generated imagery can vary only when the approved brief allows it. The agent uses a supported generation method and visually inspects images before including them. See image generation and supported hosts.