Anthropic dropped Claude Design yesterday (Apr 17) and Figma stock tanked 7%. Everyone is asking: does this kill Figma? For us specifically, the real question is: can we finally stop the 2 to 5 day wait between Audrey finishing a design and the page going live? Pulled the research, ran the numbers, built for how you both work. 30-second read box below if you are in a rush.
From the Apr 20 standup: the team adopted a 3-tool strategy — Figma for 20% (hero + brand moments), Bricks AI Studio for 80% (repeating sections — trust bars, service grids, FAQs, CTAs), and Claude/Nexus to orchestrate briefs and validate output. Bricks AI's output is native Bricks, so there is no rebuild step between design and publish.
Eight wires to light up. Four are already live. Four are what Robert needs to do (or assign) before the pipeline is fully automated.
GViYd2jKWUEpLbz1lWghby. Claude can pull any frame on demand.NN_type_descriptor (02_section_hero, 04_card_review_kc). Without consistent naming, the puller can't match frames to playbooks.NN_type_descriptor. Every frame either becomes a matched playbook target or gets flagged as a one-off.NN_type_descriptor pattern on her existing frames).Every single tool has gaps. The rightmost column shows what happens when you combine them. That is the punchline of this whole playbook.
| Capability | 🎨 Figma | 🟣 Claude Design | 🟢 Bricks AI Studio | 🌟 Hybrid |
|---|---|---|---|---|
| Visual design canvas | ✅ yes | ⚠ conversational | ❌ prompt only | ✅ yesFigma lane owns this |
| Pixel-precise control | ✅ yes | ❌ no | ❌ no | ✅ yesFigma for hero + 20% |
| Direct Bricks export | ❌ no | ❌ no | ✅ yes | ✅ yesBricks AI Studio lane |
| Text-prompt generation | ⚠ plugin | ✅ native | ✅ native | ✅ yesBoth AI tools native |
| Reads existing codebase / brand | ❌ no | ✅ yes | ⚠ via prompt | ✅ yesBrand Memory (our VM knowledge base, already built) + Claude Design auto-read |
| Pitch decks / one-pagers | ⚠ workable | ✅ native | ❌ no | ✅ yesClaude Design lane |
| Web capture from live site | ❌ no | ✅ yes | ❌ no | ✅ yesClaude Design lane |
| Audrey's layer-naming system (02_CTA_TrustBar) | ✅ native | ❌ no | ❌ no | ✅ nativeFigma unchanged for Audrey |
| Available today | ✅ paid | ⚠ research preview | ✅ paid | ✅ yesPreview risk is on decks lane only, not pages |
| Output for Bricks trust bar or FAQ | ⚠ design only | ❌ manual rebuild | ✅ one-shot | ✅ one-shotBricks AI Studio direct |
| ✅ checkmarks | 4 / 10 | 4 / 10 | 4 / 10 | 10 / 10 |
Audrey's strengths today: pixel-level layout precision in Figma + the layer-naming system (02_CTA_TrustBar, 06_kc_homeowners_say, 08_FAQs, review_card) that keeps exports predictable.
Prompt-driven = less fine control. Her naming convention does not map.
Massive speed unlock for pitch decks. Weak for detailed page layout.
One-stop brief for Audrey + Kalen + Stephanie to see priorities, why they matter, what shipped, and what's pending. Mirrors but extends the Sacred v2 report — this is the Audrey-first version.
Quick links: Sacred v2 dashboard · 72-hour recap · Audrey Figma file
| # | Deliverable | Target page | Figma frame | Due |
|---|---|---|---|---|
| 1 | Homepage final — hand off to Robert to start Bricks build | / | desktop 707:14 / mobile 722:55 | MON |
| 2 | Hero photo (Reviews page) + team+van photo (About page) | /reviews/, /about-us/ | 01_Hero variants | TUE |
| 3 | Honest-hours chip with live status dot (8am-9pm Mon-Sat, Sun closed) | /contact-us/ + header | CL-15 Live Availability Chip | TUE |
| 4 | 5-tier financing visual ($49 / $99 / $199 / $399 / $699 mo) | /financing/ | 07_Financing_Tiers (new) | TUE |
| 5 | Careers card (role chip + apply CTA style; Kalen supplies content) | /careers/ | 03_Job_Card variant | WED |
Per permanent rule feedback_audrey_phase_minimization.md: Phase 1 = 1-2 items max per playbook. Phase 2 post-launch. Audrey already has 15 Figma service pages; these 5 are ADDITIONAL. If any item feels too big, ship at "passable" and defer polish to Phase 2.
Audrey’s 5 items directly influence Homepage, Reviews, About, Contact, Financing, Careers = 6 pages. The other 26+ pages generate from Bricks AI Studio using her brand kit + Kalen copy + playbook specs.
| City | URL | GSC Imp | GSC Clk | CTR | Pos | GA4 Sess | Tier |
|---|---|---|---|---|---|---|---|
| Overland Park | /service-areas/plumber-overland-park-ks/ |
317 | 0 | 0.00% | 5.9 | 0 | FULL |
| Kansas City MO | /service-areas/plumber-kansas-city-mo/ |
269 | 0 | 0.00% | 28.1 | 0 | FULL |
| Shawnee | /service-areas/plumber-shawnee-ks/ |
189 | 1 | 0.53% | 50.6 | 0 | FULL |
| Kansas City KS | /service-areas/plumber-kansas-city-ks/ |
91 | 0 | 0.00% | 7.2 | 0 | FULL |
| Lees Summit | /service-areas/plumber-lees-summit-mo/ |
64 | 0 | 0.00% | 22.8 | 0 | FULL |
| Mission Hills | /service-areas/plumber-mission-hills-ks/ |
62 | 0 | 0.00% | 48.7 | 0 | FULL |
| Roeland Park | /service-areas/plumber-roeland-park-ks/ |
30 | 0 | 0.00% | 30.3 | 0 | FULL |
| Olathe | /service-areas/plumber-olathe-ks/ |
27 | 0 | 0.00% | 12.6 | 0 | FULL |
| Lenexa | /service-areas/plumber-lenexa-ks/ |
23 | 0 | 0.00% | 44.3 | 0 | FULL |
| Leawood | /service-areas/plumber-leawood-ks/ |
18 | 0 | 0.00% | 37.9 | 0 | BARE |
| Merriam | /service-areas/plumber-merriam-ks/ |
18 | 0 | 0.00% | 43.0 | 0 | BARE |
| Prairie Village | /service-areas/plumber-prairie-village-ks/ |
17 | 0 | 0.00% | 33.0 | 0 | BARE |
| Mission | /service-areas/plumber-mission-ks/ |
14 | 0 | 0.00% | 19.3 | 0 | BARE |
| Grandview | /service-areas/plumber-grandview-mo/ |
9 | 0 | 0.00% | 23.0 | 0 | BARE |
| Fairway | /service-areas/plumber-fairway-ks/ |
2 | 0 | 0.00% | 51.0 | 0 | BARE |
| TOTAL (15 pages) | 1150 | 1 | 0.087% | — | 0 | ||
GSC from titan.gsc_search_performance (28-day rolling). GA4 from ga4_report_20260419_080043.json top_pages + top_landing_pages match. 1,150 impressions → 1 click → 0 sessions. Shawnee converted 1 impression to click at position 50 (bottom of page 5) — real demand with zero page quality. Rebuild = convert visibility into sessions.
Flip theme in WP admin → build ONE Bricks single-post template → spot-check 3 posts for Oxygen-class breakage per Apr 7 SOP → done. Zero risk of losing SEO equity.
Audrey ships homepage Figma frame to Robert morning; Robert starts Bricks build same day. Audrey spins up Claude Pro, builds mock weekly-report PPTX from prompt (Stephanie deck trial).
Install Bricks AI Studio plugin on bricks.callbrightside.com. Generate first trust bar + FAQ + review card from Audrey spec. Prove the 3-tool hybrid works on ONE real page before scaling.
Audrey ships last items (careers card + QA stand-by). Bricks AI Studio ingests 15 service + 9 location TIER A + 8 informational playbook specs. Parallel page generation.
Bricks AI generates 6 TIER B location pages (bare-bones template) + blog hub + blog single-post template + 4 new inaugural posts. Playwright QA pass across all ~32 pages. Staging-to-prod swap prep.
Stephanie final approval. Oxygen -> Bricks theme swap in WP admin (wp_posts preserved, zero blog content port). 4 paused Google Ads campaigns unpause + smoke test. LiteSpeed + Cloudflare purge. Decision gate review: did the 3-tool hybrid hit 10-15 pages/week throughput as projected?
Click any card to open the full playbook. Every card shows Audrey’s specific touch point so priorities are unambiguous. Card border color = priority tier. 6 playbooks need direct Audrey input; the rest either inherit from her brand kit or use Bricks AI templates.
Location Pages Playbook → Homepage + Gap Fills Supplement → 5 primary + 3 secondary. Every page inherits the same brand kit, CL component library, and 14-section architecture — Audrey stays in Phase 1 minimization.
Every tool in the matrix has gaps. But where one has a gap, another has a strength. Stop picking one tool. Use each for what it does best, at the stage of the pipeline where it wins. This is the optimal path.
Every stage of a page build, mapped to the tool that does it best. The 80/20 split is the key: 20% hand-crafted where it matters, 80% prompted where it does not.
| Stage | Current | Hybrid |
|---|---|---|
| 1 · Ideation concepts, variations | Audrey brainstorm solo | 🟣 Claude Design (web capture competitors + prompt 5 variants in 10 min) |
| 2 · Brand spec tokens, voice | Audrey memory + Figma library | 📚 Brand Memory (our VM knowledge base, already built) as single source of truth (brand voice + testimonials pulled from 17,119 saved pieces of BSP knowledge) |
| 3 · Hero design above-fold pixel work | 🎨 Figma | 🎨 Figma (unchanged, Audrey owns) |
| 4 · Repeating sections trust bar, FAQ, testimonials, CTA | 🎨 Figma spec → 🧱 Robert manual rebuild (2-5 days) | 🟢 Bricks AI Studio direct to Bricks (2 hours) |
| 5 · Build hero into Bricks unique 20% | 🧱 Robert manual (full page = 2-5 days) | 🧱 Robert manual (hero only = 2 hours) |
| 6 · Copy polish headlines, micro-copy | Audrey draft + Robert edit | 🧠 Claude chat + Brand Memory (our VM knowledge base, already built) voice pull |
| 7 · Responsive check mobile, tablet | Bricks preview + manual QA | 🧱 Bricks native + 🟣 Claude Design web capture comparison |
| 8 · Ship to staging + live publish + CF purge | Current process (fine) | Current process (unchanged) |
| 9 · Try 2 versions (testing) conversion tweaks | Robert hand-builds each variant | 🟢 Bricks AI Studio makes variants from prompts |
| 10 · Stephanie deck weekly report | Manual slides in Google / PowerPoint | 🟣 Claude Design native PPTX (15 min vs 2 hrs) |
Study any BSP service page: the hero and maybe one unique proof section is ~20% of the content but ~80% of the design effort. The remaining 80% of the page (trust bar, "KC Homeowners Say," FAQ accordion, emergency CTA, review cards, service list, schema footer) is repeating pattern work that varies only by content, not structure. Figma is overkill for it. Robert's manual rebuild is criminal overkill for it. This is exactly what Bricks AI Studio was built for.
A hybrid only works if every tool produces output that looks like BSP, not like generic AI sludge. The secret is locking the brand system in one place and feeding it to every tool.
One-time setup: ~4 hrs to encode brand tokens + voice samples into Brand Memory (our VM knowledge base, already built) structured output. Afterwards, every tool above gets consistent BSP output without anyone manually copying the brand guide into every prompt.
The hybrid is not about replacing Audrey. It is about promoting her from executor to creative director. Here is how each human role shifts.
Every number here uses Robert's in-house billable rate of $150/hr and our current pipeline bottleneck (3 pages/week delayed, ~$5-10K/month in deferred ad spend + SEO sitting behind the rebuild queue).
A concrete walkthrough using the sewer emergency page everyone has been asking about. This is the day-by-day picture.
Updated Apr 20, 2026 · Replaces all prior vague “20%” references
┌──────────────────────────────┐
│ 🔍 Looking at a section — │
│ is it Figma or Bricks AI? │
└──────────────┬───────────────┘
▼
┌────────────────────────────────────────┐
│ ❓ Does it repeat 3+ times on the page? │
└──────┬────────────────────┬────────────┘
│ YES │ NO
▼ ▼
┌──────────────────┐ ┌────────────────────────────┐
│ 🤖 BRICKS AI │ │ ❓ Is this the hero, final │
│ (service grids, │ │ CTA, or family story? │
│ FAQ, reviews, │ └──┬───────────────────┬─────┘
│ chips, cards) │ │ YES │ NO
└──────────────────┘ ▼ ▼
┌──────────────────┐ ┌──────────────────┐
│ 🎨 FIGMA │ │ ❓ Custom badge, │
│ (brand-critical) │ │ illustration, │
└──────────────────┘ │ or one-off? │
└──┬───────────┬───┘
│ YES │ NO
▼ ▼
┌──────────────┐ ┌──────────────┐
│ 🎨 FIGMA │ │ 🤖 BRICKS AI │
│ (unique art) │ │ (default) │
└──────────────┘ └──────────────┘
🎯 WHEN IN DOUBT → DEFAULT TO BRICKS AI
(faster to ship, easier to replace later)
NN_type_descriptor (e.g., 01_section_hero).HOMEPAGE (14 sections · 3 Figma + 2 hybrid + 9 Bricks AI) ┌─────────────────────────────────────────────────────────────┐ │ §01 🎨 Hero ← 🎨 YOU DESIGN │ │ §02 🤖 Trust bar ← 🤖 AI │ │ §03 🤖 Current specials ← 🤖 AI │ │ §04 🤖 Services grid (6 cards) ← 🤖 AI │ │ §05 🎨🤖 Financing + Plumbinati badge ← 🎨 HYBRID │ │ §06 🎨 Why BSP (family story, 5-gen) MOAT ← 🎨 YOU DESIGN │ │ §07 🤖 How it works (3 steps) ← 🤖 AI │ │ §08 🎨🤖 Jobs We Did This Week gallery ← 🎨 HYBRID │ │ §09 🤖 Service areas chips ← 🤖 AI │ │ §10 🤖 Live reviews (Google API loop) ← 🤖 AI │ │ §11 🤖 Guarantees (3 tiles) ← 🤖 AI │ │ §12 🤖 FAQ accordion ← 🤖 AI │ │ §13 🎨 Final CTA (close moment) ← 🎨 YOU DESIGN │ │ §14 🟢 Footer (global, already done) ← 🟢 DONE │ └─────────────────────────────────────────────────────────────┘ SERVICE LANDING PAGE (e.g. /sewer-camera-inspection/) ┌─────────────────────────────────────────────────────────────┐ │ §01 🎨 Hero ← 🎨 YOU DESIGN │ │ §02 🤖 Trust bar ← 🤖 AI │ │ §03 🤖 Signs you need it (6 cards) ← 🤖 AI │ │ §04 🤖 How it works (3 steps) ← 🤖 AI │ │ §05 🤖 Related services grid ← 🤖 AI │ │ §06 🎨🤖 KC Homeowners Say (composition) ← 🎨 HYBRID │ │ §07 🎨 Service-specific MOAT section ← 🎨 YOU DESIGN │ │ §08 🤖 FAQ ← 🤖 AI │ │ §09 🎨 Final CTA ← 🎨 YOU DESIGN │ │ §10 🟢 Footer ← 🟢 DONE │ └─────────────────────────────────────────────────────────────┘ LOCATION PAGE (e.g. /overland-park/) ┌─────────────────────────────────────────────────────────────┐ │ §01 🎨 City-specific hero ← 🎨 YOU DESIGN │ │ §02 🤖 Fleet availability badge ← 🤖 AI │ │ §03 🤖 Trust bar ← 🤖 AI │ │ §04 🎨 Landmarks / local story ← 🎨 YOU DESIGN │ │ §05 🤖 Services grid ← 🤖 AI │ │ §06 🤖 Map embed ← 🤖 AI │ │ §07 🤖 City-filtered reviews ← 🤖 AI │ │ §08 🤖 FAQ ← 🤖 AI │ │ §09 🎨 Final CTA ← 🎨 YOU DESIGN │ │ §10 🟢 Footer ← 🟢 DONE │ └─────────────────────────────────────────────────────────────┘ INFO PAGE (FAQ · Financing · Coupons · Careers) ┌─────────────────────────────────────────────────────────────┐ │ §01 🎨 Hero band (sometimes just a title) ← 🎨 YOU DESIGN │ │ §02 → §N 🤖 Everything else ← 🤖 ALL AI │ │ Footer 🟢 Done │ └─────────────────────────────────────────────────────────────┘
You can always replace an AI-generated section with a Figma one later if the output doesn't feel right. You cannot easily reclaim hours spent hand-crafting something that a pattern already handles. Ship fast. Polish what matters. The hero alone deserves more attention than 10 repeating cards.
Section added Apr 20 2026 · Source of truth for the 20/80 definition · Cross-linked from every playbook’s Hybrid Path callout.