Design Homepage

Design Homepage — Identity-Driven Scroll Experience

A collaborative, iterative method for designing a homepage that is rooted in the venture's identity and delivered as an Apple-style, scroll-driven experience. This skill drives the process and writes the durable artifacts; the creative content emerges through dialogue with the user — do not invent identity, refine it with them.

Output (durable homes — write decisions to files, never leave them in chat):

• docs/design/style-statement.md — the visual language.
• docs/design/homepage-scroll-narrative.md — the scroll acts → concrete scenes.
• Updated/created docs/design/frontend-ia-brief.md — handoff for the build.

Technique reference: @.claude/ref/generation/scroll-experience.md (how to build the scroll experience). Tokens/motion/media: @.claude/ref/generation/design-system.md.

Focus (optional): $ARGUMENTS

Project: !basename "$(pwd)" Existing design docs: !ls docs/design/ 2>/dev/null || echo "none" Brand/identity hints: !grep -rniE "tagline|mission|thesis|hero|positioning" CLAUDE.md docs/ 2>/dev/null | head -8 || echo "none found" Data model docs: !ls docs/adr/ 2>/dev/null | grep -iE "portfolio|content|data" || echo "none"

---

Guardrails (hold these throughout)

• Identity before design. Do phases in order — never jump to visuals first.
• One tagline. Short, punchy, philosophical, user-centric (the user's experience + their ability to create their own, in any form) — not I-centric. Congruent tagline + subline. Iterate until it captivates the user.
• Commit the theme. Prefer a single committed color theme (e.g. dark-only) — a light+dark split doubles cinematic asset production. Confirm with the user.
• Restraint. One signature accent; negative space is a feature; monochrome type. Remove before adding.
• SEO by construction. The text layer is server-rendered; the canvas is decoration (see the scroll-experience ref + rdf.md §02).
• Work in a worktree (/new-worktree) — never edit the main clone directly.

---

Phase 0 — Ground the identity

Gather the venture's essence with the user. Read CLAUDE.md, any existing brand/about pages, and docs/design/*. Distill and confirm:

• Who it is for (audience) and the deep promise (the thesis).
• Name meaning / roots, founder role (is the founder the product or the narrator?), and personality (e.g. "restrained futurism").

Do not proceed until the user confirms the identity core.

Phase 1 — Tagline & voice

Craft one tagline + a congruent subline, and define the narrator role.

1. Propose several taglines across registers; pull toward the user-centric, creation-empowerment axis; kill the I-centric ones.
2. Converge with the user on the one that "hits deep." Pair it with a subline that carries the practical promise (e.g. "use what exists / build what's missing").
3. Record the decided copy + voice + personality — they go into the style statement (Phase 3).

Phase 2 — Scroll narrative (content structure)

Map the page as a scroll-driven story: an arc of acts. Typical shape:

experience / draw-in → the shift/thesis → identity reveal
   → what you can use (services) → how it's enabled (content)
   → the invitation (CTA) → the narrator (founder → About)

For each act, decide: the story beat, the narration, the data source (portfolio/content/funnels), and the transition. Tie acts to the real data model (read the ADRs). This is the section sequence.

Phase 3 — Visual language → write style-statement.md

Establish, with the user:

• A single motif (the durable through-line, rooted in the identity).
• Tone & emotional arc (the resting feeling + where it intensifies).
• Motion language (transition vocabulary: dissolves, wipes, redraws, zooms).
• Technique (frame sequence / real-time / hybrid — see the ref).
• Palette & material (base + one signature accent + per-cluster accent).
• Field & contrast polarity — if the cinematic is a subject on a near-uniform field, commit to one field polarity (dark-field or light-field) so text contrast is stable; note whether outlier beats get graded to it, or text colour adapts per keyframe (ref §4). A sequence that flips light↔dark with fixed white text is the #1 legibility trap.
• Subject anchor — a uniform field lets the subject be repositioned freely (ref §5). Decide the default: usually off-center on desktop (text column in the negative space) and centered on mobile.

Write docs/design/style-statement.md (essence, motif, tone, motion, technique, subjects, palette, type/restraint, logo, decided copy/voice, guardrails).

Phase 4 — Acts → Scenes → write homepage-scroll-narrative.md

Map each Phase-2 act to a concrete scene in the Phase-3 language: scene imagery, transition-in, narration/copy, data shown, technique, accent/rest. Include the arc/pacing, the technique split (cinematic peaks vs classic SSR sections), and the dual-mode note.

Write docs/design/homepage-scroll-narrative.md (a per-act table + notes).

Phase 5 — Handoff

• Create or update docs/design/frontend-ia-brief.md: resolve the open homepage-IA item by linking the two new docs; correct any stale design lines.
• List what remains for the build session: concrete layout/measurements, per-cluster accents, and asset production of the frame sequence.
• Point the build at @.claude/ref/generation/scroll-experience.md — it now covers the full path end-to-end (§11): asset production (reference stills → image-to-video → frames → Storage, all plan-first and approval-gated, §6) and the runtime build (fixed backdrop, dwell scrub, contrast, responsive anchor, §2–§5). Do not spend generation credits before the asset plan is approved.

Done

Summarize: the decided tagline/subline, the motif, and the two written docs. Commit on a feature branch and open a PR (do not merge without the user's go).