Generated Concepts (2b) — scroll, select, refine

Tether: This is the primary output surface after concept alignment (2a) and Kinsley’s Figma Make (or equivalent) pass: not a single static mock—it is a review + iteration workspace that feeds Organize (2c) and later three-pillar analysis (3).


1. Job to be done

  1. User sees every variation the team generated (minimum two visible in the series; copy may say “Kinsley has generated N variations…”).
  2. User scrolls through previews (carousel / horizontal scroll / paged list—one primary pattern, consistent with ux-design-specification.md §11.3).
  3. User selects one concept to treat as baseline (optional: retain additional alternates as non-baseline references).
  4. Only for the selected concept, show Refine: NL instructions, Breakout window (external tab), submit, and carry-back (link / attach / import).
  5. Persist selection + refinements so 2c receives initial designs, concept labels, and core needs from step 1 as a handoff bundle—not disembodied features.

2. Required layout (center workspace)

Block Content
Header Title: Generated Concepts. Subcopy: e.g. “Select one to establish the baseline for the Organize phase.” (exact tone can vary; meaning must not).
Carousel / series Cards with preview (thumbnail or embedded low-fi), direction title, optional one-line rationale. Keyboard and pointer scroll; selected state visually distinct (border, check, radio).
Refine (selected only) Section title e.g. Iterate on this concept. NL textarea (placeholder: concrete UI feedback). Breakout window button (external-link affordance). Send / paper-plane for refinement request.
Team room Kinsley + John can acknowledge refinements; job states if async (NFR-P3).

Right strip — artifacts: Concept group shows per-variation links/thumbnails and sync state.


3. Handoff to 2c (data contract for engineering)

Organize must be able to show, without hunting:

See ux-screen-spec-step-2c-organize.md §0 for the same contract from the Organize side.


4. Reject in review


5. Acceptance checklist


File aligns with prd.md steps 2b/2c/3, ux-design-specification.md §10.1 and UX-DR16.