Single block for Figma Make / Figma AI / Claude → design generation: use figma-prompt-kinsley-quorum.md (Kinsley · Product Designer)—do not summarize it; paste the fenced prompt verbatim or models invent “Engagement / Trust / Friction” and fake 4-step rails again.
Paste this file into your Figma file description (or share with whoever is laying out frames).
Source specs: ux-design-specification.md, ux-color-themes.html, ux-design-directions.html (same folder).
Low-fidelity wireframes of Quorum’s desktop app shell and key pipeline screens — gray boxes + labels are enough. This is structure, not marketing visuals or final UI.
quorumPipeline steps (1, 2a, 2b, 2c, 3, 4, 5, 5.25, 5.5, 6–12)—scroll or grouped sections, never a fake short list like “Organize → Filter → Sync”. Step 3 is labeled Three-pillar analysis and expands to Desirability → Feasibility → Viability nested under it. See ux-design-specification.md §4.2.1.| Setting | Value |
|---|---|
| File name | Quorum — UX wireframes (shell + key flows) |
| Primary frame | Desktop 1440 × 900 (or 1024 height). |
| Style | Wireframe: mid-gray fills, 1px borders, Inter labels. No illustration polish required. |
Layout: Three columns inside a top app bar.
| Column | Width (px) | Content (labels on boxes) |
|---|---|---|
| Left: Pipeline rail | 256 (range 240–280) | Full methodology: show ≥10 visible rows (scroll) using PRD-accurate labels—e.g. “1 Idea session”, “2a Concept alignment”, “2b Figma Make concepts”, “2c Organize vision”, “3 Three-pillar analysis” (expand to show Desirability / Feasibility / Viability indented), then “4 PRD gen”, “5 Journeys”, “5.25 Refine”, “5.5 Motion”, “6 Roadmap”, “7 Cost”, “8 Pitch”, “9 Sprint”, “10a Build”… ✓ on completed, current highlighted, sticky “You are here” optional. Save point / Resume at bottom. Do not use only “Filter” or invented “Conflict / Sync” as the spine. |
| Center: Team room | Fluid (min ~640 at 1440 total) | Roster strip (small avatars + role names). Below: transcript area (2–3 fake agent messages + 1 user). Bottom: composer (textarea + Send). |
| Right: Artifacts | 360 (range 320–400) | Grouped list: Vision · Concept · PRD · Journey · Board — mostly empty or one row each. Optional preview split (narrow second column inside this panel). |
App bar (full width, top): Workspace name · current step title · phase chip Planning · user menu · Settings icon.
Same shell. Center: show John (PO) leading — prompt bubbles or numbered prompts (problem, user, risks). Bottom: artifact panel shows “Figma Make prompt (draft)” with Copy button (label only).
Follow ux-screen-spec-step-2b-generated-concepts.md. Same shell; rail highlights 2b. Center: horizontal scroll of 3 concept preview cards (product-specific mocks, not generic dashboards); one selected. Below selection only: Iterate on this concept — Breakout window, NL field, send. Right strip: concept artifacts per variation.
Do not invent dashboards, fake metrics, or generic PM chrome. Follow ux-screen-spec-step-2c-organize.md (Kinsley / Product Designer spec).
Same shell. Team room: John (and team) explains that themes are proposed for user validation—not final. Above the board: OrganizeContextStrip — baselined 2b designs, concept labels, core needs from ideation (collapsible OK). Center: Theme cards (or columns): each has editable title, bullet list of feature/capability items (real labels, not lorem), dependency hints (e.g. “→ Theme A”), optional small concept thumbnails / Figma link from 2b per theme. Drag item between themes if showing interaction. Primary CTA: Lock organization (or Confirm & continue to three-pillar analysis). Secondary: Regroup / job status if clustering is async.
Left rail: Still shows the entire pipeline (as Frame 1). Step 3 row is expanded: indented children Desirability → Feasibility → Viability with states. Other steps (1, 2a–c, 4–12) remain visible above/below (scroll). “Why these pillars?” next to step 3 or pillar group; optional Frame 4b modal with education copy.
Never replace the full list with only three pillar rows—users must see the whole method.
Center: three columns — Desirability | Feasibility | Viability with evidence cards; Argue back and Override visible.
Right: Concept artifact + live preview (“updates with scope”).
Dark overlay on Frame 4. Modal: title Override pillar recommendation · multiline Reason · short audit notice text · Cancel / Confirm override.
Same shell. Banner or card at top of team room: “You’re back — here’s what you already have” + bullet list (organized vision, concept link, …) · button Continue here.
Simpler layout OK: horizontal columns — Backlog | In progress | In review | Done | Blocked.
One story card enlarged or separate zoom: Title · acceptance criteria checklist · Design link · Motion link · Export for Cursor (label).
Separate page feel: no agent avatars in main content. Sections: Members · Roles · Billing · Integrations (Connected / Error badge) · Audit log (table placeholder).
Use as semantic variables (not random hex in rectangles):
| Token | Hex |
|---|---|
| canvas | #0f1419 |
| elevated | #1a222c |
| border | #2a3544 |
| text-primary | #e8eaed |
| text-muted | #8b98a8 |
| accent-human (CTA) | #e8a54b |
| accent-agent | #3db8a6 |
| evidence | #243044 |
| warn | #d4a534 |
| danger | #e85d5d |
| success | #4caf7a |
(Light theme pairings live in ux-color-themes.html if you duplicate the variable collection.)
You can walk a PM/engineer through: shell, filter, override, resume, board, settings without opening the Markdown specs.