add wireframes from current implementation; supersede claude-design
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>
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user