How well does it score?

86% average fidelity over 4 recorded runs. Best model: Claude 4.6 Sonnet. Weakest recorded run: 85% 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: Morph Blob — open in library →

EducationBetaby Motif Studiopublished 2026-09-12

Course membership dashboard with streak and certificate cards

Q: What does the Course membership dashboard with streak and certificate cards prompt produce?

A education website with Continue rail, Progress rings, Streak counter, Certificate card, Sidebar. The vibe target is "focused, warm-dark, motivating-but-calm" and the prompt body is printed in full on the page.

vibe: focused, warm-dark, motivating-but-calm

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

prompt.txt — copy-paste ready

A dashboard that gets the learner back in five seconds.
• Warm-dark palette: #171412 canvas, cream text, amber progress accents; lesson thumbnails carry the colour.
• Continue rail: the in-progress course first, with 'resume at lesson 7' — the resume point is data, not a guess.
• Progress rings: per-course percent complete; the number is text beside the ring, not only inside it.
• Streak counter: weeks, not guilt-drips; missed weeks render honestly.
• Certificate card: completed courses show a certificate card with issue date and download placeholder.
• Sidebar: nav with the course list; current item indicated by rule + weight, not colour alone.
• Everything states its data source; the demo notes its data is fixture-based.• Craft floor: Reduced motion is honoured with a static branch; all colours flow through CSS-variable tokens.

Palette tokens:#171412#F5EFE4#E8A13C#8A7B66#241F1A

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:Continue railProgress ringsStreak counterCertificate cardSidebar

Components this brief typically renders:

Upload Progress Ring →Skeleton Profile Card →Back-to-top Comet →

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