jpmschweitzer/clide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add Claude prompt UX wireframes (frame0)

Browse Source 
Wireframes for the in-composer prompt surface (D-78): single
AskUserQuestion (bare), multi-question stepper, the review/confirm step,
and the permission Allow / Allow-and-remember / Deny prompt. Authored as
JSON, rendered + exported via the frame0-wireframe skill.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jpmschweitzer
2026-05-25 09:30:40 +02:00
co-authored by Claude Opus 4.7
parent 39f9ed018c
commit fbf5a720a8
10 changed files with 300 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/wireframes/claude-prompts/01-askuserquestion-single.json
+83
View File
@@ -0,0 +1,83 @@
{
"name": "Clide — AskUserQuestion (single)",
"shapes": {
"panel": {
"type": "Rectangle",
"left": 40, "top": 40, "width": 840, "height": 330,
"fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8]
},
"accent": {
"type": "Rectangle",
"left": 40, "top": 40, "width": 840, "height": 4,
"fillColor": "#5aa0e0", "strokeColor": "#5aa0e0", "corners": [8, 8, 0, 0]
},
"label": {
"type": "Text", "parent": "panel", "left": 64, "top": 60,
"text": "question", "fontColor": "#5aa0e0", "fontSize": 13
},
"qtext": {
"type": "Text", "parent": "panel", "left": 64, "top": 86,
"text": "Which fruit is your favorite?", "fontColor": "#c8d0e0", "fontSize": 17
},
"opt-banana": {
"type": "Rectangle", "parent": "panel", "left": 64, "top": 126, "width": 150, "height": 34,
"fillColor": "#27406a", "strokeColor": "#5aa0e0", "corners": [4, 4, 4, 4]
},
"opt-banana-t": {
"type": "Text", "parent": "panel", "left": 78, "top": 134,
"text": "① Banana", "fontColor": "#dbe6f5", "fontSize": 14
},
"opt-apple": {
"type": "Rectangle", "parent": "panel", "left": 224, "top": 126, "width": 130, "height": 34,
"fillColor": "#2a3040", "strokeColor": "#333340", "corners": [4, 4, 4, 4]
},
"opt-apple-t": {
"type": "Text", "parent": "panel", "left": 238, "top": 134,
"text": "② Apple", "fontColor": "#c8d0e0", "fontSize": 14
},
"opt-mango": {
"type": "Rectangle", "parent": "panel", "left": 364, "top": 126, "width": 130, "height": 34,
"fillColor": "#2a3040", "strokeColor": "#333340", "corners": [4, 4, 4, 4]
},
"opt-mango-t": {
"type": "Text", "parent": "panel", "left": 378, "top": 134,
"text": "③ Mango", "fontColor": "#c8d0e0", "fontSize": 14
},
"opt-other": {
"type": "Rectangle", "parent": "panel", "left": 504, "top": 126, "width": 130, "height": 34,
"fillColor": "#1f242c", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4]
},
"opt-other-t": {
"type": "Text", "parent": "panel", "left": 518, "top": 134,
"text": "Other…", "fontColor": "#9aa4b2", "fontSize": 14
},
"note-hint": {
"type": "Text", "parent": "panel", "left": 64, "top": 176,
"text": "✎ add a note to your choice (optional)", "fontColor": "#7a8290", "fontSize": 12
},
"note-field": {
"type": "Rectangle", "parent": "panel", "left": 64, "top": 198, "width": 752, "height": 32,
"fillColor": "#14181d", "strokeColor": "#333340", "corners": [4, 4, 4, 4]
},
"note-field-t": {
"type": "Text", "parent": "panel", "left": 78, "top": 206,
"text": "optional note…", "fontColor": "#5b6470", "fontSize": 13
},
"divider": {
"type": "Line", "parent": "panel", "left": 64, "top": 256, "width": 752, "height": 1,
"strokeColor": "#2a3038"
},
"submit": {
"type": "Rectangle", "parent": "panel", "left": 64, "top": 276, "width": 120, "height": 34,
"fillColor": "#3b5bdb", "strokeColor": "#3b5bdb", "corners": [4, 4, 4, 4]
},
"submit-t": {
"type": "Text", "parent": "panel", "left": 96, "top": 284,
"text": "Submit", "fontColor": "#ffffff", "fontSize": 14
},
"chat": {
"type": "Text", "parent": "panel", "left": 700, "top": 284,
"text": "› chat instead", "fontColor": "#7a8290", "fontSize": 13
}
}
}
docs/design/wireframes/claude-prompts/01-askuserquestion-single.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

docs/design/wireframes/claude-prompts/02-askuserquestion-stepper.json
+100
View File
@@ -0,0 +1,100 @@
{
"name": "Clide — AskUserQuestion (stepper)",
"shapes": {
"panel": {
"type": "Rectangle",
"left": 40, "top": 40, "width": 840, "height": 330,
"fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8]
},
"accent": {
"type": "Rectangle", "left": 40, "top": 40, "width": 840, "height": 4,
"fillColor": "#5aa0e0", "strokeColor": "#5aa0e0", "corners": [8, 8, 0, 0]
},
"nav-left": {
"type": "Text", "parent": "panel", "left": 64, "top": 62, "text": "‹", "fontColor": "#7a8290", "fontSize": 16
},
"chip-pet-t": {
"type": "Text", "parent": "panel", "left": 88, "top": 64, "text": "1 · Pet ✓", "fontColor": "#5cb87a", "fontSize": 13
},
"chip-eaten": {
"type": "Rectangle", "parent": "panel", "left": 188, "top": 58, "width": 120, "height": 26,
"fillColor": "#27406a", "strokeColor": "#5aa0e0", "corners": [4, 4, 4, 4]
},
"chip-eaten-t": {
"type": "Text", "parent": "panel", "left": 200, "top": 64, "text": "2 · Eaten", "fontColor": "#dbe6f5", "fontSize": 13
},
"chip-review-t": {
"type": "Text", "parent": "panel", "left": 326, "top": 64, "text": "Review", "fontColor": "#7a8290", "fontSize": 13
},
"nav-right": {
"type": "Text", "parent": "panel", "left": 404, "top": 62, "text": "›", "fontColor": "#7a8290", "fontSize": 16
},
"step-count": {
"type": "Text", "parent": "panel", "left": 770, "top": 64, "text": "2 of 2", "fontColor": "#5b6470", "fontSize": 12
},
"divider-top": {
"type": "Line", "parent": "panel", "left": 64, "top": 94, "width": 752, "height": 1, "strokeColor": "#2a3038"
},
"header": {
"type": "Text", "parent": "panel", "left": 64, "top": 106, "text": "EATEN", "fontColor": "#7a8290", "fontSize": 12
},
"qtext": {
"type": "Text", "parent": "panel", "left": 64, "top": 126, "text": "How do you most often eat your fruit?", "fontColor": "#c8d0e0", "fontSize": 16
},
"opt-fresh": {
"type": "Rectangle", "parent": "panel", "left": 64, "top": 162, "width": 160, "height": 34,
"fillColor": "#27406a", "strokeColor": "#5aa0e0", "corners": [4, 4, 4, 4]
},
"opt-fresh-t": {
"type": "Text", "parent": "panel", "left": 78, "top": 170, "text": "① Fresh / whole", "fontColor": "#dbe6f5", "fontSize": 14
},
"opt-smoothie": {
"type": "Rectangle", "parent": "panel", "left": 234, "top": 162, "width": 140, "height": 34,
"fillColor": "#2a3040", "strokeColor": "#333340", "corners": [4, 4, 4, 4]
},
"opt-smoothie-t": {
"type": "Text", "parent": "panel", "left": 248, "top": 170, "text": "② Smoothie", "fontColor": "#c8d0e0", "fontSize": 14
},
"opt-salad": {
"type": "Rectangle", "parent": "panel", "left": 384, "top": 162, "width": 120, "height": 34,
"fillColor": "#2a3040", "strokeColor": "#333340", "corners": [4, 4, 4, 4]
},
"opt-salad-t": {
"type": "Text", "parent": "panel", "left": 398, "top": 170, "text": "③ Salad", "fontColor": "#c8d0e0", "fontSize": 14
},
"opt-other": {
"type": "Rectangle", "parent": "panel", "left": 514, "top": 162, "width": 120, "height": 34,
"fillColor": "#1f242c", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4]
},
"opt-other-t": {
"type": "Text", "parent": "panel", "left": 528, "top": 170, "text": "Other…", "fontColor": "#9aa4b2", "fontSize": 14
},
"note-field": {
"type": "Rectangle", "parent": "panel", "left": 64, "top": 212, "width": 752, "height": 30,
"fillColor": "#14181d", "strokeColor": "#333340", "corners": [4, 4, 4, 4]
},
"note-field-t": {
"type": "Text", "parent": "panel", "left": 78, "top": 219, "text": "✎ add a note (optional)", "fontColor": "#5b6470", "fontSize": 12
},
"divider-bot": {
"type": "Line", "parent": "panel", "left": 64, "top": 262, "width": 752, "height": 1, "strokeColor": "#2a3038"
},
"back": {
"type": "Rectangle", "parent": "panel", "left": 64, "top": 278, "width": 86, "height": 34,
"fillColor": "#1f242c", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4]
},
"back-t": {
"type": "Text", "parent": "panel", "left": 84, "top": 286, "text": "‹ Back", "fontColor": "#9aa4b2", "fontSize": 14
},
"next": {
"type": "Rectangle", "parent": "panel", "left": 160, "top": 278, "width": 110, "height": 34,
"fillColor": "#3b5bdb", "strokeColor": "#3b5bdb", "corners": [4, 4, 4, 4]
},
"next-t": {
"type": "Text", "parent": "panel", "left": 188, "top": 286, "text": "Next ›", "fontColor": "#ffffff", "fontSize": 14
},
"chat": {
"type": "Text", "parent": "panel", "left": 700, "top": 286, "text": "› chat instead", "fontColor": "#7a8290", "fontSize": 13
}
}
}
docs/design/wireframes/claude-prompts/02-askuserquestion-stepper.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

docs/design/wireframes/claude-prompts/03-askuserquestion-review.json
+48
View File
@@ -0,0 +1,48 @@
{
"name": "Clide — AskUserQuestion (review)",
"shapes": {
"panel": {
"type": "Rectangle", "left": 40, "top": 40, "width": 840, "height": 270,
"fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8]
},
"accent": {
"type": "Rectangle", "left": 40, "top": 40, "width": 840, "height": 4,
"fillColor": "#5cb87a", "strokeColor": "#5cb87a", "corners": [8, 8, 0, 0]
},
"label": {
"type": "Text", "parent": "panel", "left": 64, "top": 60, "text": "review", "fontColor": "#5cb87a", "fontSize": 13
},
"header": {
"type": "Text", "parent": "panel", "left": 64, "top": 84, "text": "Review your answers", "fontColor": "#c8d0e0", "fontSize": 16
},
"row1-q": {
"type": "Text", "parent": "panel", "left": 64, "top": 124, "text": "Pet", "fontColor": "#7a8290", "fontSize": 13
},
"row1-a": {
"type": "Text", "parent": "panel", "left": 180, "top": 124, "text": "→ Banana — only the big ripe ones", "fontColor": "#c8d0e0", "fontSize": 14
},
"row2-q": {
"type": "Text", "parent": "panel", "left": 64, "top": 152, "text": "Eaten", "fontColor": "#7a8290", "fontSize": 13
},
"row2-a": {
"type": "Text", "parent": "panel", "left": 180, "top": 152, "text": "→ Fresh / whole", "fontColor": "#c8d0e0", "fontSize": 14
},
"divider": {
"type": "Line", "parent": "panel", "left": 64, "top": 196, "width": 752, "height": 1, "strokeColor": "#2a3038"
},
"back": {
"type": "Rectangle", "parent": "panel", "left": 64, "top": 214, "width": 86, "height": 34,
"fillColor": "#1f242c", "strokeColor": "#3a4250", "corners": [4, 4, 4, 4]
},
"back-t": {
"type": "Text", "parent": "panel", "left": 84, "top": 222, "text": "‹ Back", "fontColor": "#9aa4b2", "fontSize": 14
},
"submit": {
"type": "Rectangle", "parent": "panel", "left": 160, "top": 214, "width": 160, "height": 34,
"fillColor": "#2f9e44", "strokeColor": "#2f9e44", "corners": [4, 4, 4, 4]
},
"submit-t": {
"type": "Text", "parent": "panel", "left": 188, "top": 222, "text": "Submit answers", "fontColor": "#ffffff", "fontSize": 14
}
}
}
docs/design/wireframes/claude-prompts/03-askuserquestion-review.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

docs/design/wireframes/claude-prompts/04-permission.json
+60
View File
@@ -0,0 +1,60 @@
{
"name": "Clide — permission prompt",
"shapes": {
"panel": {
"type": "Rectangle", "left": 40, "top": 40, "width": 840, "height": 300,
"fillColor": "#1a1e24", "strokeColor": "#333340", "corners": [8, 8, 8, 8]
},
"accent": {
"type": "Rectangle", "left": 40, "top": 40, "width": 840, "height": 4,
"fillColor": "#d9a441", "strokeColor": "#d9a441", "corners": [8, 8, 0, 0]
},
"label": {
"type": "Text", "parent": "panel", "left": 64, "top": 60, "text": "permission · Write", "fontColor": "#d9a441", "fontSize": 14
},
"desc": {
"type": "Text", "parent": "panel", "left": 64, "top": 86, "text": "/tmp/banana.txt", "fontColor": "#9aa4b2", "fontSize": 13
},
"opt-allow": {
"type": "Rectangle", "parent": "panel", "left": 64, "top": 118, "width": 120, "height": 34,
"fillColor": "#2f9e44", "strokeColor": "#2f9e44", "corners": [4, 4, 4, 4]
},
"opt-allow-t": {
"type": "Text", "parent": "panel", "left": 86, "top": 126, "text": "① Allow", "fontColor": "#ffffff", "fontSize": 14
},
"opt-always": {
"type": "Rectangle", "parent": "panel", "left": 194, "top": 118, "width": 230, "height": 34,
"fillColor": "#2a3040", "strokeColor": "#333340", "corners": [4, 4, 4, 4]
},
"opt-always-t": {
"type": "Text", "parent": "panel", "left": 208, "top": 126, "text": "② Allow & don't ask again", "fontColor": "#c8d0e0", "fontSize": 14
},
"opt-deny": {
"type": "Rectangle", "parent": "panel", "left": 434, "top": 118, "width": 110, "height": 34,
"fillColor": "#3a2630", "strokeColor": "#c0506a", "corners": [4, 4, 4, 4]
},
"opt-deny-t": {
"type": "Text", "parent": "panel", "left": 456, "top": 126, "text": "③ Deny", "fontColor": "#e58ba0", "fontSize": 14
},
"deny-hint": {
"type": "Text", "parent": "panel", "left": 64, "top": 174, "text": "tell Claude what to do differently (optional)", "fontColor": "#7a8290", "fontSize": 12
},
"deny-field": {
"type": "Rectangle", "parent": "panel", "left": 64, "top": 196, "width": 752, "height": 32,
"fillColor": "#14181d", "strokeColor": "#333340", "corners": [4, 4, 4, 4]
},
"deny-field-t": {
"type": "Text", "parent": "panel", "left": 78, "top": 204, "text": "tell Claude what to do differently…", "fontColor": "#5b6470", "fontSize": 13
},
"divider": {
"type": "Line", "parent": "panel", "left": 64, "top": 252, "width": 752, "height": 1, "strokeColor": "#2a3038"
},
"send-deny": {
"type": "Rectangle", "parent": "panel", "left": 64, "top": 266, "width": 130, "height": 34,
"fillColor": "#c0392b", "strokeColor": "#c0392b", "corners": [4, 4, 4, 4]
},
"send-deny-t": {
"type": "Text", "parent": "panel", "left": 86, "top": 274, "text": "Deny + note", "fontColor": "#ffffff", "fontSize": 14
}
}
}
docs/design/wireframes/claude-prompts/04-permission.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB