Five wireframes generated via the frame0-wireframe skill, sourced from JSON and rendered to PNG. Cover the welcome screen and four main-view states: default, editor-above-Claude (D-49), focus mode (D-52), sidebar-collapsed (D-51), and ticket detail in the context panel. The hi-fi mockups under docs/claude-design/ are now reference-only; README marks the bundle as superseded and points at docs/wireframes/ as the canonical source. The token files there still feed the runtime themes per D-43 / D-44, so the bundle is kept rather than removed. Co-Authored-By: Claude <noreply@anthropic.com>
clide wireframes
Canonical layout reference, generated from the actual implementation
via the frame0-wireframe skill. Each .json is the source of
truth; the .png is rendered from it.
These supersede the hi-fi mockups under
../claude-design/, which are kept for
historical context and design tokens.
Set
Welcome
welcome/welcome-screen.json/ .png — first-run landing: logo + wordmark, START / RECENT columns, Tips card, status line.
Main view
main/main-view.json/ .png — three-column default: tickets sidebar, Claude pane, empty context panel.main/editor-above-claude.json/ .png — D-49 editor mode: editor above Claude in the middle column, divider between, prompt Y stays fixed.main/focus-mode.json/ .png — D-52 focus mode: full-window Claude pane, sidebars hidden, Esc-to-exit hint in the title bar.main/sidebar-collapsed.json/ .png — D-51 12px spine: sidebar collapsed to a vertical strip with rotated label and activity badge.main/ticket-detail.json/ .png — context panel showing a selected ticket with metadata and description.
Updating
- Edit the
.json(source of truth). - Re-export with the
frame0-wireframeskill:.claude/skills/frame0-wireframe/scripts/frame0-sync.py \ export docs/wireframes/<dir>/<name>.json \ docs/wireframes/<dir>/<name>.png - Commit both files.
Frame0 must be running locally for export. Don't pull from Frame0 — the JSON is authoritative.