How well does it score?

88% average fidelity over 4 recorded runs. Best model: Claude 4.6 Sonnet. Weakest recorded run: 87% on Codex.

Are failures included?

No build failures are recorded for this prompt, and the log says so rather than implying every model succeeded elsewhere.

Concept render — composed live from this prompt's palette & layout. Reproducible with the library, not a stock screenshot.

Concept scene: Aurora Veil — open in library →

SaaSBetaby Motif Studiopublished 2026-09-12

Onboarding checklist with progress ring and strike-through cards

Q: What does the Onboarding checklist with progress ring and strike-through cards prompt produce?

A saas website with Welcome header, Progress ring, Task cards, Skip logic, Support line. The vibe target is "welcoming, ordered, encouraging" and the prompt body is printed in full on the page.

vibe: welcoming, ordered, encouraging

intermediate — 5 blocks, 2 stacksany viewport≈ 100 lines generated (estimate)≈ 800 tokens to run (estimate)

prompt.txt — copy-paste ready

An onboarding checklist that finishes with people.
• Welcoming palette: white, warm ink, one green for completion only.
• Welcome header: the user's name, one sentence of what the five tasks unlock.
• Progress ring: completed/total as both ring and text; the count is announced when it changes.
• Task cards: five cards — icon, title, one-line why, estimated time, action button; completed cards strike through and sink; 'skip for now' on every card with the skipped state visible.
• Skip logic: skipped tasks return at the end as 'left for later', never disappear the debt.
• Support line: a human-sounding help invitation at the bottom ('reply to any email and a person reads it').
• State persists per session; the demo notes it's local. Reduced motion: the strike-through is instant.• Craft floor: all colours flow through CSS-variable tokens.

Palette tokens:#FFFFFF#253530#3F7A4E#8B8F85#F2F5F1

revised 2026-09-12 — Bank-3 batch 3: palette tokens, component links, viewport and the retry guard added under items #52/#55/#57/#74.

Remix this brief:

— Lighter: same brief on a white ground with one accent kept.
— Denser: halve the whitespace and add a second content column.
— Playful: keep the structure, swap the display face and let one section animate on view.

Stacks shipped:Next.jsReactBlocks:Welcome headerProgress ringTask cardsSkip logicSupport line

Components this brief typically renders:

Checkbox Cards →Upload Progress Ring →Empty-state Trio →

Community:▶ Re-run this prompt ⤴ Submit a remix of it ★ Your saved listRe-runs are a labelled simulation; the run log on this page is the real record.

⚠ Before you run it, know this