ccbdb47162
Expands the slice from a single 300x250 banner to four IAB sizes (300x600, 300x250, 728x90, 160x600) driven by a designer-authored TypeSystem and a per-row strip review surface. Layout engine - TypeSystem with role-based typography (headline/subheadline/cta/legal) and piecewise size-class derivation: half_page / rectangle / leaderboard / skyscraper / mobile_banner. - resolveLayout now derives per-size font/leading from the role + artboard size, then clamps to a legibility floor and emits a constraint_signal when copy does not fit at the floor. - Four reference templates with character constraints per size. AI pipeline (Shape B) - One extract + one generate per feed row; generate returns per-size copy keyed by artboard_id plus a shared rationale block. - Constraint-signal retry: orchestrator tightens per-(artboard, field) limits and re-calls generate before giving up. - orchestrateRow returns specs[] + rationale + constraint_signals. Review UI - /review renders one strip per feed row, all four sizes side-by-side at true pixel dimensions, synced on a single GSAP master timeline. - AiReasoningDrawer shows a per-size copy table, shared rationale, and any constraint signals that fired. - /api/generate response grouped by row; /api/export accepts the same shape and writes exports/row-N/artboard_id.zip. Render worker - render-to-zip / render-many accept optional subdir + filename overrides so multi-size exports can be grouped by feed row. Docs - VERTICAL_SLICE and BUILD_SEQUENCE updated for the multi-size scope. - RESOLVED_FEED.md documents the V1 Resolved Creative Feed proposal. - SLICE_DEVIATIONS.md records where the slice diverges from V1. Tests: 56 pass (28 layout-engine + 14 api-lib + 14 render-worker). Web app: tsc clean, next build succeeds. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|---|---|---|
| apps/web | ||
| feeds | ||
| infra/fonts | ||
| packages | ||
| patches | ||
| scripts | ||
| .env.example | ||
| .gitignore | ||
| .nvmrc | ||
| ANTI_PATTERNS.md | ||
| ARCHITECTURE.md | ||
| Avoiding UX Failure FIRST.md | ||
| BUILD_SEQUENCE.md | ||
| CLAUDE.md | ||
| EXECUTIVE_SUMMARY.md | ||
| FRUSTRATION_LIST.md | ||
| INTERACTION_STANDARDS.md | ||
| package.json | ||
| PHASE_1_BRIEF.md | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| PROJECT_STRUCTURE.md | ||
| README.md | ||
| RESEARCH.md | ||
| RESOLVED_FEED.md | ||
| SLICE_DEVIATIONS.md | ||
| tsconfig.base.json | ||
| turbo.json | ||
| UX_ACCEPTANCE_CRITERIA.md | ||
| VERTICAL_SLICE.md | ||
Banner Studio — Claude Code Briefing Bundle
This bundle contains everything needed to begin building the agentic HTML5 banner production platform with Claude Code, plus an executive summary for non-engineering audiences.
What's in here
For Claude Code (drop these in the project root):
CLAUDE.md— Read on every session. Locked decisions, conventions, what not to do. The operational source of truth.PROJECT_STRUCTURE.md— Monorepo layout, package by package, file by file. Use as the scaffolding target.PHASE_1_BRIEF.md— Step-by-step prompts for the first week of work. Foundation phase, no UI yet.BUILD_SEQUENCE.md— All 14 phases with exit criteria. Expand each phase into Claude Code prompts as you reach it.ARCHITECTURE.md— The full architecture spec (the document you authored). Source of truth for data shapes, algorithms, and rationale.RESEARCH.md— Research backing the locked decisions. Reference for the "why" behind stack and pattern choices.
For leadership and stakeholder decks:
EXECUTIVE_SUMMARY.md— Plain-prose briefing. The PPT source document. Sections map naturally to slides.
How to start
-
Create the project repo. Copy
CLAUDE.md,PROJECT_STRUCTURE.md,PHASE_1_BRIEF.md,BUILD_SEQUENCE.md,ARCHITECTURE.md, andRESEARCH.mdinto the root. -
Open Claude Code in that directory.
-
First prompt:
Read
CLAUDE.md, thenPHASE_1_BRIEF.md. We are at Step 1.1. Begin. -
Work through Phase 1 step by step. Do not skip the unit tests on the layout engine. Do not skip Step 1.9 (the type-safety proof) — it confirms the contract chain works before you build anything substantial on top of it.
-
At Phase 1 exit, tag
v0.1.0-foundationand start Phase 2.
A note on the documents
CLAUDE.md is intentionally opinionated. It states what is locked, what is forbidden, and where to look for the why. This is the right shape for a Claude Code briefing — it tells the model what decisions have already been made so it doesn't waste context re-deriving them, and it tells it where to look when a deeper question comes up.
PHASE_1_BRIEF.md is the only phase with literal prompts pre-written. As you complete Phase 1 and start Phase 2, expand that phase's summary in BUILD_SEQUENCE.md into a similar step-by-step brief. The first phase needed prompts because zero-state is the hardest moment; later phases can lean on the patterns established in Phase 1.
EXECUTIVE_SUMMARY.md is written to be read by people who will never touch the code. It's the document that gets adapted into a 10-slide deck or a one-pager for a stakeholder conversation. Sections are sized to map to slides without further editing.