Files
clide/docs/wireframes/welcome/welcome-screen.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

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
}
}
}