adobe / adobe/spectrum-design-data

Wireframe generation from workflow definitions

Open
#797 0 comments 0 reactions 0 assignees View on GitHub
design-data-spec platform-onboarding
Dominant language
Rust
Stars
153
Forks
35
Avg merge
7h 54m
Merged PRs (30d)
111

Description

## Context

Part of [Epic #732](https://github.com/adobe/spectrum-design-data/issues/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 (#795) may suggest additional screens (Figma sync status, export progress)

## Acceptance criteria

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

Contributor guide

Open the contributing guide

Research direction

Start by reading #796 and the workflow definitions in docs/authoring-app/workflows/. For each workflow, produce annotated wireframe documents or HTML/CSS mockups covering layouts, fields, navigation, and error or success states in the Electron desktop-app context. Collect design-team feedback and record the architecture questions identified during review.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, electron, html
Domain
design, desktop, documentation
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.