CODEX HANDOFF — Claude Design Rendering for LUME VC Pitch

CODEX HANDOFF — Claude Design Rendering for LUME VC Pitch

> Self-contained brief. You (Codex) take over the Claude Design rendering track. You pick the automation path. This doc gives you the WHAT — the product, the inputs, the outputs, the acceptance criteria. The HOW is yours.

---

1. What Claude Design is

Claude Design is Anthropic Labs' visual creation feature inside Claude. It turns text descriptions into professionally-designed pitch decks, prototypes, websites, and marketing materials. Launched April 2026.

Where it lives: https://claude.ai/design

Access: included with Claude Pro / Max / Team / Enterprise subscriptions. Mohamed has Pro+ access. The browser tab is already open in his session.

What it does:
- Generates full slide decks from text prompts ("Create 10-slide VC pitch deck for X")
- Applies brand colors, typography, custom design systems automatically when given a brand spec
- Inline editing: comment on individual slides to refine
- Supports data visualizations, charts, light animations
- Iterative refinement in conversation (each follow-up message tweaks the deck)

Output formats:
- Interactive HTML (best for presentations, includes animations + real-time editing)
- PPTX (PowerPoint export)
- PDF
- Canva export
- Standalone .zip folder for deployment

Key capability for our use: given a brand spec + product brief, it outputs a single self-contained HTML pitch deck with proper typography, color tokens, and asymmetric layouts. Quality is significantly better than markdown-rendered or generic-template approaches.

Cost: included in Mohamed's existing subscription. No per-deck billing for the web flow.

---

2. The mission

Generate 5 LUME pitch deck variants through Claude Design and save them as HTML files at:

Desktop/lume-content/vc-pitch/decks/andrewchanvc/claude-design/
├── v1-hardware-first.html
├── v2-experience-first.html
├── v3-cultural.html
├── v4-traction.html
├── v5-market.html
├── viewer.html             ← index linking the 5 above
├── screenshots/v{1..5}.png ← first-slide screenshots
└── REPORT.md               ← timing, acceptance checks, recommendation

Each variant is the SAME 10-slide structure with a DIFFERENT opening framing (slides 1-3, with framing-aligned emphasis on slides 5 and 8). Same brand. Same product.

You decide the automation path (browser drive, API, hybrid, manual prompt-cycle, whatever). Acceptance criteria in section 7.

---

3. The constraints (rules from the parent project)

---

4. The brand spec (paste verbatim into Claude Design)

COLORS
- Yellow primary: #FCE94F  (titles, accents)
- Yellow deep:    #F4D80E  (OLED-saturated alt)
- Black:          #0A0A0A  (text, strokes)
- Cream:          #FAF6E8  (subhead, light surfaces)
- Rust:           #C13B1A  (cultural / N'Ko cuts only)
- Graphite:       #1A1A1A  (dark deck background)
- Fog:            #2A2A2A  (dark deck card surface)

TYPOGRAPHY
- Titles:    Anton (Google Fonts), all caps, condensed bold, letter-spacing -1px
- Subhead:   Caveat (Google Fonts), cursive italic, lowercase, hand-drawn feel
- Body:      system-ui clean readable
- Technical: JetBrains Mono (numerals, terminal-feel labels)
- BANNED:    Inter, Arial, Roboto, Times New Roman

LAYOUT
- 16:9 landscape, 1920×1080 per slide
- Asymmetric. Title overlaps body content by 10-15%
- Generous negative space. Don't fill every quadrant
- One artifact per slide max. No collage
- Subtle SVG-turbulence grain texture overlay
- Slide-counter "03 / 10" bottom-right, JetBrains Mono
- Keyboard nav: arrow keys, F for fullscreen, scroll vertical for backup

VOICE
- No em dashes
- Mohamed is "Mohamed" or first-person, never "founder"
- No AI-isms (delve, leverage, craft, seamless, thrilled, excited to share)

This is the live source: `Desktop/lume-content/vc-pitch/brand-spec.md` (read it directly if you want).

---

5. The product brief (paste verbatim into Claude Design)

Read this file fresh — it's the source of truth and may have been edited:
`Desktop/lume-content/vc-pitch/lume-internal-brief.md`

Reference quotes for sanity-checking the deck output:

• What LUME is: Real-time body-driven audio + visual install engine. A song plays. A body moves. The room watches both. When the rhythm catches the body and the body locks in, the wall remembers it. The room becomes a partner. Self-contained hardware in venues: bars, lounges, galleries, retail spaces, brand-experience rooms.
• Tech surface: 21 Unity components, multi-modal real-time engine (audio FFT + body tracking + depth reproject + optical flow + GPU compute) at 60Hz, original UDP wire-format suite, computational choreography score, K11 mini-PC + Femto Bolt depth cam + 1920×440 IPS bar display + 31-part 3D-printed shell. 73 fast pytest tests passing. Wave 1-8 shipped 2026-05-02.
• The unexpected stack (the moat): Mohamed = Calvin Klein model + multi-year N'Ko AI infrastructure work (ASR for Bambara, sigil composer, learning apps) + audit consultancy (Grand Diomande, Claude Partner Network certified). The LUME wordmark uses N'Ko script (designed 1949, 35M Manding-language speakers).
• Market: bars, lounges, galleries, retail brand spaces, experiential-marketing agencies. Adjacent: museums, art installs, brand-activation pop-ups, immersive-theater operators.
• Competitive picture: two or three individual artists are building toward this aesthetic; none have shipped a productized engine.
• Ask: pre-seed / seed funding to (1) ship LUME-001 install, (2) hire 2 (hardware engineer + Unity dev), (3) license commercial mocopi-pro pipeline, (4) build productization layer.
• Deck content depth: architecture detail, component counts, wire-format names, hardware models are FAIR GAME inside the deck (the deck goes to the VC, not the public). Use them.

---

6. The 5 variant framings

Same 10-slide structure across all 5. Different opening framing (slides 1-3) and different emphasis on slides 5 and 8.

Common slide order (all variants):
1. The Hook (framing-led)
2. The Problem
3. The Solution (what LUME is)
4. Why Now
5. The Product (depth fits framing)
6. Market & First Buyers
7. Traction & Receipts (receipts-grid layout, 4-6 cards)
8. Tech Edge / Moat
9. Team & Why-Mohamed (the unexpected stack)
10. Ask & Use of Funds

### V1 — HARDWARE-FIRST
Lead with the engineering moat. Open with the K11 mini-PC, the Femto Bolt depth cam, the 31-part 3D-printed shell, the multi-protocol UDP wire-format suite, the 21-component Unity stack. Frame Mohamed as a hardware-software co-design operator. The cultural and content layers are ammunition, not headline.

### V2 — EXPERIENCE-FIRST
Lead with the sensory frame. Open with "the room stops being a room. the room becomes a partner." Walk the VC through what a Saturday night feels like in a venue with LUME. Hardware specs are slide 5+, not the headline. Frame Mohamed as the engineer who can ship experiences.

### V3 — CULTURAL-FIRST (use rust accent #C13B1A on slides 1 + 3)
Lead with the N'Ko / Bambara / unexpected-stack angle. Open with the wordmark on the shell that 35M people read but most VCs haven't seen. Tie to the cognitive-infrastructure thesis. Position LUME as commercial install AND cultural-sovereignty engine. Hardware and traction support the thesis, don't lead it.

### V4 — TRACTION-FIRST
Lead with shipped artifacts. Open with "six months in. 21 components live. K11 deployed. 73 tests green. shell printing. first install ships from this desk." Heavy on receipts, light on vision. Best for VCs who pattern-match on builders over storytellers.

### V5 — MARKET-FIRST
Lead with the buyer-side problem. Open with venue economics: "a bar gets 100 bodies through it on a Saturday night. nine of them feel something. the rest scroll. that's the gap LUME closes." Hardware and tech are the moat slide. Best for VCs who lead with market-size + buyer-pull.

---

7. The prompt template (use one per variant)

For each of the 5 variants, paste this prompt into Claude Design (one chat per variant is cleanest, or one chat with explicit "now generate variant N" follow-ups — your call).

Build me a 10-slide venture pitch deck for LUME, designed (not just outlined). Output a single self-contained HTML file (16:9 landscape, 1920×1080 per slide, scrollable, arrow-key navigation, F for fullscreen).

VARIANT: <PASTE THE FRAMING FROM SECTION 6, e.g. "HARDWARE-FIRST. Lead with the engineering moat. Frame Mohamed as a hardware-software co-design operator. Cultural / content / brand layers are ammunition, not the headline.">

BRAND SPEC (apply rigorously):
<paste full brand spec from section 4>

PRODUCT BRIEF:
<paste full lume-internal-brief.md content>

10-SLIDE STRUCTURE:
1. The Hook  — bold-yellow title fills 60-80% of canvas. One Caveat-cursive subhead line.
2. The Problem  — venue economics
3. The Solution  — what LUME is, sensory + technical
4. Why Now
5. The Product  — depth fits the variant framing
6. Market & First Buyers
7. Traction & Receipts  — receipts-grid layout, 4-6 cards, JetBrains Mono numerals
8. Tech Edge / Moat  — full architecture is fair game (deck goes to the VC)
9. Team & Why-Mohamed  — Calvin Klein × N'Ko AI × hardware install (the unexpected stack)
10. Ask & Use of Funds  — large ask number, itemized

CONSTRAINTS:
- Asymmetric layouts. NOT every slide identical.
- Subtle SVG-turbulence grain texture overlay
- Slide counter "03 / 10" bottom-right in JetBrains Mono
- Voice: no em dashes, Mohamed not "founder", no AI-isms
- Make it gorgeous. Make it feel like a person who builds, not a deck app, generated this.

Output the complete HTML file starting with <!DOCTYPE html>. No preamble.

---

8. Acceptance criteria (you're done when)

• [ ] `Desktop/lume-content/vc-pitch/decks/andrewchanvc/claude-design/` exists
• [ ] 5 HTML files: v1-hardware-first.html, v2-experience-first.html, v3-cultural.html, v4-traction.html, v5-market.html
• [ ] Each file starts with `<!DOCTYPE html>` and is ≥ 30 KB (sanity check that it's a real designed page, not a stub)
• [ ] Each file imports Anton + Caveat + JetBrains Mono from Google Fonts
• [ ] Each file has at least 10 distinct slide sections (`document.querySelectorAll('section').length >= 10` or equivalent)
• [ ] Each file uses brand-spec colors (`grep -c "#FCE94F"` >= 3, `grep -c "#0A0A0A"` >= 1)
• [ ] V3 (cultural) uses the rust accent (`grep -c "#C13B1A"` >= 1)
• [ ] No em dashes (`grep -c "—"` returns 0 for each file)
• [ ] No "founder" string (`grep -ci "founder"` returns 0)
• [ ] No banned AI-isms (`grep -ciE "delve|leverage|craft|seamless|thrilled|excited to share"` returns 0)
• [ ] viewer.html index linking all 5
• [ ] First-slide screenshot per variant in `screenshots/v{1..5}.png`
• [ ] REPORT.md (template in section 10)

---

9. Inputs ready for you (file paths)

Desktop/lume-content/vc-pitch/brand-spec.md             ← brand spec (section 4 source)
Desktop/lume-content/vc-pitch/lume-internal-brief.md    ← product brief (section 5 source)
Desktop/lume-content/vc-pitch/CLAUDE-DESIGN-PROMPT.md   ← earlier paste-once prompt; reference, not authoritative

The earlier paste-once prompt at `CLAUDE-DESIGN-PROMPT.md` was written for manual use. You're authoritative now — section 7 of THIS doc is the canonical prompt.

---

10. Completion report template

When you finish, write `Desktop/lume-content/vc-pitch/decks/andrewchanvc/claude-design/REPORT.md`:

# Claude Design Render Report — andrewchanvc

Time started: <timestamp>
Time finished: <timestamp>
Total duration: <minutes>

## Per-variant
| Variant | Duration | Bytes | Acceptance | Notes |
|---|---|---|---|---|
| v1-hardware-first | 47s | 84,231 | ✓ | clean first pass |
| v2-experience-first | 52s | 78,910 | ✓ | clean |
| v3-cultural | 88s | 91,402 | ✓ regen | first pass had em dash; explicit reminder fixed it |
| v4-traction | 41s | 76,544 | ✓ | clean |
| v5-market | 49s | 80,219 | ✓ | clean |

## Issues encountered
- <e.g. "Variant 3 first generation included an em dash; regenerated with explicit reminder; second pass clean">
- <...>

## Recommendation for Mohamed
<which variant landed strongest, why, what slides he should rewrite by hand>

## Files written
Desktop/lume-content/vc-pitch/decks/andrewchanvc/claude-design/v1-hardware-first.html (84 KB)
Desktop/lume-content/vc-pitch/decks/andrewchanvc/claude-design/v2-experience-first.html (79 KB)
Desktop/lume-content/vc-pitch/decks/andrewchanvc/claude-design/v3-cultural.html (91 KB)
Desktop/lume-content/vc-pitch/decks/andrewchanvc/claude-design/v4-traction.html (77 KB)
Desktop/lume-content/vc-pitch/decks/andrewchanvc/claude-design/v5-market.html (80 KB)
Desktop/lume-content/vc-pitch/decks/andrewchanvc/claude-design/viewer.html
Desktop/lume-content/vc-pitch/decks/andrewchanvc/claude-design/screenshots/v{1..5}.png

Then echo a one-line completion message: `CLAUDE DESIGN HANDOFF COMPLETE: 5 decks at decks/andrewchanvc/claude-design/`.

---

11. Out of scope

• The Gemini parallel rendering (pipeline step `07-render-html.py`) runs itself in the background.
• The PITCH content video series (`Desktop/lume-content/vc-pitch/content/01..05`) — Mohamed shoots those.
• VC outreach / sending the deck — Mohamed sends after picking + rewriting.
• Other VC targets — out of scope here.
• Git commits — write the HTML files but do not commit. Mohamed reviews first.

---

12. One thing to know

The pitch decks are INTERNAL. The PITCH content videos Mohamed shoots about the build process are PUBLIC. Different surfaces, different rules. Architecture detail and hardware models are fine in the deck. None of them ever appear in a TikTok script. Not your problem here, just keeping the constraint in mind so you don't accidentally screenshot a deck slide for "process content" later.

That's it. Five decks. Save to disk. Write the report. Done.