Element Prototype — This page shows every available element type. The purple LABELS are prototype annotations only — they won't appear in real sound bites.
Header Variations
Compare these options — pick one for production sound bites.
STYLE A — Icon + product name (current)
AI Sound Bites
#001
STYLE B — Full logo with "People-First Business A.I."
#001
AI Sound Bites
STYLE C — Full logo + product name on same line
|AI Sound Bites
#001
STYLE D — Stacked: company above, product below
CHaiMPION
AI Sound Bites
#001
STYLE E — Minimal text only
CHaiMPION/AI Sound Bites
#001
Typography + Section Numbering
Numbers are subtle grey, monospace. Click any number to get an anchor link (e.g. #s2.0). Say "look at 3.1" in conversation.
Subtitle: A one-line summary that hooks the reader and previews the content below.
Body text with bold emphasis and italic for nuance. Links look like this. Body text should be comfortable to read on mobile and desktop — not too wide, not too dense.
What it does: Side-by-side (stacked) before/after comparison. Red-tinted "bad" example followed by green-tinted "good" example.
Use when
Showing the difference a good prompt makes. The visual contrast (red vs green) is instant — the reader gets the point before reading the text.
Not ideal when
Both examples are valid alternatives (use a comparison table instead). Or when you have 3+ examples — stick to one bad/good pair for clarity.
.example-bad = red tint, .example-good = green tint
Labels are customisable: "Before/After", "Weak/Strong", "Generic/Specific"
What it does: Standard numbered list. Numbers imply sequence — do these in order.
Use when
Steps must be followed in order. Instructions, processes, ranked items.
Not ideal when
Items are unordered tips or attributes (use bullet list). Or for long multi-step processes (use Kaleidoscope carousel with visual steps).
What it does: Clickable thumbnail grid that opens a fullscreen lightbox with prev/next navigation.
Use when
Showing multiple screenshots, before/after comparisons, UI flows, or any set of related images. Grid shows everything at once for browsing.
Not ideal when
Images need to be viewed in sequence with narration (use Kaleidoscope carousel). Or when there's only 1-2 images (just stack them inline).
vs Kaleidoscope: Grid = browse freely. Kaleidoscope = guided narrative. Both open into the same fullscreen lightbox.
What it does: Click-through carousel with crossfade transitions. Shows one image at a time with dot navigation and counter pill.
Use when
Step-by-step tutorials, before/after sequences, guided walkthroughs where order matters. Best with 3-7 slides.
Not ideal when
User needs to compare images side-by-side (use grid instead). Or when there are 2 or fewer images (just stack them).
vs Image Grid: Grid shows everything at once — good for browsing. Kaleidoscope controls the narrative — good for teaching. Both open into the same fullscreen lightbox experience.
Images should be same aspect ratio (16:9 recommended)
First slide should be the hook — make it count
Dots + counter provide orientation ("where am I?")
What it does: Embedded YouTube playlist with built-in prev/next controls and playlist panel. Plays inline.
Use when
You have a curated series of videos the reader should watch in order. Playlist embed keeps them on-page with YouTube's own navigation.
Not ideal when
Videos are unrelated picks (use Video Grid cards instead). Or when you want custom thumbnails/titles (YouTube controls the look inside the player).
What it does: Single YouTube video embed. Plays inline with YouTube's native controls.
Use when
Featuring one specific video — a keynote clip, tutorial, or interview. The reader watches it right there without leaving.
Not ideal when
You have multiple videos to showcase (use playlist embed or video grid). Or when the video is long >20min and you just need one clip (add ?start=120 to timestamp).
URL: youtube.com/embed/{VIDEO_ID}
Add ?start=N (seconds) to start at a specific timestamp
Same .video-block / .video-wrapper as all video embeds
What it does: 2-column grid of video thumbnail cards. Each card opens the video in YouTube (new tab).
Use when
Curating 2-4 related videos with full titles and metadata. Good for "recommended watching" sections. Cards open in YouTube rather than playing inline.
Not ideal when
You want the video to play on the page (use inline embed 7.0/7.1). Or when you have 4+ videos and want compact layout (use 4-wide grid 7.3).
What it does: Embedded Loom video with the same 16:9 responsive wrapper as YouTube. Plays inline with Loom's native controls.
Use when
Sharing screen recordings, walkthroughs, async video explanations. Loom is ideal for "watch me do it" content where narration + screen matters.
Not ideal when
Video is public/polished content (use YouTube). Or when the video is audio-only (consider a transcript or summary instead).
Embed URL: loom.com/embed/{ID} — ID from the share link
Uses same .video-block / .video-wrapper as YouTube
"Open in Loom" link for viewers who prefer the Loom player
Loom embeds include viewer analytics (who watched, how far)
What it does: Read-only Google Sheets embed. Scrollable within the iframe. Shows real data with formatting intact.
Use when
Showing data tables, survey results, AI-generated analysis, or any structured data that lives in Google Sheets. Great for "here's the output" evidence.
Not ideal when
Data is simple enough for an HTML table (section 5.0). Or when you need the reader to edit — Sheets embeds are read-only.
Requires: File > Share > Publish to web first
Use the /e/2PACX-... published URL, not the edit URL
Aspect ratio: 60% padding-bottom (shorter than 16:9 video)
widget=true&headers=false gives a clean, minimal view
What it does: Embedded Google Slides presentation with native slide navigation. Viewers can click through slides inline.
Use when
Sharing slide decks, visual frameworks, quote collections, or any presentation content. Especially good for "speed of change" evidence — CEO quotes, market data.
Not ideal when
Slides have complex animations (they won't render in embed). Or when you need just one key slide — screenshot it and use an image block instead.
Publish to web first: File > Share > Publish to web > Embed
start=false — don't autoplay on load
loop=false — stop at last slide
delayms=3000 — 3s per slide if autoplay is on
Aspect ratio ~59.5% (16:10 landscape, slightly wider than video)
What it does: Embedded Excalidraw whiteboard. The share link doubles as the embed src — no special embed URL needed.
Use when
Sharing hand-drawn diagrams, architecture sketches, quick wireframes. Excalidraw's sketch style feels informal and approachable — great for workshop-style content.
Not ideal when
Diagram needs precise, polished look (use FigJam or a static image). Or when the drawing has many small labels that won't be readable at embed scale.
Share link = embed src (read-only by default)
For collaborative: excalidraw.com/#room= (live editing)
Self-hosted: export .excalidraw JSON + render with npm package
What it does: Published Google Doc embedded inline. Scrollable within the iframe, preserves Doc formatting.
Use when
Sharing longer-form documents, reports, or guides that live in Google Docs. Good for "reference material" sections where the reader may want to scroll through.
Not ideal when
Document content is short enough to include directly in HTML. Or when formatting matters critically — Docs embed rendering can differ from native view.
Paste this prompt into any AI tool. It works standalone — no setup needed.
› View & Copy Prompt
I'm going to describe my role in one sentence. Based on that, I want you to:
1. Tell me the 3 most valuable things AI could do for someone in my position RIGHT NOW (not future hype — things that work today)
2. For each one, name a specific free tool I can try in the next 10 minutes
3. Give me the exact first step for each — what to click, what to type
My role: [DESCRIBE YOUR JOB IN ONE SENTENCE]
Keep it practical. I have 15 minutes and zero technical background.Copied!
<div class="prompt-toggle" onclick="togglePrompt(this)">
<span><span class="arrow">›</span>
View & Copy Prompt</span>
<button class="copy-btn"
onclick="event.stopPropagation(); copyPrompt(this)">
<svg>...</svg>
</button>
</div>
<div class="prompt-content" id="prompt-1">
Your prompt text here...
<span class="copied-msg" id="copied-1">Copied!</span>
</div>
What it does: Expandable prompt block with one-click copy. Starts collapsed to save space — expands on click to reveal the full prompt text.
Use when
Sharing a ready-to-paste prompt that works in any AI tool. The core deliverable of most Sound Bites. Should appear near the end, after the context that explains why the prompt matters.
Not ideal when
Showing code examples (use code blocks instead). Or when the prompt needs customisation per-platform — pair with Smart Formula buttons (10.0) for that.
Keep prompts under ~200 words for mobile readability
Use [PLACEHOLDERS] in uppercase brackets for user-fill fields
Copy button appears on the toggle bar — always visible
"Copied!" confirmation fades in/out automatically
Pairs with section 10.0 (Smart Formula buttons) to open the prompt in specific AI tools
What it does: One-click buttons that open a specific AI tool with the prompt pre-filled. The "smart formula" — a URL template with variable substitution — is the core CHaiMPION product capability.
Use when
You have a prompt block (9.0) and want to reduce friction to zero. The reader clicks one button and lands in their preferred AI tool with the prompt already loaded. Always pair with a prompt block above.
Not ideal when
The prompt needs heavy customisation before use (placeholders that can't have defaults). Or when the Sound Bite is about comparing tools — then the prompt block alone is better.
URL patterns (smart formulas):
Claude:claude.ai/new?q={ENCODED}
ChatGPT:chatgpt.com/?q={ENCODED}
Perplexity:perplexity.ai/?q={ENCODED}
Gemini:gemini.google.com/app?q={ENCODED}
Buttons should match the prompt block directly above
SVG icons are monochrome (#888) — not brand colours — for consistency
All links open in new tab (target="_blank")
URL encoding happens in JS at page load — prompt text stays human-readable in HTML
Start with whichever you have access to. Claude is great for long documents and analysis. ChatGPT is the most well-known and versatile. Perplexity is best when you need sources and citations. They all work for the prompts in this sound bite.
Do I need a paid subscription?›
No. All three tools have free tiers that work for these prompts. Paid plans give you longer conversations and faster responses, but the free version is enough to see the difference a good prompt makes.
<div class="accordion">
<div class="accordion-header"
onclick="toggleAccordion(this)">
<span>Question or heading?</span>
<span class="arrow">›</span>
</div>
<div class="accordion-body">
Answer or expanded content here.
</div>
</div>
<!-- repeat for each item -->
What it does: Collapsible FAQ-style sections. Click the header to expand/collapse. Chevron rotates to indicate state.
Use when
FAQs, objection handling, supplementary details the reader might not need. Great for keeping the page scannable while offering depth on demand.
Not ideal when
Content is essential (don't hide critical info behind a click). Or when there's only one item — just show it inline.
Questions in header, answers in body
Multiple accordions stack — each operates independently
Keep answers concise (2-3 sentences ideal)
Place near end of Sound Bite — after the main content
Open Terminal.app and run the install command below.
Launch the new app from Spotlight — Cmd+Space, type the name.
Go to Settings → Profiles → Import and select the config file.
Open a new tab (Cmd+T) to confirm it's working.
<ol class="steps-circle">
<li>First step text here.</li>
<li>Second step with <strong>bold</strong> text.</li>
<li>Third step with <code>code</code> inline.</li>
</ol>
What it does: Numbered steps with blue circle counters (22px). Heavier visual weight than plain numbered lists — signals "do these in order."
Use when
Sequential instructions where order matters. Installation guides, setup flows, multi-step processes. The blue circles draw the eye down the page.
Not when
Items have no sequence (use bullet list). Items are optional or parallel (use got-list). More than 7 steps — break into sub-sections instead.
Variant of: Section 4.0 (Numbered List). Same content, different visual weight. Steps = "do this", List = "here are some things."
What it does: A clickable card that triggers an action — download a file, open a doc, clone a repo. Generic wrapper for any delivery mechanism.
Use when
The reader needs to get a file, open a resource, or run a command. Works for Dropbox downloads, Google Docs links, git clone, Smart Formula launches. Change the icon colour to match the source (blue = default, Google blue, GitHub dark).
Not when
Linking to reference reading (use regular link or link cards). Listing multiple resources for browsing (use resource link cards section 7.96).
Key insight: Download is a workflow, not a thing. This card is one delivery mechanism — the same content could arrive via Dropbox, Google Doc, Smart Formula, embedded preview, or git clone.
What it does: Shows who wrote the Sound Bite. Photo via Cloudinary face-crop (circular, 40px). Falls back to initials on coloured circle if no photo.
Use when
Every Sound Bite should have one. Goes in the Landing layer, right after the subtitle. The photo makes it personal — this came from a real person, not a system.
Not when
The Sound Bite is system-generated with no human author. In that case, use brand avatar or omit entirely.
Cloudinary URL pattern:w_80,h_80,c_thumb,g_face,r_max,q_auto — face detection + circular crop, on-the-fly.
Dark charcoal background with soft white text (easy on eyes)
Custom colour palette tuned for readability with Claude Code
Monaco 14pt font with slightly increased line spacing
Shell integration enabled for smart command tracking
<ul class="got-list">
<li>First outcome or deliverable</li>
<li>Second thing they now have</li>
<li>Third benefit or result</li>
</ul>
What it does: List with green checkmark prefixes. Signals "here's what you've achieved" or "here's what's included."
Use when
Summarising outcomes after a section — "what you've got." Also good for feature lists, inclusion lists, package contents. The green ticks feel rewarding.
Not when
Items are instructions (use steps). Items have no completion/outcome meaning (use bullet list). Items need numbering (use numbered list).
Variant of: Section 4.1 (Bullet List). Same structure, different prefix. Bullets = neutral list, Got-list = achievement/inclusion list.
What it does: Coloured left-border box for tips, warnings, and critical alerts. Three variants: blue (default/tip), amber (heads-up), red (danger).
Use when
Breaking the reader's flow to flag something important. Tips that save time, gotchas that prevent mistakes, warnings about destructive actions.
Not when
The insight is the main point (use takeaway with diamond icon). Long explanations (use regular paragraphs). Quoting someone (use blockquote).
Variant of: Section 3.0 (Takeaway). Takeaway = insight with diamond icon. Callout = practical tip/warning with coloured border.
What it does: Monospace tree view like tree command output. Dark background like code blocks. Folders in blue, files in green, comments in grey.
Use when
Showing project structure, file layout, or any hierarchical tree. Helps readers orient before diving into specific files. Essential for setup/onboarding Sound Bites.
Not when
Showing a single file path (use inline code). Showing command output (use terminal block). The tree is more than ~15 items — consider splitting.
New component — no existing variant. Uses same dark bg as code blocks for visual consistency.
What it does: 2-column grid of feature cards, each with a keyboard badge, title, and description. Collapses to single column on mobile.
Use when
Showcasing 2-4 key features or selling points. The "payoff" section — after the reader has done the work, show them what they gained. Keyboard badges work for shortcuts; swap for icons or emoji for non-keyboard features.
Not when
More than 4 items (becomes cluttered — use a table). Items need detailed descriptions (use regular sections). Items are video thumbnails (use video grid 7.2/7.3).
Variant of: Sections 7.2/7.3 (Video Grid). Same grid layout, different card content. Feature cards have badge + title + desc instead of video thumbs.
What it does: Table with grouped rows and monospace keyboard-style badges. Group labels (uppercase, grey) separate logical categories.
Use when
Listing keyboard shortcuts, CLI commands, or any key-value pairs that benefit from grouping. The "cheat sheet" at the end of a Sound Bite. Great for reference material.
Not when
Comparing two things side by side (use comparison table section 5.0). Data has 3+ columns (use standard table). Items need visual emphasis (use feature grid).
Variant of: Section 5.0 (Comparison Table). Same table structure, different styling. Key table has grouped rows + keyboard badges. Comparison table has header row + cell content.
<div class="email-preview">
<div class="email-preview-header">
<div class="email-preview-subject">Subject line</div>
<div class="email-preview-meta">From: Name · To: you</div>
</div>
<div class="email-preview-body">
<p>Hey {{first_name}},</p>
<p>Email body text...</p>
<a href="#" class="email-preview-cta">CTA text →</a>
</div>
</div>
What it does: Mock email showing the hook — subject, preview text, body, CTA button. A meta-component for internal planning and review.
Use when
Planning the email hook for a Sound Bite. Internal review of how the email will look before sending. Stage 0 (Email Hook) of the Sound Bite anatomy. Supports {{first_name}} personalisation tokens.
Not when
Displaying actual email content to the end reader (this is a planning tool). The Sound Bite is only shared via link, not email.
New component — no existing variant. This is a meta-component that exists to design the delivery, not part of the delivery itself.
What it does: "Up next" horizontal card row — number, title, read time. Three-column grid, collapses to single column on mobile.
Use when
Every Sound Bite should end with this. Close layer — keeps the reader in the system. Show 2-3 related Sound Bites. The number in the thumbnail gives each one identity in the series.
Not when
Only one Sound Bite exists yet (nothing to link to). The Sound Bite is a one-off, not part of a series.
New component — part of the Close layer (Stage 5). Place after reactions, or just before them.
Reactions & Feedback
Was this useful?
Draft saved
Thank you! Your feedback helps us make better sound bites.
Want us to go deeper on this?
We'll send you a follow-up with more detail on this topic.
AI Sound Bites
#001
