wireframe-spec · supabase_json
Bezel Team wireframe-spec design-001
wireframe-spec artifact · for Bezel Team · phase design-001 · status draft
screens
| id | name | route | layout | states | purpose |
|---|---|---|---|---|---|
| project.overview | Project Overview + Next Action | /projects/:projectId | - top: Project title, phase label, status, and primary next action. - left: Persistent phase rail with current phase highlighted and gate status indicators. - main: 5 items - right: 4 items | - live: Shows live product link, recent deploys, and iteration CTA. - error: Shows recoverable error and Dreamborn operator escalation. - blocked: Next Action switches to blocker resolution and blocker card moves to top. - building: Shows build progress summary and review-ready work. - in progress: Shows current phase and one next action. - not started: Shows welcome/start state and explains production build process. - ready to build: Shows all pre-build gates complete and approve/dispatch CTA for operator. - ready to release: Shows release checklist and deploy review CTA. - waiting for review | Make the customer feel oriented immediately. This is the project home and the safest re-entry point. |
| discovery.chat | Discovery Conversation | /projects/:projectId/discovery | - top: Current step header: "Discovery: help Bezel understand the product" plus progress through discovery sections. - left: Phase rail with Discovery active. - main: 4 items - right: 5 items | - empty: Shows starter prompt and explains discovery outcome. - error: Shows retry and preserves typed answer. - active: Shows conversation, extracted facts, open questions. - thinking: Bezel is generating next question or extracting facts. - autosaved: Subtle save indicator only. - ready to generate intent: Right panel shows readiness checklist and Generate Intent Draft CTA. | Use back-and-forth conversation to turn a raw idea into structured product facts while keeping the customer oriented. |
| screen.map | Screen Map | /projects/:projectId/screens | - top: Current step header: "Review Screen Map" with count of must/should/later screens. - left: Phase rail with Screens active. - main: 5 items - right: 4 items | - empty: No screens generated yet; points back to discovery/intent. - error: Generation or save failed with retry. - review: Customer reviews proposed screens and open questions. - approved: All must-have screens approved; next action is wireframe review. - generating: Bezel is generating proposed screen inventory from intent/opportunities. - approved partial: Some must-have screens approved, remaining blockers visible. - changes requested: Shows revision notes and pending updates. | Let the customer review and approve the product screen inventory before wireframes, architecture, and build. |
Agent Handoff
Start Here
wireframe-spec artifact · for Bezel Team · phase design-001 · status draft
Completion Evidence
No explicit evidence field yet. Require tests, screenshots, linked PRs, or reviewed outputs before marking complete.
Artifact Shape
- kind: bezel.wireframe-spec
- name: First Wireframe Spec: Orientation, Discovery, Screen Map
- purpose: Define the first three customer-visible screens for Dreamborn Build so Bezel can dogfood its screen-by-screen design process before implementation.
- screens: 3 items
- version: 1
- fidelity: Low-to-mid fidelity structured HTML wireframes. These are not final visual design; they define layout, hierarchy, controls, state requirements, and review behavior.
- phase id: design-001
- created at: 2026-05-04T12:53:10.232Z
- project id: bezel-team
- updated at: 2026-05-04T14:57:54.482Z
- shell pattern: domain: string, product_header: string, product_submark: string, orientation_rule: string, persistent_regions: object
- next wireframe batch: 4 items
Structured Payload
Machine-readable source fields
kind
bezel.wireframe-spec
name
First Wireframe Spec: Orientation, Discovery, Screen Map
purpose
Define the first three customer-visible screens for Dreamborn Build so Bezel can dogfood its screen-by-screen design process before implementation.
screens
| id | name | route | layout | states | purpose |
|---|---|---|---|---|---|
| project.overview | Project Overview + Next Action | /projects/:projectId | - top: Project title, phase label, status, and primary next action. - left: Persistent phase rail with current phase highlighted and gate status indicators. - main: 5 items - right: 4 items | - live: Shows live product link, recent deploys, and iteration CTA. - error: Shows recoverable error and Dreamborn operator escalation. - blocked: Next Action switches to blocker resolution and blocker card moves to top. - building: Shows build progress summary and review-ready work. - in progress: Shows current phase and one next action. - not started: Shows welcome/start state and explains production build process. - ready to build: Shows all pre-build gates complete and approve/dispatch CTA for operator. - ready to release: Shows release checklist and deploy review CTA. - waiting for review | Make the customer feel oriented immediately. This is the project home and the safest re-entry point. |
| discovery.chat | Discovery Conversation | /projects/:projectId/discovery | - top: Current step header: "Discovery: help Bezel understand the product" plus progress through discovery sections. - left: Phase rail with Discovery active. - main: 4 items - right: 5 items | - empty: Shows starter prompt and explains discovery outcome. - error: Shows retry and preserves typed answer. - active: Shows conversation, extracted facts, open questions. - thinking: Bezel is generating next question or extracting facts. - autosaved: Subtle save indicator only. - ready to generate intent: Right panel shows readiness checklist and Generate Intent Draft CTA. | Use back-and-forth conversation to turn a raw idea into structured product facts while keeping the customer oriented. |
| screen.map | Screen Map | /projects/:projectId/screens | - top: Current step header: "Review Screen Map" with count of must/should/later screens. - left: Phase rail with Screens active. - main: 5 items - right: 4 items | - empty: No screens generated yet; points back to discovery/intent. - error: Generation or save failed with retry. - review: Customer reviews proposed screens and open questions. - approved: All must-have screens approved; next action is wireframe review. - generating: Bezel is generating proposed screen inventory from intent/opportunities. - approved partial: Some must-have screens approved, remaining blockers visible. - changes requested: Shows revision notes and pending updates. | Let the customer review and approve the product screen inventory before wireframes, architecture, and build. |
version
1
fidelity
Low-to-mid fidelity structured HTML wireframes. These are not final visual design; they define layout, hierarchy, controls, state requirements, and review behavior.
phase id
design-001
created at
2026-05-04T12:53:10.232Z
project id
bezel-team
updated at
2026-05-04T14:57:54.482Z
shell pattern
domain
build.dreamborn.ai
product header
Dreamborn Build
product submark
Bezel
orientation rule
Every screen must answer: where am I, what am I doing, what needs my decision, what is blocked, and what happens next.
persistent regions
- Left phase rail: Discovery, Intent, AI-First Opportunity, Screens, Wireframes, Architecture, Build Plan, Build, Release, Operate
- Top current-step header with project name, phase, status, and next action
- Main work area for the current artifact/screen
- Right contextual panel for Next Action, Blockers/Open Questions, Ask Bezel, and Model Perspectives where relevant
next wireframe batch
- intent.review
- opportunity.map
- wireframe.review
- screen.state.matrix
playground generation
trigger
manual Generate Playground button on artifact view
protocol
id
8f3eee50-794f-4685-848a-b2f3b62ae9a3
phase id
design-001
artifact type
playground-generation-protocol
expected output
Sandboxed HTML preview of project.overview, discovery.chat, and screen.map using artifact sample data.
feedback targets
- project.overview
- discovery.chat
- screen.map
- PhaseRail
- CurrentStepHeader
- NextActionPanel
- AskBezelPanel
- ModelResearchPanel
- ScreenCard
acceptance criteria
- Generated playground reflects wireframe structure
- No live secrets or privileged APIs
- Customer can attach feedback to screen/component ids
- Artifact remains source of truth
generate from this artifact
true
cross screen requirements
- All screens use the same phase rail and current-step header.
- All review screens include Ask Bezel scoped to current artifact/screen.
- All accepted decisions become structured artifact updates or decision records.
- No internal infrastructure terminology is exposed.
- Every screen supports loading, error, and blocked states explicitly.
- Wireframe artifact should support Generate Playground as a review aid before architecture/build plan approval.
review questions for justin
- Does project.overview feel like the right home/re-entry screen?
- Should discovery be more chat-first or more structured-section-first?
- Should screen.map use columns by journey, role, or priority first?
- Are these the right first three wireframes to dogfood before moving to architecture?