Wireframe generation from workflow definitions

[GarthDB]

Context

Part of Epic #732 — Phase 4: Output generators and authoring app integration.

Depends on: #796 (authoring workflow definitions must be complete first)

Goal

Use Claude to generate UI wireframes from the workflow definitions + spec schemas, giving the design team a concrete starting point for the authoring app. The output opens the designer conversation and informs the app architecture.

Work needed

• For each workflow in docs/authoring-app/workflows/, generate annotated wireframe descriptions covering:
  • Screen layout and component placement
  • Data fields and their validation states
  • Navigation flow between screens
  • Error/success states
• Produce HTML/CSS mockups or structured descriptions a designer can translate to high-fidelity designs
• Collect designer feedback (async, via PR comments or dedicated review session)

Notes

• The authoring app is planned as an Electron desktop app, authenticated via GitHub PAT/OAuth, authoring PRs across multiple repos
• Wireframes should reflect this context (desktop viewport, file-system-like navigation, PR workflow)
• Figma Variables PoC output (Figma Variables output (proof of concept) #795) may suggest additional screens (Figma sync status, export progress)

Acceptance criteria

• Wireframe documents exist for all workflows defined in Authoring workflow definitions #796
• Design team has reviewed and provided feedback
• Key open questions for the architecture (see Wireframe generation from workflow definitions #797) are identified