Each journey is walked by a named protagonist (BMAD pattern): a concrete persona with a job-to-be-done trigger, so the spec reads as behaviour rather than abstract requirements.
3 personas13 scenariosslugbnf-2026-06-28-01
JTBD: When a lead moves through the funnel I want the board + history to reflect reality instantly so that I never act on stale state.
JTBD: When I want to book a consultation I want a fast, honest picker so that I pick a real free slot without waiting.
JTBD: When a call is booked I want the prospect's site auto-prepped into presentable Figma assets so that I walk into the call with a concrete proposal in minimal clicks.
Every distinct leaf path, classified happy / edge / failure / recovery. The proposed test-IDs are the bridge that plan-techspec reads from scenario_map.json to seed acceptance checks.
| ID | Scenario | Persona | Path | Steps | Proposed test-IDs |
|---|---|---|---|---|---|
| S1 | Post-call: card shows a 'call happened' tag + a live transcript-status pill | P1 | 🟢 happy | 2 | — |
| S2 | Post-call: history shows a 'Google Meet hívás' entry with transcript; appointment reminders are cleared | P1 | 🟢 happy | 2 | — |
| S3 | Manual Log-Call reschedule routes to Sales Call/Proposal when prep is already done | P1 | 🟣 recovery | 1 | — |
| S4 | 'Open in Studio' button is on BOTH Booked/Sales Call Prep and Sales Call/Proposal cards | P1 | 🟢 happy | 2 | — |
| S5 | Booking app: slot list AND confirmation both render fast (<2s) | P2 | 🟢 happy | 2 | — |
| S6 | Board-card pills/tags: readable, bigger, and uniform within each column | P1 | 🟢 happy | 1 | — |
| S7 | Booking picker shows ONLY available slots (no 'slot became occupied' error in the normal flow) | P2 | 🟡 edge | 2 | — |
| S8 | Real-time Pipeline notifications for ALL events, not just bookings | P1 | 🟢 happy | 1 | — |
| S9 | Booking a NEW second call must NOT delete the prior Google Meet event (only a reschedule does) | P1 | 🟡 edge | 2 | — |
| S10 | Fireflies bot-free recording — the prospect sees no consent prompt | P3 | 🟢 happy | 1 | — |
| S11 | Studio: auto-create on Booked → full-auto prep chain → Figma import (via Figma MCP) | P3 | 🟢 happy | 4 | — |
| S12 | Studio: rep reviews the prep, fixes weak HTML via comments, saves a version, returns to the exportable view | P3 | 🟣 recovery | 3 | — |
| S13 | Studio: Deliverables panel — HTML export + embedded Figma + competitor FOMO deck; image-rewrite OFF by default; Figma link saved to CRM | P3 | 🟢 happy | 4 | — |
Each row is one concrete UI interaction: who acts · the exact element clicked or seen · the copy shown · the system action · the resulting state · where it branches.
Trigger: A Google Meet sales call with a lead has just ended and Fireflies has the recording.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | Open the Pipeline view and look at the lead's board card right as the Google Meet call ends | — | pipeline detects the call occurred (Fireflies / transcript hook) | deal flagged call_occurred=true; transcript ingest queued | — |
| 2 | user | Keep watching the same card while the transcript finishes processing | — | transcript ingest completes + links to the deal | transcript_ready=true | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | Open the Pipeline view and look at the lead's board card right as the Google Meet call ends | Two clearly DISTINCT markers appear on the card: a solid tag 'Sales call megtörtént' AND, separately shaped, an amber status pill 'Átirat feldolgozása…' — different shapes so the two are never confused at a glance. The pill fades in on detection so the card visibly updates without a manual board refresh. | Copy: Tag 'Sales call megtörtént' + amber pill 'Átirat feldolgozása…' · Look: a solid tag + a distinct amber (processing) status pill — two different shapes · Where: on the lead's board card (Booked/Sales Call Prep or Sales Call/Proposal column) | deal flagged call_occurred=true; transcript ingest pending | the Pipeline does not react to the call at all (no tag, no pill — today's bug); a re-fired/duplicate detection STACKS a second tag instead of updating the existing one | — |
| 2 | Keep watching the same card while the transcript finishes processing | The status pill flips from amber 'Átirat feldolgozása…' to green 'Kész' with a check icon — so 'done' reads at a glance from colour+icon alone. Clicking the 'Kész' pill jumps straight to the transcript entry in the history. | Copy: 'Kész' · Look: the same status pill flips amber→green + a check icon · Where: same position on the card, beside the 'Sales call megtörtént' tag | transcript stored + linked to the deal | the pill stays stuck on 'Átirat feldolgozása…' after the transcript is ready; on failure there is no recovery (it must instead show 'Átirat sikertelen — újra' with a retry); the call is mistaken for a notification-only event | — |
flowchart TD S1U1(["Open the Pipeline view and look at the lead's board card right…"]) S1U2(["Keep watching the same card while the transcript finishes proce…"]) S1U1 -->|pipeline detects the call occurred (Fireflies…| S1U2
Trigger: The sales call happened; Mátyás opens the lead's history.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | On the lead card, click '🕘 Előzmények' (history) and expand the call entry | — | — | history rendered | — |
| 2 | user | In the same history, look for the previously-scheduled appointment-reminder emails after the call has happened | — | on call-occurred: remove appointment-reminder rows + cancel still-pending scheduled reminders (transactionally) | pending_reminders_cancelled | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | On the lead card, click '🕘 Előzmények' (history) and expand the call entry | A history entry titled 'Google Meet hívás (Xp Ym)' with a Meet icon and the duration in parentheses. It opens to show a one-line AI summary by default, with the FULL transcript behind an expand toggle (so it isn't a wall of text). 'Copy transcript' / 'Open in Fireflies' actions are available on the entry. | Copy: 'Google Meet hívás (Xp Ym)' + collapsible transcript + 'Copy transcript' action · Look: history row with a Meet icon + duration; a collapsible transcript panel · Where: in the 🕘 Előzmények history list | the call is logged in history as a Google Meet call with duration + the full transcript text | the call is labelled 'phone call'; the transcript is missing or truncated | — |
| 2 | In the same history, look for the previously-scheduled appointment-reminder emails after the call has happened | The scheduled appointment-reminder rows are gone from the history, replaced by a subtle greyed audit line (e.g. 'emlékeztetők törölve a hívás után') so the removal is explained, not silent. No reminder email goes out after the call. | Copy: greyed 'emlékeztetők törölve a hívás után' line where the reminder rows were · Look: reminder rows removed; one subtle greyed audit line · Where: 🕘 Előzmények history list | still-pending reminders are cancelled transactionally; if the booking was too soon for the full sequence, only the leftover reminders are removed | a reminder email is sent to the lead AFTER the call already happened (incl. the race between 'call done' and a reminder firing) | — |
flowchart TD S2U1(["On the lead card, click '🕘 Előzmények' (history) and expand the…"]) S2U2(["In the same history, look for the previously-scheduled appointm…"]) S2U1 -->|history rendered| S2U2
Trigger: A lead is in 'Booked / Sales Call Prep' with prep already done; Mátyás reschedules via the Log Call panel.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | On a Booked/Sales Call Prep card (prep already done), click 'Log Call' → 'Book Appointment', pick a new meeting time, and Save | — | manual reschedule via the Log-Call booking path; route by prep_done | stage → sales_call | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | On a Booked/Sales Call Prep card (prep already done), click 'Log Call' → 'Book Appointment', pick a new meeting time, and Save | The card moves to the 'Sales Call / Proposal' column showing the new meeting time, and the board briefly flashes/scrolls to it so you see where it landed. A short toast explains the routing ('prep done → Sales Call / Proposal'). | Copy: new call date/time on the card + toast 'prep done → Sales Call / Proposal' · Look: card now in the Sales Call/Proposal column; brief move animation · Where: Sales Call / Proposal column | because prep was already done, the reschedule routes to sales_call; callAt updated; old date replaced | the card lands back in 'Booked / Sales Call Prep' when prep was already done; the No-Show+Reschedule behavior changes | — |
flowchart TD S3U1(["On a Booked/Sales Call Prep card (prep already done), click 'Lo…"])
Trigger: A lead enters Booked/Sales Call Prep and later Sales Call/Proposal.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | Watch a card the moment it enters the 'Booked / Sales Call Prep' column | — | — | card in appt_booked | — |
| 2 | user | Look at the same lead's card once it is in the 'Sales Call / Proposal' column | — | — | card in sales_call | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | Watch a card the moment it enters the 'Booked / Sales Call Prep' column | The 'Open in Studio' button is present on the card immediately on entry (optimistically, not only after the next poll). A small status dot shows Studio state (grey = not created · amber = generating · green = ready). | Copy: 'Open in Studio' + a status dot · Look: button on the card with a small grey/amber/green dot · Where: on the Booked/Sales Call Prep card | studio deep-link available for the deal | the button is missing on entry; a click 404s while the project is still generating (it should be disabled+tooltip in that case) | — |
| 2 | Look at the same lead's card once it is in the 'Sales Call / Proposal' column | The SAME 'Open in Studio' button (identical icon+label) is also present here, deep-linking to the right Studio view for this stage. | Copy: 'Open in Studio' (identical to the Prep card) · Look: same button styling as on the Prep card · Where: on the Sales Call/Proposal card | studio deep-link available in this stage too | the button is present on one stage but missing on the other — it must be on BOTH | — |
flowchart TD S4U1(["Watch a card the moment it enters the 'Booked / Sales Call Prep…"]) S4U2(["Look at the same lead's card once it is in the 'Sales Call / Pr…"]) S4U1 -->|card in appt_booked| S4U2
Trigger: A lead books a call on the public booking page.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | On the booking page, pick a date and watch the time-slot list appear | — | — | slots loaded | — |
| 2 | user | Pick a time slot and click 'Foglalás megerősítése' | — | submit booking; CRM/gcal/email run off the response path | booking confirmed | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | On the booking page, pick a date and watch the time-slot list appear | The slot list appears in well under 2s — ideally instant via a skeleton placeholder that fills in, with availability prefetched on date-hover so there is no spinner wait. | Copy: time-slot buttons · Look: slot list appears fast (skeleton → filled), no long spinner · Where: booking page, slot area | slot availability fetched off the critical path / cached per month | a multi-second wait or a blank slot area while loading | — |
| 2 | Pick a time slot and click 'Foglalás megerősítése' | The confirm/success screen appears in UNDER 2s — shown optimistically with a subtle 'véglegesítés…' micro-state while side-effects finish. The confirm button disables on click so it can't be double-submitted. | Copy: success / 'Foglalás megerősítve' screen · Look: fast confirm screen, optional 'véglegesítés…' micro-state, no long spinner · Where: booking page, post-submit | submit→confirm <2s; CRM write / gcal / email still happen in the background; a failed side-effect is retried/queued quietly | ≥2s wait or the old ~5s delay; any dropped side-effect (email/CRM/gcal must still happen); a double-submit creating two bookings | — |
flowchart TD S5U1(["On the booking page, pick a date and watch the time-slot list a…"]) S5U2(["Pick a time slot and click 'Foglalás megerősítése'"]) S5U1 -->|slots loaded| S5U2
Trigger: Mátyás looks at the board cards.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | Look at the pills/tags on the board cards (e.g. 'Automated sequence', 'Email 1/2 (sent/unsent)', status tags) across the columns | — | — | — | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | Look at the pills/tags on the board cards (e.g. 'Automated sequence', 'Email 1/2 (sent/unsent)', status tags) across the columns | The pills are clearly readable (WCAG-AA contrast, not faint), noticeably BIGGER than before, and visually uniform within each column — one consistent pill style and a consistent colour semantics (e.g. sent=green, unsent=grey, sequence=indigo, status=amber). | Copy: same tag text (Automated sequence, Email N …) · Look: darker/stronger colour + larger size; one consistent pill style + colour legend per column · Where: on the board cards, across all columns | ideally one shared pill component (size/radius/weight/contrast tokens) reused everywhere | faint/low-contrast pills (today's screenshot); inconsistent pill styles within a single column; the bigger size causing overflow/overlap (cap to 1–2 lines with ellipsis) | — |
flowchart TD S6U1(["Look at the pills/tags on the board cards (e.g. 'Automated sequ…"])
Trigger: A lead (or Mátyás) opens the booking or reschedule slot picker.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | Open the booking or reschedule slot picker and look at the offered times | — | picker queries live availability and omits booked slots | only-free slots shown | — |
| 2 | system | Two people race for the same free slot at the same instant | — | server-side slot-taken guard fires | race rejected | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | Open the booking or reschedule slot picker and look at the offered times | Only AVAILABLE slots are offered — already-booked times are not shown at all. Free slots are grouped (morning/afternoon) for scanability; a date with zero free slots is greyed in the date picker with 'nincs szabad időpont'. The list live-refreshes (~30s / on focus) so a slot taken elsewhere disappears before you pick it. | Copy: only free time slots, grouped by morning/afternoon · Look: no taken slots in the list; fully-booked dates greyed · Where: booking + reschedule slot pickers (both) | the picker filters out booked slots in both the initial-booking and reschedule pickers | an already-booked slot is offered as selectable, producing the 'ez az időpont közben foglalt lett' error in the normal flow | — |
| 2 | Two people race for the same free slot at the same instant | Only in the rare true race does the server return the friendly 'ez az időpont közben foglalt lett, kérlek válassz másikat' message — and the picker immediately refreshes so the now-taken slot vanishes (ideally auto-suggesting the nearest free slot). | Copy: 'ez az időpont közben foglalt lett, kérlek válassz másikat' (race fallback only) · Look: friendly inline message + auto-refreshed picker · Where: booking picker | the server guard stays as a race backstop, just not hit in the normal flow | a real double-booking; removing the server guard entirely | — |
flowchart TD S7U1(["Open the booking or reschedule slot picker and look at the offe…"]) S7U2["Two people race for the same free slot at the same instant"] S7U1 -->|picker queries live availability and omits bo…| S7U2
Trigger: Any pipeline-relevant event occurs while Mátyás watches the Pipeline view.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | Watch the Pipeline view while events occur (new lead, inbound reply, booking, reschedule, cancellation, sales-call-occurred, proposal sent, payment) | — | each event pushes a real-time notification to the Pipeline view | live notification per event | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | Watch the Pipeline view while events occur (new lead, inbound reply, booking, reschedule, cancellation, sales-call-occurred, proposal sent, payment) | Each of those events surfaces a real-time notification on the Pipeline view (like booking already does), through ONE notification feed/bell with per-event-type icons + colour. Each notification click-throughs to the relevant card; bursts collapse ('3 new leads'); event types can be muted/filtered. | Copy: per-event notification text in a single feed · Look: one real-time notification feed/bell on the Pipeline view, per-event icons + colour · Where: Pipeline view | all listed events emit a real-time Pipeline notification, not only bookings | only the booking event notifies; an event passes silently with no real-time signal | — |
flowchart TD S8U1(["Watch the Pipeline view while events occur (new lead, inbound r…"])
Trigger: A lead already had a Google Meet call; a new meeting gets booked — either a reschedule or a genuinely new second call.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | Book a NEW (second) Google Meet call for the lead via Book Appointment — choosing the explicit 'Book an additional call' intent (not 'Reschedule') | — | new-call booking path keeps prior events | second event created, prior kept | — |
| 2 | user | Perform an actual reschedule of an upcoming call (No-Show+Reschedule or the reschedule action), confirming the 'this replaces the upcoming call on <date>' prompt | — | reschedule path replaces the upcoming event | upcoming event replaced | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | Book a NEW (second) Google Meet call for the lead via Book Appointment — choosing the explicit 'Book an additional call' intent (not 'Reschedule') | The prior Google Meet event stays on the calendar and a new, separate event is created for the second call. Booking offers an explicit choice — 'Reschedule existing call' vs 'Book an additional call' — so intent is unambiguous, and the history lists the calls as distinct entries (Call 1, Call 2). | Copy: two calendar events (prior + new) + 'Book an additional call' choice · Look: both events present; distinct history entries · Where: Mátyás's Google Calendar + the lead history | a NEW (non-reschedule) booking keeps the prior calendar_event_id and adds a new event | the prior Google Meet event is deleted when it was a new second call rather than a reschedule | — |
| 2 | Perform an actual reschedule of an upcoming call (No-Show+Reschedule or the reschedule action), confirming the 'this replaces the upcoming call on <date>' prompt | On a real reschedule, a confirm ('this replaces the upcoming call on <date>') appears, then the prior UPCOMING event is replaced and a new event + invite is created; an audit line links old→new. | Copy: reschedule confirm + new event/invite · Look: old upcoming event removed, new one created, audit link kept · Where: Mátyás's Google Calendar + history | the reschedule path deletes only the future, un-occurred event and creates the new one | a reschedule leaves a stale duplicate; a non-reschedule deletes a prior event; ANY past/occurred event is ever deleted | — |
flowchart TD S9U1(["Book a NEW (second) Google Meet call for the lead via Book Appo…"]) S9U2(["Perform an actual reschedule of an upcoming call (No-Show+Resch…"]) S9U1 -->|new-call booking path keeps prior events| S9U2
Trigger: The rep wants a Fireflies transcript of the Google Meet without the prospect seeing any Fireflies bot or consent prompt.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | Start recording the Google Meet via the Fireflies Chrome extension (Fireflies auto-join disabled) — using a one-click 'Start recording (extension)' launcher with a verbal-consent reminder that saves a timestamp note | — | bot-free local capture; transcript ingests + links to the lead | transcript captured bot-free | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | Start recording the Google Meet via the Fireflies Chrome extension (Fireflies auto-join disabled) — using a one-click 'Start recording (extension)' launcher with a verbal-consent reminder that saves a timestamp note | From the PROSPECT's side: no Fireflies bot/participant and no Fireflies/Meet consent prompt. From the rep's side: a pre-call checklist chip confirms 'Recording: Chrome extension ✓ · bot OFF', and after the call a 'transcript linked to <lead>' confirmation shows the capture reached the pipeline. Verified live via Chrome DevTools. | Copy: (prospect: nothing) · rep: 'Recording: Chrome ext ✓ · bot OFF' + 'transcript linked to <lead>' · Look: no extra participant, no consent modal on the prospect side · Where: the Google Meet as the prospect sees it; the rep's prep card | Fireflies auto-join is OFF; capture is via the Chrome extension; the transcript still reaches the pipeline and links to the deal; a timestamped verbal-consent note is saved (GDPR basis) | a prospect-facing consent modal or a visible Fireflies bot participant appears (which could make the prospect decline to join) | — |
flowchart TD S10U1(["Start recording the Google Meet via the Fireflies Chrome extens…"])
Trigger: A deal reaches the 'Booked an appointment' stage; Studio prepares the sales-call materials.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | Drag/advance a deal into 'Booked an appointment' and watch its board card | — | auto-create a Studio project named after the prospect's business (idempotent; deferred if no website URL) | studio_project_id set | — |
| 2 | user | Open the Studio project and watch the prep chain run (English UI) | — | full-auto chain: scrape → images → rankings → keywords → generate → fix → competitors → copyguide → refine | prep chain runs unattended | — |
| 3 | user | Let the chain reach the Figma import step and open the resulting Figma file | — | via Figma MCP, import the generated HTMLs into a NEW Figma file named after the business, as real design objects (HTML-to-Figma equivalent) | figma_file_url set | — |
| 4 | user | Hover the arrow between two prep steps in the Studio run | — | reveal per-step re-run controls | re-run available | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | Drag/advance a deal into 'Booked an appointment' and watch its board card | A Studio project is auto-created for the deal, named after the prospect's business (from the verified business name, not the raw domain). If the website URL is missing, the card shows a one-field inline 'add website URL → start prep' prompt so it's fixed in place. | Copy: Studio project (business name) / inline 'add website URL → start prep' when missing · Look: deep-link live on the card; inline URL field when no URL · Where: board card + Studio | Studio project created on Booked; creation is idempotent (re-entering Booked doesn't duplicate); booking is never blocked on the URL | no project is created; the booking form is forced to require a URL; a duplicate Studio project is spawned on re-entry | — |
| 2 | Open the Studio project and watch the prep chain run (English UI) | The whole prep chain runs full-auto with NO mid-chain click, shown as one progress timeline with per-step status (+ ETA). Keyword curation is a non-blocking inline edit that never pauses the chain. A failed step offers a one-click retry rather than failing silently. The interface is entirely in English. | Copy: English step labels + per-step status/ETA + per-step retry · Look: a single progress timeline of auto-running steps (English UI) · Where: Studio Lab view | full_auto is the default for booking-created projects; the image-rewrite swap is OFF by default (see S13) | the chain stalls waiting for a manual click mid-chain; a failed step kills the whole chain silently; any Hungarian text in the Studio interface | — |
| 3 | Let the chain reach the Figma import step and open the resulting Figma file | A new Figma file named after the prospect's business is created, containing the generated pages imported as REAL Figma design objects (layers/frames the rep can tweak) — not flat PNGs — structured by page so it mirrors the site. The Figma link is shown in Studio and saved to the deal's CRM field (see S13). | Copy: Figma file named after the business, pages as editable design objects · Look: Figma layers/frames per page; link surfaced in Studio · Where: Figma + a link shown in Studio | HTMLs imported to Figma via the Figma MCP; the Figma file URL is saved to a CRM custom field on the deal | PNG-only/flat import; no Figma file; a file not named after the business; a partial failure reported as all-or-nothing instead of which pages imported; the link not persisted | — |
| 4 | Hover the arrow between two prep steps in the Studio run | Hovering an arrow reveals two clearly-labelled buttons — 'Rerun next step' and 'Rerun all steps from here' (e.g. 'Rerun from Generate →') — and each step shows a 'last run' timestamp so the rep knows what's stale. | Copy: 'Rerun next step' · 'Rerun all steps from here' + per-step 'last run' time · Look: two buttons revealed on hover over the step arrow · Where: between step cards in the Studio Lab run | re-running recomputes from the chosen step onward | no re-run controls; a re-run silently discards downstream manual edits without a confirm/warning | — |
flowchart TD S11U1(["Drag/advance a deal into 'Booked an appointment' and watch its…"]) S11U2(["Open the Studio project and watch the prep chain run (English U…"]) S11U3(["Let the chain reach the Figma import step and open the resultin…"]) S11U4(["Hover the arrow between two prep steps in the Studio run"]) S11U1 -->|auto-create a Studio project named after the…| S11U2 S11U2 -->|full-auto chain: scrape → images → rankings →…| S11U3 S11U3 -->|via Figma MCP, import the generated HTMLs int…| S11U4
Trigger: Before the sales call, the rep finds the generated HTML isn't good enough.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | From the board card, click 'Open in Studio' and review the generated page | — | — | reviewing prep | — |
| 2 | user | In the commenter UI, leave a comment describing the fix on the exact section that's wrong (the comment carries the current HTML + the requested change) | — | comment-driven edit applies to the working-version draft | working draft updated | — |
| 3 | user | Click 'Save version' | — | save the new HTML version | version saved | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | From the board card, click 'Open in Studio' and review the generated page | Studio opens directly to the generated page that needs work (deep-link, not the project root), with quality signals surfaced (e.g. broken-image / empty-section flags) and an optional side-by-side of generated-vs-original site so quality is judged in context. | Copy: the generated page + quality-signal flags · Look: the page in the Studio commenter UI, issues flagged · Where: Studio commenter UI | rep is reviewing the working version | no way to open the generated page for review; landing on the project root instead of the page that needs work | — |
| 2 | In the commenter UI, leave a comment describing the fix on the exact section that's wrong (the comment carries the current HTML + the requested change) | The comment is scoped to its section visually, an inline preview shows the edit applied before committing, and the section updates from the comment. The comment auto-resolves to done with a one-click inline undo. | Copy: comment with the requested fix + inline preview · Look: the targeted section updates; comment marked done with undo · Where: Studio commenter UI | the working-version draft is updated from the rep's comment-edit | the edit is lost or applies to the wrong section | — |
| 3 | Click 'Save version' | An 'HTML updated' notification pops (English UI) that links straight to the deliverable, and the view auto-returns to the exportable Deliverables view where this asset now sits alongside the other sales-call-prep assets. A version-history dropdown lets the rep revert if an edit made it worse. | Copy: notification 'HTML updated' (with a 'view in Deliverables' link) · Look: toast/notification, then the Deliverables view · Where: Studio — returns to the Deliverables view | a new HTML version is saved and is exportable alongside the other prep assets; prior versions are revertable | no save action; no 'HTML updated' notification; the view does not return to the exportable Deliverables view | — |
flowchart TD S12U1(["From the board card, click 'Open in Studio' and review the gene…"]) S12U2(["In the commenter UI, leave a comment describing the fix on the…"]) S12U3(["Click 'Save version'"]) S12U1 -->|reviewing prep| S12U2 S12U2 -->|comment-driven edit applies to the working-ve…| S12U3
Trigger: The prep assets are ready; the rep opens the Deliverables view.
| # | Actor | UI element (clicked / seen) | Copy shown | System action | Resulting state | Branch to |
|---|---|---|---|---|---|---|
| 1 | user | Open the 'Deliverables' panel in Studio | — | — | deliverables shown | — |
| 2 | user | Open the competitor-SEO FOMO deck from the panel | — | render the competitor/keyword/ranking data into a client-facing HTML deck | deck available | — |
| 3 | user | Open the Refine step's settings and check the image-rewrite copy toggle | — | skip image swap by default; pre-LLM swap guard so ON is safe | skip_image_swap=true by default | — |
| 4 | user | After the Figma file is created, open the deal's CRM record and check the Figma link field | — | write the Figma file URL to a CRM custom field (immediately on creation; retry if the channel is briefly down) | crm figma field set | — |
Proposed acceptance test-IDs: —
| # | You do | You should see | Element that changes (copy · look · where) | What changes underneath | Must NOT happen | UX suggestions |
|---|---|---|---|---|---|---|
| 1 | Open the 'Deliverables' panel in Studio | One English-UI Deliverables panel shows, side by side: HTML export, the embedded Figma file (the business-named file, live iframe with 'open in Figma' + 'copy link'), and the competitor-SEO FOMO deck — plus a 'Copy all prep links' action that grabs site + Figma + deck + export in one click. | Copy: 'Export HTML' · embedded Figma (open/copy) · 'Competitor insights' deck · 'Copy all prep links' (English) · Look: one co-located panel, controls side by side, consistent button styling · Where: Studio project — single Deliverables panel | export + Figma embed + competitor deck co-located in one panel | the controls are split across two places; any Hungarian text in the panel | — |
| 2 | Open the competitor-SEO FOMO deck from the panel | A polished, client-facing HTML competitor-insight deck that LEADS with one punchy stat (e.g. '3 competitors rank for X — you don't') to create FOMO, then the detail (scannable rows: competitor logo + top keywords + a gap callout). It's available BOTH as a standalone share-token URL and bundled inside the export package. | Copy: competitor-insight deck, FOMO headline first, scannable competitor rows · Look: designed client-facing HTML, presentable · Where: standalone share URL + inside the export bundle | the deck is served at a share-token URL AND included in the export package | the competitor data exists only as internal PNGs; the deck is not shareable | — |
| 3 | Open the Refine step's settings and check the image-rewrite copy toggle | The image-rewrite copy step is an on/off toggle, OFF by default and labelled with the risk ('may alter images'); with it OFF, refined pages keep their original images intact. When turned ON, the swap runs on pre-LLM HTML / a src-restore guard prevents the copy LLM from breaking images, with a before/after preview. | Copy: image-rewrite toggle (OFF by default, 'may alter images') · Look: an on/off toggle on the Refine card · Where: Studio Refine step settings | image swap is skipped by default; ON is made safe via a pre-LLM swap / src-restore guard | refined pages have broken/mismatched images by default; the toggle defaults to ON | — |
| 4 | After the Figma file is created, open the deal's CRM record and check the Figma link field | The deal carries a dedicated CRM custom field with the Figma file URL as a CLICKABLE link (opens Figma in one click). It is written immediately on Figma-file creation so it's never lost if the rep closes Studio. | Copy: CRM field: Studio/Figma link (clickable) · Look: a clickable Figma URL in the deal's CRM fields · Where: the deal's CRM custom fields | a new CRM custom field carries the Figma link; the Studio→pipeline write-back retries if briefly down | the Figma link is created but never persisted to the CRM | — |
flowchart TD S13U1(["Open the 'Deliverables' panel in Studio"]) S13U2(["Open the competitor-SEO FOMO deck from the panel"]) S13U3(["Open the Refine step's settings and check the image-rewrite cop…"]) S13U4(["After the Figma file is created, open the deal's CRM record and…"]) S13U1 -->|deliverables shown| S13U2 S13U2 -->|render the competitor/keyword/ranking data in…| S13U3 S13U3 -->|skip image swap by default; pre-LLM swap guar…| S13U4
Conditions on the arrows; colours follow the path-type legend. Per-scenario sub-flows appear inside each scenario above.
No global flowchart supplied — see per-scenario sub-flows above.
No copy index supplied.
| State | Meaning | Entered by | Exits to |
|---|---|---|---|
appt_booked | Booked / Sales Call Prep | booking / manual book / drag | sales_call (prep done) / back on reschedule |
sales_call | Sales Call / Proposal | prep done, or a manual reschedule when prep_done | won / lost / reschedule |
call_occurred | the Google Meet sales call has happened | Fireflies / transcript hook | transcript_ready |
Generated by the user-journeys skill on 2026-06-28 · hosted at https://bnf-2026-06-28-01-journeys.pages.dev. Rendering: Mermaid flowchart syntax. No screenshots — this is a behavioral spec, not a visual QA artifact.