jpmschweitzerandClaude
b0a826cfd4
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>
54 lines
1.8 KiB
Markdown
54 lines
1.8 KiB
Markdown
# 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/`](../claude-design/), which are kept for
|
|
historical context and design tokens.
|
|
|
|
## Set
|
|
|
|
### Welcome
|
|
- [`welcome/welcome-screen.json`](welcome/welcome-screen.json) /
|
|
[.png](welcome/welcome-screen.png)
|
|
— first-run landing: logo + wordmark, START / RECENT columns,
|
|
Tips card, status line.
|
|
|
|
### Main view
|
|
- [`main/main-view.json`](main/main-view.json) /
|
|
[.png](main/main-view.png)
|
|
— three-column default: tickets sidebar, Claude pane, empty
|
|
context panel.
|
|
- [`main/editor-above-claude.json`](main/editor-above-claude.json) /
|
|
[.png](main/editor-above-claude.png)
|
|
— D-49 editor mode: editor above Claude in the middle column,
|
|
divider between, prompt Y stays fixed.
|
|
- [`main/focus-mode.json`](main/focus-mode.json) /
|
|
[.png](main/focus-mode.png)
|
|
— D-52 focus mode: full-window Claude pane, sidebars hidden,
|
|
Esc-to-exit hint in the title bar.
|
|
- [`main/sidebar-collapsed.json`](main/sidebar-collapsed.json) /
|
|
[.png](main/sidebar-collapsed.png)
|
|
— D-51 12px spine: sidebar collapsed to a vertical strip with
|
|
rotated label and activity badge.
|
|
- [`main/ticket-detail.json`](main/ticket-detail.json) /
|
|
[.png](main/ticket-detail.png)
|
|
— context panel showing a selected ticket with metadata and
|
|
description.
|
|
|
|
## Updating
|
|
|
|
1. Edit the `.json` (source of truth).
|
|
2. Re-export with the `frame0-wireframe` skill:
|
|
```
|
|
.claude/skills/frame0-wireframe/scripts/frame0-sync.py \
|
|
export docs/wireframes/<dir>/<name>.json \
|
|
docs/wireframes/<dir>/<name>.png
|
|
```
|
|
3. Commit both files.
|
|
|
|
Frame0 must be running locally for export. Don't pull from Frame0 —
|
|
the JSON is authoritative.
|