s4-B1-1 cover Session 4
AI for Prototyping — DS as guardrail
AI for Prototyping — DS as guardrail (M2 kickoff)
s04 · Betterworks · 90m · Full Cohort ·
released
s04 → 5 blocks, 32 slides, 19 trainer notes, 4 exercises, 0 reflects, 0 quizzes, 3 asides
Pre-read
- Skim `prompts/s04/pace-design-critic-system-prompt.md` — the system prompt for tonight's Critic
- Bring **one off-brand competitor screenshot** for the prediction beat in Block 3
- (Designers) think of **one DS gap or token decision** from your own DS you'd be ready to share if called on
- (PMs reading along) skim `pace/prds/prd-smart-pause.md` — we put this PRD on the table in Block 3
No essays. Show up with a screenshot and a question.
- Bring **one off-brand competitor screenshot** for the prediction beat in Block 3
- (Designers) think of **one DS gap or token decision** from your own DS you'd be ready to share if called on
- (PMs reading along) skim `pace/prds/prd-smart-pause.md` — we put this PRD on the table in Block 3
No essays. Show up with a screenshot and a question.
Session goal
By end-of-session each participant has:
1. A clear view of where **M2 sits in the M1 → M2 → M3 arc** — and how tonight bridges from S03's M1 outputs to a mobile prototype
2. A grounded **map of AI design harnesses** — Figma Make, Claude Design, Claude Code — and *when to reach for which*
3. A cloned **Pace DS Claude Project** with the **Pace Design Critic** working on their own machine
4. Run the 8-template library on **consumer + B2B admin** screens — at least #5 (a11y) and #2 (variants)
5. Heard the Critic **refuse an off-system colour and name the token** — the aha
1. A clear view of where **M2 sits in the M1 → M2 → M3 arc** — and how tonight bridges from S03's M1 outputs to a mobile prototype
2. A grounded **map of AI design harnesses** — Figma Make, Claude Design, Claude Code — and *when to reach for which*
3. A cloned **Pace DS Claude Project** with the **Pace Design Critic** working on their own machine
4. Run the 8-template library on **consumer + B2B admin** screens — at least #5 (a11y) and #2 (variants)
5. Heard the Critic **refuse an off-system colour and name the token** — the aha
Welcome · S02–S03 recap · M2 kickoff · your current practice
16 itemsOpen cold. Pull the room together (designers + PMs read-along), recap M1 in two beats, plant M2 as the arc step, and pass the mic to a designer to ground tonight's design work in the cohort's current practice.
s4-B1-2 list From Session 01 — what we landed
The four bets the whole bootcamp builds on. You were in the room.
- Default to AI — Claude tab opens before everything else. Drafts start there; decisions end with you.
- Pick the model on purpose, not on habit.
- Structure beats model — compound prompting is the lever.
- Outputs are artifacts. Judgement is the commitment.
s4-B1-3 list Meanwhile in M1 — what the PMs ran
M1 is shipped. M2 starts tonight on top of it.
- S02 — race · PMs ran the 5-step M1 chain on Pace data, receipts on screen
- S03 — spec → build · PMs agreed the v1, each built their /skill on their own machine
- M1 outputs are the input to M2 — one finding per pod becomes the brief for tonight's design work
s4-B1-4 activation Before we start — your S01 reflection
~30 sec. Open your S01 page in the portal · drop a one-liner + rating. Anonymous OK. Need the link? Search your inbox for the subject "Your
s4-B1-5 section M1 → M2 → M3, one story
Tonight is M2 — the bridge from finding to prototype.
s4-B1-6 list The three milestones we're connecting
One arc · your capstone weaves these together
- M1 ✓ Backlog Intelligence — MCP-driven cleanup of the Ideas / enhancement ecosystem (S02–S03)
- M2 tonight · Mobile Experience Prototype — AI-native mobile UX rethink, anchored on one M1 finding
- M3 · AI/API Workflow & Integration — wire the M2 prototype to real data via MCP / APIs
- Tonight — we cross from M1 outputs into the M2 design surface
s4-B1-7 activation Tell us about your current prototyping practice
What context do you give Claude Design / Figma Make today?
s4-B1-8 list Today
- 00–15 · B1 — S02–S03 recap · M2 kickoff · your current practice
- 15–30 · B2 — AI design harnesses · Figma's offerings · accuracy reality
- 30–55 · B3 — Token system · what's a token · the Critic refusal
- 55–80 · B4 — Workshop · clone the Project · run two templates
- … 1 more
AI design harnesses · Figma's offerings · accuracy reality
9 itemsMap the territory of AI design tools — what's in-canvas, what's browser, what's terminal. Then narrow into Figma's offerings (which are different surfaces with different jobs). Land the accuracy reality and the 40% gap that opens up Block 3.
s4-B2-1 section Where each lives. What each is good at.
Same Claude · different shape · different shipping model.
s4-B2-2 table Three harnesses for AI-native design
Same Claude · different shape · pick on purpose.
col 1
col 2 · Figma AI · Make
col 3 · Claude Design
col 4 · Claude Code
s4-B2-3 split Figma's AI offerings — which when
Both are exploration tools — not DS-discipline tools. That's the gap Block 3 closes.
col 1 · Figma AI
Native canvas AI.
Component generation · variant fills · content placeholders ·
col 2 · Figma Make
Generative scaffolding.
Full screens from a brief · multi-component flows · "wha
s4-B2-4 statement The accuracy reality
Most AI design plugins land 50–60% DS-accurate on first generation. Tokens slip. Components drift. Microcopy goes off-voice. The 40% gap is
s4-B2-5 table Where AI design tools excel · where they leak
Pick the tool to the task. The guardrail to the gap.
col 1
col 2 · Excel at
col 3 · Leak on
Token system · what's a token · the Critic refusal (the aha)
19 itemsDefine what a token actually is. Load the Pace DS as knowledge. Put a PRD on the table. Stage the files. Watch the Critic refuse. Land the shareable line.
s4-B3-1 section Token system as guardrail
Load the DS as knowledge · constrain Claude to it · watch the refusal.
s4-B3-2 list What is a token?
A named atomic design decision. It IS the contract.
- Color — every brand, semantic, surface, text hex referenced by name
- Typography — font family · weight · size scale · line-height · letter-spacing
- Spacing — 4 / 8 / 12 / 16 … the rhythm that makes layouts feel composed
- Sizing — fixed widths · max-widths · component dimensions
- … 3 more
s4-B3-3 code This is the contract
s4-B3-4 code What the cohort runs templates against
s4-B3-5 code Stage uploads in three layers
Text rules first · then images as test cases · then PRDs.
s4-B3-6 activation Predict the refusal — what will the Critic catch?
I'll drop one bad screen. Drop a 1-liner in chat — what you think Claude will flag.
s4-B3-7 split Three seeded issues
Now watch what the Critic does.
col 1 · The problems
Off-system colour #FF6F61
Empty state — no illustration
CTA — “Click here
col 2 · What the Critic should do
Refuse → name brand-coral-600
Flag the DS gap (not invent placeholder)
Rewrite m
s4-B3-8 statement That's the moment
Claude refuses the off-system hex. Names token.color.brand-coral-600 . Flags the DS gap. Rewrites the CTA.
s4-B3-9 list Three things just happened
Refused · named · flagged.
- Claude refused — not “I can also suggest”
- Named the token — not the hex
- Flagged a DS gap — not invented a placeholder
s4-B3-10 statement The technique
With these techniques, you can have Claude refuse off-system tokens — that's the guardrail you build into it.
Workshop — clone the Project, run two templates
14 itemsDesigners clone the Pace DS Project, verify, and run #5 (a11y) and #2 (variants) on consumer screens. Then #3 (state coverage) on B2B. PG floats in chat. PMs read-along — same surface, same patterns, mapped to PRD critique.
s4-B4-1 section Your turn
Clone the Project · run two templates · drop one output.
s4-B4-2 code The designer prompt library
s4-B4-3 code One template, verbatim
s4-B4-4 activation Clone the Pace DS Project · run templates
Drop one prompt → output pair in chat when you have it.
s4-B4-5 split Pace for Teams
Same DS · different density · new states.
col 1 · What changes
More table states.
More empty states.
More permission states.
col 2 · What doesn't
Same refusal rule.
Same token discipline.
Same workflow shape.
s4-B4-6 activation Run
What states would you miss if you'd only ever shipped consumer?
Takeaways · S05 preview · close
5 itemsTakeaways. S05 preview (where the capstone-commit beat lands). Close.
s4-B5-1 list Today's takeaways
- Token system as guardrail — Pace DS Project + Critic on your machine
- Plugins for exploration, Critic for discipline — pick the tool to the gap
- State coverage on B2B — exhaustive where your habit is optimistic
s4-B5-2 recap Next time — S05 Design AI Clinic
Mon 22 Jun · 19:00 IST · Designers + read-along PMs
- Bring one screen + your real DS · we pair-critique
- Two Claudes · same feature · parallel critique from PM + designer angles
- Commit the M2 capstone slice — feature, pair, target screen
s4-B5-3 close Thank you
One thing the Critic caught tonight you didn't expect — drop it below.
After this session
- **Tonight:** Pace DS Project cloned, verified, one prompt→output pair in chat
- **Before S05 (Mon 22 Jun):** pick one M1 finding from your pod's PM + one of your real screens — that's the parallel-critique target
- **Pair with your pod's PM** in chat by Sunday — confirm the feature you'll run S06–S07 on
- **For PMs:** the workshop ran against PRDs too — bring `01-design-brief.md` runs to S05
- **Failure-mode recovery (trainer-side):** if running 10+ min over by B4 workshop, cut the B2B pt 2 exercise to a 2-min trainer-driven walk on `12-screen-b2b-admin-home.png`; takeaway lands the same
---
## Open items (for polish pass / PG review)
1. **Capstone-commit beat moved to S05.** Old S04 B6 (designer slice section · pod arc split · capstone commit activation · Q&A) is now S05's anchor block. Separate authoring pass on `curriculum/s05.mdx` to absorb it.
2. **Pod-X reference** (Anurag / Lalit / Veronica / Harshini opt-in for the e2e PDLC sub-pod) — preserved as an open item; surfaces in S05 after the capstone commit lands. Don't carry into S04.
3. **[?CONFIRM] Clone Project link** — Claude.ai Project clone URL. Confirm in incognito 24 h ahead (Thu eve). Drop manual fallback in chat 10 min pre-session if needed.
4. **[?CONFIRM] Seeded-bad mock path** — `pace/screens/bad/bad-today.png` exists; visually confirm the seeded issues (`#FF6F61` colour, missing empty-state illustration, *"Click here to continue!"* CTA) are visible at Zoom-share zoom.
5. **[?CONFIRM] B2B screen renders** — `pace/screens/b2b/admin-home.png` + `engagement.png` + `seats.png` exist; verify rendering before B4 workshop.
6. **Cohort spotlight names** — trainer note for B1 slide 6 names Gauri / Harshini. Cohort-specific; replace per delivery.
7. **`material_url` update** — once PG drops `/tmp/pb-s04-stage/` into Drive as `s04/` subfolder, share the URL and I'll swap `cohorts/betterworks-jun26.yaml` `s04.material_url` from root to subfolder. Same for `src/content/cohort-sessions/betterworks-jun26/s04.mdx`.
8. **Activation count** — 5 exercises (reflection-reminder · current-practice screen-share · predict-the-refusal chat · clone+run · B2B state coverage). 4 distinct surfaces (link-click · screen-share · chat-poll · longer-chat). Passes §17 floor for 90 min (≥5 activations · ≥3 types).
- **Before S05 (Mon 22 Jun):** pick one M1 finding from your pod's PM + one of your real screens — that's the parallel-critique target
- **Pair with your pod's PM** in chat by Sunday — confirm the feature you'll run S06–S07 on
- **For PMs:** the workshop ran against PRDs too — bring `01-design-brief.md` runs to S05
- **Failure-mode recovery (trainer-side):** if running 10+ min over by B4 workshop, cut the B2B pt 2 exercise to a 2-min trainer-driven walk on `12-screen-b2b-admin-home.png`; takeaway lands the same
---
## Open items (for polish pass / PG review)
1. **Capstone-commit beat moved to S05.** Old S04 B6 (designer slice section · pod arc split · capstone commit activation · Q&A) is now S05's anchor block. Separate authoring pass on `curriculum/s05.mdx` to absorb it.
2. **Pod-X reference** (Anurag / Lalit / Veronica / Harshini opt-in for the e2e PDLC sub-pod) — preserved as an open item; surfaces in S05 after the capstone commit lands. Don't carry into S04.
3. **[?CONFIRM] Clone Project link** — Claude.ai Project clone URL. Confirm in incognito 24 h ahead (Thu eve). Drop manual fallback in chat 10 min pre-session if needed.
4. **[?CONFIRM] Seeded-bad mock path** — `pace/screens/bad/bad-today.png` exists; visually confirm the seeded issues (`#FF6F61` colour, missing empty-state illustration, *"Click here to continue!"* CTA) are visible at Zoom-share zoom.
5. **[?CONFIRM] B2B screen renders** — `pace/screens/b2b/admin-home.png` + `engagement.png` + `seats.png` exist; verify rendering before B4 workshop.
6. **Cohort spotlight names** — trainer note for B1 slide 6 names Gauri / Harshini. Cohort-specific; replace per delivery.
7. **`material_url` update** — once PG drops `/tmp/pb-s04-stage/` into Drive as `s04/` subfolder, share the URL and I'll swap `cohorts/betterworks-jun26.yaml` `s04.material_url` from root to subfolder. Same for `src/content/cohort-sessions/betterworks-jun26/s04.mdx`.
8. **Activation count** — 5 exercises (reflection-reminder · current-practice screen-share · predict-the-refusal chat · clone+run · B2B state coverage). 4 distinct surfaces (link-click · screen-share · chat-poll · longer-chat). Passes §17 floor for 90 min (≥5 activations · ≥3 types).
Add ?token=… to the URL.