ScoreApp — Scorecard Quiz

Assessment-style quiz funnel: 'AI scorecards that qualify every lead,' an avatar social-proof pill, and a blue CTA into a scored, personalized result.

Source capture · 2026-09-05Open full image ↗

Forms & onboarding

Design notes

Mood

Credible, B2B-leaning, results-driven. A quiz that scores and qualifies the lead — diagnostic authority rather than playful personality.

Colors

White base, dark near-black headline type, a bright confident blue for CTAs and the score UI, gray body. Clean and trustworthy.

Type

Big bold black sans headline, readable gray subhead promising the payoff ('reveal who's ready to buy'), sans throughout, large tabular numerals for scores.

Layout

FLOW-FIRST scorecard funnel: social-proof avatar pill → headline → blue Start CTA ('Start for free, no credit card') → assessment questions (scales, sliders, multiple choice, progress bar) → email/contact capture → SCORED RESULT page (overall score gauge, category breakdown bars, personalized recommendations, book-a-call CTA). Homepage centers pill + headline + subhead + CTA.

Motion

Score gauge animates to its value, category bars fill, smooth question transitions, progress bar, subtle CTA hover.

Texture

Bright, clean, lightly shadowed cards; the score gauge and bars are the visual centerpiece; airy spacing.

Imagery

Generate: a scorecard result mockup (a score gauge/percentage ring, category bars, personalized recommendations), a social-proof avatar pill ('151k+ users'), and clean assessment question cards with sliders/scales. Tool: build the gauge + bars in code; GPT-Image for the result-report mockup; Pexels/Flux for the small avatar faces.

Don't

No dark theme, no playful cartoon tone, no clutter, no more than one accent. Don't hide the score behind vague fluff — the diagnostic payoff must feel concrete.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withAny AI toolCodexClaudeCursorChatGPTGeminiv0 / LovableI want toBuild a screenAudit my UIWrite a design brief

Tech stackUse the existing project stackReact / Next.jsAstroVue / NuxtSvelte / SvelteKitHTML / CSS / JavaScriptSwiftUIFlutter

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text# My project [Describe the product, audience, and screen you want to improve] Stack: Use the existing project stack Task: Implement the interface and verify the result in the existing project. ## Tool guidance (Any AI tool) Use available project tools to inspect, implement, and test. State any unavailable capabilities. # Design reference: ScoreApp — Scorecard Quiz Source: https://www.scoreapp.com Swipefile reference: https://swipefile.design/ref/scoreapp-scorecard/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## Objective Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets. ## Reference notes - mood: Credible, B2B-leaning, results-driven. A quiz that scores and qualifies the lead — diagnostic authority rather than playful personality. - colors: White base, dark near-black headline type, a bright confident blue for CTAs and the score UI, gray body. Clean and trustworthy. - typography: Big bold black sans headline, readable gray subhead promising the payoff ('reveal who's ready to buy'), sans throughout, large tabular numerals for scores. - layout: FLOW-FIRST scorecard funnel: social-proof avatar pill → headline → blue Start CTA ('Start for free, no credit card') → assessment questions (scales, sliders, multiple choice, progress bar) → email/contact capture → SCORED RESULT page (overall score gauge, category breakdown bars, personalized recommendations, book-a-call CTA). Homepage centers pill + headline + subhead + CTA. - motion: Score gauge animates to its value, category bars fill, smooth question transitions, progress bar, subtle CTA hover. - texture: Bright, clean, lightly shadowed cards; the score gauge and bars are the visual centerpiece; airy spacing. - dont: No dark theme, no playful cartoon tone, no clutter, no more than one accent. Don't hide the score behind vague fluff — the diagnostic payoff must feel concrete. ## Acceptance criteria - Existing project conventions, design tokens, working functionality, and unrelated changes are preserved. - Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product. - Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap. - Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled. - Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported. - Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service. ## Quality bar Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Copy promptDownload .md

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.