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>
363 lines
8.4 KiB
JSON
363 lines
8.4 KiB
JSON
{
|
|
"name": "Welcome Screen",
|
|
"shapes": {
|
|
"canvas": {
|
|
"type": "Rectangle",
|
|
"left": 40, "top": 40, "width": 1280, "height": 800,
|
|
"fillColor": "#0e1014",
|
|
"strokeColor": "#1c2028",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
|
|
"title-bar": {
|
|
"type": "Rectangle",
|
|
"parent": "canvas",
|
|
"left": 40, "top": 40, "width": 1280, "height": 36,
|
|
"fillColor": "#1c2028",
|
|
"strokeColor": "#1c2028",
|
|
"corners": [4, 4, 0, 0]
|
|
},
|
|
"title-bar-text": {
|
|
"type": "Text",
|
|
"parent": "title-bar",
|
|
"left": 660, "top": 50,
|
|
"text": "clide ⌄",
|
|
"fontColor": "#a0a8b8",
|
|
"fontSize": 12
|
|
},
|
|
|
|
"spine-left": {
|
|
"type": "Rectangle",
|
|
"parent": "canvas",
|
|
"left": 40, "top": 76, "width": 12, "height": 700,
|
|
"fillColor": "#13161c",
|
|
"strokeColor": "#1c2028"
|
|
},
|
|
"spine-right": {
|
|
"type": "Rectangle",
|
|
"parent": "canvas",
|
|
"left": 1308, "top": 76, "width": 12, "height": 700,
|
|
"fillColor": "#13161c",
|
|
"strokeColor": "#1c2028"
|
|
},
|
|
|
|
"logo": {
|
|
"type": "Text",
|
|
"parent": "canvas",
|
|
"left": 250, "top": 240,
|
|
"text": "<>",
|
|
"fontColor": "#7c8896",
|
|
"fontSize": 96
|
|
},
|
|
"logo-accent": {
|
|
"type": "Rectangle",
|
|
"parent": "canvas",
|
|
"left": 254, "top": 332, "width": 60, "height": 4,
|
|
"fillColor": "#d97757",
|
|
"strokeColor": "#d97757"
|
|
},
|
|
|
|
"wordmark": {
|
|
"type": "Text",
|
|
"parent": "canvas",
|
|
"left": 396, "top": 248,
|
|
"text": "clide",
|
|
"fontColor": "#e8ecf2",
|
|
"fontSize": 64
|
|
},
|
|
"subtitle": {
|
|
"type": "Text",
|
|
"parent": "canvas",
|
|
"left": 396, "top": 322,
|
|
"text": "IDE for Claude Code CLI",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 16
|
|
},
|
|
|
|
"start-label": {
|
|
"type": "Text",
|
|
"parent": "canvas",
|
|
"left": 250, "top": 426,
|
|
"text": "START",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 11
|
|
},
|
|
"row-open": {
|
|
"type": "Rectangle",
|
|
"parent": "canvas",
|
|
"left": 250, "top": 458, "width": 380, "height": 36,
|
|
"fillColor": "#0e1014",
|
|
"strokeColor": "#0e1014"
|
|
},
|
|
"row-open-icon": {
|
|
"type": "Text",
|
|
"parent": "row-open",
|
|
"left": 262, "top": 466,
|
|
"text": "▢",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 14
|
|
},
|
|
"row-open-label": {
|
|
"type": "Text",
|
|
"parent": "row-open",
|
|
"left": 296, "top": 468,
|
|
"text": "Open folder…",
|
|
"fontColor": "#e8ecf2",
|
|
"fontSize": 14
|
|
},
|
|
"row-open-key": {
|
|
"type": "Text",
|
|
"parent": "row-open",
|
|
"left": 590, "top": 470,
|
|
"text": "⌘O",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 12
|
|
},
|
|
|
|
"row-clone": {
|
|
"type": "Rectangle",
|
|
"parent": "canvas",
|
|
"left": 250, "top": 498, "width": 380, "height": 36,
|
|
"fillColor": "#0e1014",
|
|
"strokeColor": "#0e1014"
|
|
},
|
|
"row-clone-icon": {
|
|
"type": "Text",
|
|
"parent": "row-clone",
|
|
"left": 262, "top": 506,
|
|
"text": "⑂",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 14
|
|
},
|
|
"row-clone-label": {
|
|
"type": "Text",
|
|
"parent": "row-clone",
|
|
"left": 296, "top": 508,
|
|
"text": "Clone from git…",
|
|
"fontColor": "#e8ecf2",
|
|
"fontSize": 14
|
|
},
|
|
"row-clone-key": {
|
|
"type": "Text",
|
|
"parent": "row-clone",
|
|
"left": 590, "top": 510,
|
|
"text": "⌘G",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 12
|
|
},
|
|
|
|
"row-claude": {
|
|
"type": "Rectangle",
|
|
"parent": "canvas",
|
|
"left": 250, "top": 538, "width": 380, "height": 36,
|
|
"fillColor": "#0e1014",
|
|
"strokeColor": "#0e1014"
|
|
},
|
|
"row-claude-icon": {
|
|
"type": "Text",
|
|
"parent": "row-claude",
|
|
"left": 262, "top": 546,
|
|
"text": "◯",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 14
|
|
},
|
|
"row-claude-label": {
|
|
"type": "Text",
|
|
"parent": "row-claude",
|
|
"left": 296, "top": 548,
|
|
"text": "Start a Claude session",
|
|
"fontColor": "#e8ecf2",
|
|
"fontSize": 14
|
|
},
|
|
"row-claude-key": {
|
|
"type": "Text",
|
|
"parent": "row-claude",
|
|
"left": 590, "top": 550,
|
|
"text": "⌘C",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 12
|
|
},
|
|
|
|
"recent-label": {
|
|
"type": "Text",
|
|
"parent": "canvas",
|
|
"left": 700, "top": 426,
|
|
"text": "RECENT",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 11
|
|
},
|
|
"recent-row": {
|
|
"type": "Rectangle",
|
|
"parent": "canvas",
|
|
"left": 700, "top": 458, "width": 410, "height": 56,
|
|
"fillColor": "#13161c",
|
|
"strokeColor": "#1c2028",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"recent-name": {
|
|
"type": "Text",
|
|
"parent": "recent-row",
|
|
"left": 716, "top": 468,
|
|
"text": "clide",
|
|
"fontColor": "#e8ecf2",
|
|
"fontSize": 14
|
|
},
|
|
"recent-meta": {
|
|
"type": "Text",
|
|
"parent": "recent-row",
|
|
"left": 716, "top": 490,
|
|
"text": "/var/mnt/data/projects/clide · ⑂ main",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 12
|
|
},
|
|
"recent-time": {
|
|
"type": "Text",
|
|
"parent": "recent-row",
|
|
"left": 1056, "top": 480,
|
|
"text": "just now",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 12
|
|
},
|
|
|
|
"tips-card": {
|
|
"type": "Rectangle",
|
|
"parent": "canvas",
|
|
"left": 250, "top": 612, "width": 860, "height": 110,
|
|
"fillColor": "#13161c",
|
|
"strokeColor": "#1c2028",
|
|
"corners": [6, 6, 6, 6]
|
|
},
|
|
"tips-label": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 274, "top": 628,
|
|
"text": "TIPS",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 11
|
|
},
|
|
|
|
"tip-1-label": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 274, "top": 660,
|
|
"text": "Quick open",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 13
|
|
},
|
|
"tip-1-key": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 488, "top": 662,
|
|
"text": "⌘P",
|
|
"fontColor": "#a0a8b8",
|
|
"fontSize": 12
|
|
},
|
|
"tip-2-label": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 558, "top": 660,
|
|
"text": "Command palette",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 13
|
|
},
|
|
"tip-2-key": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 766, "top": 662,
|
|
"text": "⌘⇧P",
|
|
"fontColor": "#a0a8b8",
|
|
"fontSize": 12
|
|
},
|
|
"tip-3-label": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 836, "top": 660,
|
|
"text": "Toggle sidebar",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 13
|
|
},
|
|
"tip-3-key": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 1056, "top": 662,
|
|
"text": "⌘B",
|
|
"fontColor": "#a0a8b8",
|
|
"fontSize": 12
|
|
},
|
|
|
|
"tip-4-label": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 274, "top": 690,
|
|
"text": "Toggle context",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 13
|
|
},
|
|
"tip-4-key": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 488, "top": 692,
|
|
"text": "⌘J",
|
|
"fontColor": "#a0a8b8",
|
|
"fontSize": 12
|
|
},
|
|
"tip-5-label": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 558, "top": 690,
|
|
"text": "Switch theme",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 13
|
|
},
|
|
"tip-5-key": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 754, "top": 692,
|
|
"text": "⌘K ⌘T",
|
|
"fontColor": "#a0a8b8",
|
|
"fontSize": 12
|
|
},
|
|
"tip-6-label": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 836, "top": 690,
|
|
"text": "New Claude session",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 13
|
|
},
|
|
"tip-6-key": {
|
|
"type": "Text",
|
|
"parent": "tips-card",
|
|
"left": 1054, "top": 692,
|
|
"text": "⌘⇧C",
|
|
"fontColor": "#a0a8b8",
|
|
"fontSize": 12
|
|
},
|
|
|
|
"status-version": {
|
|
"type": "Text",
|
|
"parent": "canvas",
|
|
"left": 940, "top": 798,
|
|
"text": "clide 2.0.0-dev",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 11
|
|
},
|
|
"status-app": {
|
|
"type": "Text",
|
|
"parent": "canvas",
|
|
"left": 1058, "top": 798,
|
|
"text": "· application ok",
|
|
"fontColor": "#5a8c5a",
|
|
"fontSize": 11
|
|
},
|
|
"status-theme": {
|
|
"type": "Text",
|
|
"parent": "canvas",
|
|
"left": 1180, "top": 798,
|
|
"text": "· theme: clide",
|
|
"fontColor": "#7a8294",
|
|
"fontSize": 11
|
|
}
|
|
}
|
|
}
|