StorytellerBeta — Concept Mockup

Handoff to Claude Design — what to upload and what to ask

Three files staged in /Users/galinos/Downloads/ClaudeCode/StorytellerBeta/ ready to upload. Multi-round prompt strategy, not a single mega-prompt.

Quick answers first

Q1 — Why not constantly loop?

You can. Recommended: loop continuously, with the end-card as a recurring interrupt at the end of every full pass. Sequence: story → ad → poll → story → end-card → (restart). End-card is the "convert this view to a pageview" moment. Pure constant loop without end-card feels mindless after pass 1; pure stop-after-one-pass kills late engagement; hybrid wins.

Q2 — If not sticky, how do we ensure all 6 stories are seen?

You can't guarantee it. Stack three mechanisms instead: (1) IntersectionObserver pause/resume — pause when out of viewport, resume from same card on re-entry, so fragmented attention still sees cards in sequence. (2) Best-first ranking — order cards by reaction-score / recency / trending, so even partial exposure shows the strongest content. (3) Optional sticky-on-exit — publisher config flag: when widget scrolls out of viewport, detach into a small bottom-corner floating mini-player. That's how today's storyteller works — keep it as an opt-in option, not a default.

Q3 — What is claude.ai/design?

Claude Design (Anthropic Labs, launched April 2026, powered by Claude Opus 4.7). Generates live HTML prototypes from text prompts + uploaded references. Available to Pro/Max/Team/Enterprise. Output is real clickable HTML, refinable via chat. Can read codebases + Figma files. Has handoff-to-Claude-Code flow built-in.

Q4 — Should I ask it to design something, or to give me code?

Design first, then code. Claude Design's strength is the visual iteration loop — generate mockups, refine via chat, compare variants. Get the look and behavior locked there. Then use Claude Design's "handoff bundle" to pass to Claude Code (which lives here, in this CLI), and Claude Code wires it into the dsg-core monorepo with proper modular structure, build pipeline, postMessage protocol, etc. Don't ask Claude Design for production code — its job is the design artifact.

Files staged for upload

All in /Users/galinos/Downloads/ClaudeCode/StorytellerBeta/

📄

claude-design-brief.md

The full design brief — mental model, 4 card types, anatomy, animation language, sizing, design tokens, sample Greek content, hard constraints. Claude Design reads this as the source of truth.

REQUIRED

🎨

mockup-reference.html

The animated mockup you've been looking at on localhost. All animations are real CSS — Claude Design can read and reproduce them. This anchors the visual direction.

REQUIRED

📝

claude-design-prompt.md

The 4-round prompt strategy. You don't upload this — you paste from it, one round at a time, into Claude Design's chat.

PASTE, DON'T UPLOAD

🚫

DON'T upload: dsg-core repo

Skip it. The repo has 27 unrelated apps and would pollute Claude Design with anti-patterns from the existing static carousel. Brief + mockup is enough — Claude Design starts clean.

SKIP

Step-by-step at claude.ai/design

Open claude.ai/design and create a new project

Project name: "StorytellerBeta". You'll be in a chat-like interface with an empty canvas.

Attach the two files

Drag claude-design-brief.md and mockup-reference.html into the chat. Claude Design will read them silently — don't expect a visible response yet.

Paste Round 1 from claude-design-prompt.md

This asks for 3 visual style variations side-by-side (Editorial / Modern app / Dark mode). It also tells Claude Design to give you an honest review of hierarchy, contrast, and tap targets at the end. Wait for the result, scroll through all 3 styles in the live preview.

Pick a style. Iterate.

Tell Claude Design specific tweaks ("Tighten tab strip to 28px", "Make CTA pill background warmer", "Source line is too quiet — bump to 0.9 opacity"). Be specific per the rules they shared. Don't say "this doesn't look right" — say "the spacing between the badge and the title is 12px, take it down to 8px."

Paste Round 2 — animations

Once the static layout is locked, ask for the full animation language. Claude Design generates a live demo you can watch loop. Tweak timing if anything feels off ("Ken Burns is too fast — slow to 10s").

Paste Round 3 — 4 card types

Ask for all 4 card variations side-by-side: story / video ad / poll / end-card. Confirm they all feel like the same widget.

Paste Round 4 — edge cases & polish

Walk through the 7 edge cases (1-char title, 100-char title with no spaces, image fail, zero reactions, no tabs, breaking interrupt mid-card, paused state). Ask Claude Design to fix each + produce a final handoff doc with all CSS variable names, animation durations, breakpoints.

Export the handoff bundle

Claude Design supports "package as handoff bundle for Claude Code." Do that. Bring the bundle back here, and we wire it into the dsg-core monorepo properly — modular structure, postMessage protocol, prebid integration, analytics, the works.

If Claude Design asks clarifying questions, answers are pre-loaded:

"Mobile or desktop priority?" → Both. ~70/30 mobile/desktop split for Greek news. Both must be polished.
"What language?" → Greek primary, but treat the design as language-agnostic. Test with both Greek (long titles, diacritics) and English placeholder.
"Brand colors?" → No fixed brand — the widget is white-labeled per publisher. Use neutral indigo/violet accents in the mockup; the brief says they're tunable per publisher config.
"Dark mode?" → Both. Include a dark mode variant from the start (publisher config flag).
"Accessibility level?" → WCAG AA at minimum. Title text 14px floor. Tap targets 32px min. 4.5:1 contrast on all overlay text.
"Framework?" → Vanilla CSS or Tailwind, whichever produces cleaner output. Final integration target is rspack-bundled UMD module — keep CSS modular and class-namespaced (e.g. .stb-frame, .stb-tabs).

When you come back from Claude Design

Bring the handoff bundle. We'll continue here in Claude Code: writing-plans skill next (per the brainstorming flow), turning the design into a concrete implementation plan — module decomposition, postMessage protocol spec, build pipeline updates to dsg-core, migration strategy from today's storyteller, test plan.