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>
84 lines
3.4 KiB
JSON
84 lines
3.4 KiB
JSON
{
|
||
"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
|
||
}
|
||
}
|
||
}
|