[Epic] Phase 4: Output generators and authoring app integration

[GarthDB]

Description

Build output generators that produce consumable artifacts from cascade-format design tokens, starting with the highest-priority legacy JSON output and a Figma variables proof of concept. The longer-term goal is an authoring app (Electron desktop) that lets designers create and edit tokens visually, authoring changes as GitHub PRs.

Sub-issues

• Production-grade legacy JSON output #794 — Production-grade legacy JSON output
• Figma Variables output (proof of concept) #795 — Figma Variables output (proof of concept)
• Authoring workflow definitions #796 — Authoring workflow definitions
• Wireframe generation from workflow definitions #797 — Wireframe generation from workflow definitions
• Authoring app architecture design document #798 — Authoring app architecture design document

Priority sequencing

Near-term (active)

1. Production-grade legacy JSON output #794 Legacy JSON output — Production-grade migrate legacy-output for generating @adobe/spectrum-tokens from cascade source. This is the highest priority: existing platform implementations consume the legacy format via custom scripts.

2. Figma Variables output (proof of concept) #795 Figma variables output (proof of concept) — Generate Figma Variables from resolved cascade tokens via CLI → Figma REST Variables API. Opens the conversation with designers about the authoring app. Note: Figma plugins cannot use WASM, so this is a Rust CLI command. Adobe has confirmed Enterprise plan access (Variables API confirmed working).

3. Authoring workflow definitions #796 Authoring workflow definitions — Formalize the git-based editing model: what workflows exist (create token, deprecate, rename, add dimension variant), how edits map to branches/PRs, what validation feedback looks like in real-time. These definitions serve as both structured requirements and input for wireframe generation.

4. Wireframe generation from workflow definitions #797 Wireframe generation — Use Claude to generate UI wireframes from the workflow definitions + spec schemas, giving designers a starting point for the authoring app UX. Depends on Authoring workflow definitions #796.

5. Authoring app architecture design document #798 Authoring app architecture — Technical design document for the Electron desktop app (Electron + napi-rs, GitHub auth, multi-repo model, real-time validation). Depends on Authoring workflow definitions #796 and Wireframe generation from workflow definitions #797.

Medium-term

• Authoring app (Electron desktop) — Authenticates with GitHub (PAT or OAuth), reads/writes token data across multiple repos, authors changes as pull requests. Uses the Rust core via napi-rs Node.js bindings.
• CSS custom properties generator — Produce CSS files from resolved tokens
• DTCG export — Export to W3C Design Tokens Community Group format (per RFC [DRAFT RFC] DTCG Format as Additional Release Output #627)

Future scope

• Swift/Kotlin constants generators — Produce native source files from resolved tokens
• Plugin system — Trait-based plugin architecture for custom output generators
• Scaffold command — design-data scaffold to generate a new platform manifest
• LSP (Language Server Protocol) — Editor integration for autocomplete, hover, validation
• Watch mode — File watcher for live validation on save

Architecture

Cascade tokens (source of truth)
├── CLI: design-data legacy-output → @adobe/spectrum-tokens (JSON)
├── CLI: design-data figma-export → Figma REST Variables API
├── Authoring app (Electron + napi-rs)
│   ├── GitHub auth (PAT/OAuth)
│   ├── Multi-repo token editing
│   ├── Real-time validation (SPEC rules)
│   └── PR creation workflow
└── Future generators (CSS, DTCG, Swift, Kotlin)

References

• #625 — Token Authoring Workflow
• #627 — DTCG Format
• #715 — Distributed Design Data Architecture
• #714 — Design Data Specification
• #623 — Token Lifecycle Metadata

[GarthDB]

#795 status update: PoC implemented in PR #804. CLI commands figma read and figma export (with --dry-run) are working against a test file. Successfully exported 2,029 variables to .Color theme and .Platform scale collections. See #795 comment for detailed findings on naming conventions, type mapping, and open follow-ups (ID persistence, VARIABLE_ALIAS, Mobile mode).