jpmschweitzer/clide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
b0a826cfd4f52a7886b99c82ca899c9891704705
clide/docs/wireframes/main/main-view.json
T
jpmschweitzerandClaude b0a826cfd4 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>
2026-05-06 11:13:52 +02:00

448 lines
11 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{
"name": "Main View — project loaded",
"shapes": {
"canvas": {
"type": "Rectangle",
"left": 40, "top": 40, "width": 1400, "height": 860,
"fillColor": "#0e1014",
"strokeColor": "#1c2028",
"corners": [4, 4, 4, 4]
},
"title-bar": {
"type": "Rectangle",
"parent": "canvas",
"left": 40, "top": 40, "width": 1400, "height": 36,
"fillColor": "#1c2028",
"strokeColor": "#1c2028",
"corners": [4, 4, 0, 0]
},
"title-bar-text": {
"type": "Text",
"parent": "title-bar",
"left": 720, "top": 50,
"text": "clide › clide ⌄",
"fontColor": "#a0a8b8",
"fontSize": 12
},
"sidebar": {
"type": "Rectangle",
"parent": "canvas",
"left": 40, "top": 76, "width": 360, "height": 786,
"fillColor": "#13161c",
"strokeColor": "#1c2028"
},
"sidebar-search": {
"type": "Rectangle",
"parent": "sidebar",
"left": 56, "top": 92, "width": 280, "height": 32,
"fillColor": "#0e1014",
"strokeColor": "#262a32",
"corners": [4, 4, 4, 4]
},
"sidebar-search-icon": {
"type": "Text",
"parent": "sidebar-search",
"left": 68, "top": 100,
"text": "⌕",
"fontColor": "#5a6478",
"fontSize": 14
},
"section-in-progress": {
"type": "Text",
"parent": "sidebar",
"left": 56, "top": 142,
"text": "▾ IN PROGRESS · 1",
"fontColor": "#7a8294",
"fontSize": 11
},
"ticket-1": {
"type": "Rectangle",
"parent": "sidebar",
"left": 56, "top": 166, "width": 328, "height": 64,
"fillColor": "#0e1014",
"strokeColor": "#262a32",
"corners": [4, 4, 4, 4]
},
"ticket-1-id": {
"type": "Text",
"parent": "ticket-1",
"left": 70, "top": 178,
"text": "● T-21 ← T-4",
"fontColor": "#7a8294",
"fontSize": 11
},
"ticket-1-title": {
"type": "Text",
"parent": "ticket-1",
"left": 70, "top": 200,
"text": "implement welcome screen per hi-fi design",
"fontColor": "#e8ecf2",
"fontSize": 13
},
"section-ready": {
"type": "Text",
"parent": "sidebar",
"left": 56, "top": 250,
"text": "▾ READY · 3",
"fontColor": "#7a8294",
"fontSize": 11
},
"ticket-2": {
"type": "Rectangle",
"parent": "sidebar",
"left": 56, "top": 274, "width": 328, "height": 56,
"fillColor": "#13161c",
"strokeColor": "#1c2028"
},
"ticket-2-id": {
"type": "Text",
"parent": "ticket-2",
"left": 70, "top": 282,
"text": "● T-17 ← T-8",
"fontColor": "#7a8294",
"fontSize": 11
},
"ticket-2-title": {
"type": "Text",
"parent": "ticket-2",
"left": 70, "top": 302,
"text": "add dart doc generation to CI",
"fontColor": "#a0a8b8",
"fontSize": 12
},
"ticket-3": {
"type": "Rectangle",
"parent": "sidebar",
"left": 56, "top": 332, "width": 328, "height": 56,
"fillColor": "#13161c",
"strokeColor": "#1c2028"
},
"ticket-3-id": {
"type": "Text",
"parent": "ticket-3",
"left": 70, "top": 340,
"text": "● T-24 ← T-3",
"fontColor": "#7a8294",
"fontSize": 11
},
"ticket-3-title": {
"type": "Text",
"parent": "ticket-3",
"left": 70, "top": 360,
"text": "secondary Claude pane UI wiring",
"fontColor": "#a0a8b8",
"fontSize": 12
},
"section-backlog": {
"type": "Text",
"parent": "sidebar",
"left": 56, "top": 408,
"text": "▾ BACKLOG · 33",
"fontColor": "#7a8294",
"fontSize": 11
},
"ticket-4": {
"type": "Rectangle",
"parent": "sidebar",
"left": 56, "top": 432, "width": 328, "height": 50,
"fillColor": "#13161c",
"strokeColor": "#1c2028"
},
"ticket-4-id": {
"type": "Text",
"parent": "ticket-4",
"left": 70, "top": 440,
"text": "● T-7 ← T-7",
"fontColor": "#7a8294",
"fontSize": 11
},
"ticket-4-title": {
"type": "Text",
"parent": "ticket-4",
"left": 70, "top": 458,
"text": "Tier 5 — canvas and graph view",
"fontColor": "#a0a8b8",
"fontSize": 12
},
"ticket-5": {
"type": "Rectangle",
"parent": "sidebar",
"left": 56, "top": 484, "width": 328, "height": 50,
"fillColor": "#13161c",
"strokeColor": "#1c2028"
},
"ticket-5-id": {
"type": "Text",
"parent": "ticket-5",
"left": 70, "top": 492,
"text": "● T-23 ← T-4",
"fontColor": "#7a8294",
"fontSize": 11
},
"ticket-5-title": {
"type": "Text",
"parent": "ticket-5",
"left": 70, "top": 510,
"text": "wire command palette keybinding",
"fontColor": "#a0a8b8",
"fontSize": 12
},
"sidebar-rail": {
"type": "Rectangle",
"parent": "canvas",
"left": 40, "top": 822, "width": 360, "height": 40,
"fillColor": "#13161c",
"strokeColor": "#1c2028"
},
"rail-icon-1": {
"type": "Text",
"parent": "sidebar-rail",
"left": 68, "top": 832,
"text": "▤",
"fontColor": "#e8ecf2",
"fontSize": 16
},
"rail-icon-2": {
"type": "Text",
"parent": "sidebar-rail",
"left": 110, "top": 832,
"text": "◇",
"fontColor": "#7a8294",
"fontSize": 16
},
"rail-icon-3": {
"type": "Text",
"parent": "sidebar-rail",
"left": 152, "top": 832,
"text": "▢",
"fontColor": "#7a8294",
"fontSize": 16
},
"rail-icon-4": {
"type": "Text",
"parent": "sidebar-rail",
"left": 194, "top": 832,
"text": "⑂",
"fontColor": "#7a8294",
"fontSize": 16
},
"rail-icon-5": {
"type": "Text",
"parent": "sidebar-rail",
"left": 236, "top": 832,
"text": "⌕",
"fontColor": "#7a8294",
"fontSize": 16
},
"rail-icon-6": {
"type": "Text",
"parent": "sidebar-rail",
"left": 278, "top": 832,
"text": "!",
"fontColor": "#7a8294",
"fontSize": 16
},
"claude-pane": {
"type": "Rectangle",
"parent": "canvas",
"left": 400, "top": 76, "width": 660, "height": 786,
"fillColor": "#0e1014",
"strokeColor": "#1c2028"
},
"claude-header": {
"type": "Rectangle",
"parent": "claude-pane",
"left": 400, "top": 76, "width": 660, "height": 36,
"fillColor": "#13161c",
"strokeColor": "#1c2028"
},
"claude-title": {
"type": "Text",
"parent": "claude-header",
"left": 416, "top": 86,
"text": "claude — primary",
"fontColor": "#e8ecf2",
"fontSize": 12
},
"claude-subtitle": {
"type": "Text",
"parent": "claude-header",
"left": 416, "top": 100,
"text": "tmux · clide-claude-var-mnt-data-projects-clide",
"fontColor": "#7a8294",
"fontSize": 10
},
"claude-logo-icon": {
"type": "Text",
"parent": "claude-pane",
"left": 416, "top": 142,
"text": "▰▰",
"fontColor": "#d97757",
"fontSize": 12
},
"claude-banner-name": {
"type": "Text",
"parent": "claude-pane",
"left": 442, "top": 142,
"text": "Claude Code v2.1.128",
"fontColor": "#e8ecf2",
"fontSize": 12
},
"claude-banner-model": {
"type": "Text",
"parent": "claude-pane",
"left": 442, "top": 158,
"text": "Opus 4.7 (1M context) with high effort · Claude Max",
"fontColor": "#7a8294",
"fontSize": 11
},
"claude-banner-cwd": {
"type": "Text",
"parent": "claude-pane",
"left": 442, "top": 174,
"text": "/var/mnt/data/projects/clide",
"fontColor": "#7a8294",
"fontSize": 11
},
"claude-message-1": {
"type": "Text",
"parent": "claude-pane",
"left": 416, "top": 230,
"text": "› wireframe the main view",
"fontColor": "#a0a8b8",
"fontSize": 12
},
"claude-response-1": {
"type": "Text",
"parent": "claude-pane",
"left": 416, "top": 258,
"text": "● Building wireframe from current implementation. Three\n columns: sidebar (tickets shown), Claude pane, context\n panel. Let me check the tab contributions first.",
"fontColor": "#e8ecf2",
"fontSize": 12
},
"claude-mcp-warn": {
"type": "Text",
"parent": "claude-pane",
"left": 416, "top": 720,
"text": "1 MCP server failed · /mcp",
"fontColor": "#d97757",
"fontSize": 11
},
"claude-prompt-divider": {
"type": "Rectangle",
"parent": "claude-pane",
"left": 400, "top": 752, "width": 660, "height": 1,
"fillColor": "#1c2028",
"strokeColor": "#1c2028"
},
"claude-prompt-caret": {
"type": "Text",
"parent": "claude-pane",
"left": 416, "top": 760,
"text": "›",
"fontColor": "#7a8294",
"fontSize": 16
},
"claude-prompt-placeholder": {
"type": "Text",
"parent": "claude-pane",
"left": 440, "top": 762,
"text": "Try \"export the wireframes\"",
"fontColor": "#5a6478",
"fontSize": 12
},
"claude-prompt-meta": {
"type": "Text",
"parent": "claude-pane",
"left": 416, "top": 794,
"text": "[jeroenschweitzer@danoontje clide] | Opus 4.7 (1M context)",
"fontColor": "#7a8294",
"fontSize": 10
},
"context-panel": {
"type": "Rectangle",
"parent": "canvas",
"left": 1060, "top": 76, "width": 380, "height": 786,
"fillColor": "#13161c",
"strokeColor": "#1c2028"
},
"context-empty": {
"type": "Text",
"parent": "context-panel",
"left": 1080, "top": 96,
"text": "Select a ticket to view details.",
"fontColor": "#7a8294",
"fontSize": 12
},
"context-rail": {
"type": "Rectangle",
"parent": "canvas",
"left": 1060, "top": 822, "width": 380, "height": 40,
"fillColor": "#13161c",
"strokeColor": "#1c2028"
},
"context-rail-icon-1": {
"type": "Text",
"parent": "context-rail",
"left": 1300, "top": 832,
"text": "▤",
"fontColor": "#e8ecf2",
"fontSize": 16
},
"context-rail-icon-2": {
"type": "Text",
"parent": "context-rail",
"left": 1340, "top": 832,
"text": "◇",
"fontColor": "#7a8294",
"fontSize": 16
},
"context-rail-icon-3": {
"type": "Text",
"parent": "context-rail",
"left": 1380, "top": 832,
"text": "⌕",
"fontColor": "#7a8294",
"fontSize": 16
},
"context-rail-icon-4": {
"type": "Text",
"parent": "context-rail",
"left": 1416, "top": 832,
"text": "▢",
"fontColor": "#7a8294",
"fontSize": 16
},
"status-branch": {
"type": "Text",
"parent": "canvas",
"left": 56, "top": 880,
"text": "⑂ main ↑5",
"fontColor": "#7a8294",
"fontSize": 11
},
"status-app": {
"type": "Text",
"parent": "canvas",
"left": 700, "top": 880,
"text": "● application ok",
"fontColor": "#5a8c5a",
"fontSize": 11
}
}
}
Reference in New Issue View Git Blame Copy Permalink