6 wireframe views (Body, Head, Hair, Clothing, Accessories, Color Picker) as Frame0 JSON source + PNG exports, plus summary spec document. Layout: 60% preview pane with [Q]/[E] rotation, 35% tabbed panel with search bar, scrollable grid, and docked color controls per tab. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
459 lines
13 KiB
JSON
459 lines
13 KiB
JSON
{
|
|
"name": "Character Creation — Body Tab",
|
|
"shapes": {
|
|
"bg": {
|
|
"type": "Rectangle",
|
|
"left": 0, "top": 0, "width": 1140, "height": 780,
|
|
"fillColor": "#1a1e24"
|
|
},
|
|
"title": {
|
|
"type": "Text",
|
|
"parent": "bg",
|
|
"left": 440, "top": 16,
|
|
"text": "CHARACTER CREATION",
|
|
"fontColor": "#c8d0e0", "fontSize": 24
|
|
},
|
|
|
|
"preview-panel": {
|
|
"type": "Rectangle",
|
|
"parent": "bg",
|
|
"left": 20, "top": 56, "width": 700, "height": 600,
|
|
"fillColor": "#2a3040", "strokeColor": "#333340",
|
|
"corners": [8, 8, 8, 8]
|
|
},
|
|
"preview-label": {
|
|
"type": "Text",
|
|
"parent": "preview-panel",
|
|
"left": 320, "top": 68,
|
|
"text": "3D PREVIEW",
|
|
"fontColor": "#555568", "fontSize": 14
|
|
},
|
|
"preview-figure": {
|
|
"type": "Rectangle",
|
|
"parent": "preview-panel",
|
|
"left": 260, "top": 110, "width": 220, "height": 460,
|
|
"fillColor": "#3a4050", "strokeColor": "#555568",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"preview-figure-label": {
|
|
"type": "Text",
|
|
"parent": "preview-figure",
|
|
"left": 320, "top": 330,
|
|
"text": "Character\nModel",
|
|
"fontColor": "#555568", "fontSize": 14
|
|
},
|
|
"cam-toggle": {
|
|
"type": "Rectangle",
|
|
"parent": "preview-panel",
|
|
"left": 620, "top": 68, "width": 88, "height": 28,
|
|
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"cam-toggle-label": {
|
|
"type": "Text",
|
|
"parent": "cam-toggle",
|
|
"left": 632, "top": 73,
|
|
"text": "Frontal",
|
|
"fontColor": "#c8d8f0", "fontSize": 11
|
|
},
|
|
"btn-rot-left": {
|
|
"type": "Rectangle",
|
|
"parent": "preview-panel",
|
|
"left": 270, "top": 590, "width": 80, "height": 36,
|
|
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"btn-rot-left-label": {
|
|
"type": "Text",
|
|
"parent": "btn-rot-left",
|
|
"left": 288, "top": 597,
|
|
"text": "[Q] <",
|
|
"fontColor": "#c8d8f0", "fontSize": 13
|
|
},
|
|
"btn-rot-right": {
|
|
"type": "Rectangle",
|
|
"parent": "preview-panel",
|
|
"left": 390, "top": 590, "width": 80, "height": 36,
|
|
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"btn-rot-right-label": {
|
|
"type": "Text",
|
|
"parent": "btn-rot-right",
|
|
"left": 408, "top": 597,
|
|
"text": "> [E]",
|
|
"fontColor": "#c8d8f0", "fontSize": 13
|
|
},
|
|
|
|
"right-panel": {
|
|
"type": "Rectangle",
|
|
"parent": "bg",
|
|
"left": 740, "top": 56, "width": 380, "height": 600,
|
|
"fillColor": "#1a1e24", "strokeColor": "#333340",
|
|
"corners": [8, 8, 8, 8]
|
|
},
|
|
"tab-body": {
|
|
"type": "Rectangle",
|
|
"parent": "right-panel",
|
|
"left": 740, "top": 64, "width": 60, "height": 30,
|
|
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
|
|
"corners": [4, 4, 0, 0]
|
|
},
|
|
"tab-body-label": {
|
|
"type": "Text",
|
|
"parent": "tab-body",
|
|
"left": 750, "top": 71,
|
|
"text": "Body",
|
|
"fontColor": "#c8d8f0", "fontSize": 11
|
|
},
|
|
"tab-head": {
|
|
"type": "Rectangle",
|
|
"parent": "right-panel",
|
|
"left": 802, "top": 64, "width": 58, "height": 30,
|
|
"fillColor": "#1a1e24", "strokeColor": "#333340",
|
|
"corners": [4, 4, 0, 0]
|
|
},
|
|
"tab-head-label": {
|
|
"type": "Text",
|
|
"parent": "tab-head",
|
|
"left": 812, "top": 71,
|
|
"text": "Head",
|
|
"fontColor": "#c8d0e0", "fontSize": 11
|
|
},
|
|
"tab-hair": {
|
|
"type": "Rectangle",
|
|
"parent": "right-panel",
|
|
"left": 862, "top": 64, "width": 52, "height": 30,
|
|
"fillColor": "#1a1e24", "strokeColor": "#333340",
|
|
"corners": [4, 4, 0, 0]
|
|
},
|
|
"tab-hair-label": {
|
|
"type": "Text",
|
|
"parent": "tab-hair",
|
|
"left": 872, "top": 71,
|
|
"text": "Hair",
|
|
"fontColor": "#c8d0e0", "fontSize": 11
|
|
},
|
|
"tab-clothing": {
|
|
"type": "Rectangle",
|
|
"parent": "right-panel",
|
|
"left": 916, "top": 64, "width": 76, "height": 30,
|
|
"fillColor": "#1a1e24", "strokeColor": "#333340",
|
|
"corners": [4, 4, 0, 0]
|
|
},
|
|
"tab-clothing-label": {
|
|
"type": "Text",
|
|
"parent": "tab-clothing",
|
|
"left": 922, "top": 71,
|
|
"text": "Clothing",
|
|
"fontColor": "#c8d0e0", "fontSize": 11
|
|
},
|
|
"tab-accessories": {
|
|
"type": "Rectangle",
|
|
"parent": "right-panel",
|
|
"left": 994, "top": 64, "width": 94, "height": 30,
|
|
"fillColor": "#1a1e24", "strokeColor": "#333340",
|
|
"corners": [4, 4, 0, 0]
|
|
},
|
|
"tab-accessories-label": {
|
|
"type": "Text",
|
|
"parent": "tab-accessories",
|
|
"left": 1000, "top": 71,
|
|
"text": "Accessories",
|
|
"fontColor": "#c8d0e0", "fontSize": 11
|
|
},
|
|
|
|
"tab-content": {
|
|
"type": "Rectangle",
|
|
"parent": "right-panel",
|
|
"left": 740, "top": 94, "width": 380, "height": 562,
|
|
"fillColor": "#2a3040", "strokeColor": "#333340",
|
|
"corners": [0, 0, 8, 8]
|
|
},
|
|
"search-bar": {
|
|
"type": "Rectangle",
|
|
"parent": "tab-content",
|
|
"left": 752, "top": 102, "width": 356, "height": 32,
|
|
"fillColor": "#3a4050", "strokeColor": "#555568",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"search-placeholder": {
|
|
"type": "Text",
|
|
"parent": "search-bar",
|
|
"left": 762, "top": 109,
|
|
"text": "Search...",
|
|
"fontColor": "#555568", "fontSize": 12
|
|
},
|
|
|
|
"body-section-label": {
|
|
"type": "Text",
|
|
"parent": "tab-content",
|
|
"left": 756, "top": 146,
|
|
"text": "BODY TYPE",
|
|
"fontColor": "#c8d0e0", "fontSize": 12
|
|
},
|
|
"body-row1-label": {
|
|
"type": "Text",
|
|
"parent": "tab-content",
|
|
"left": 756, "top": 166,
|
|
"text": "Female",
|
|
"fontColor": "#555568", "fontSize": 11
|
|
},
|
|
"body-thin-f": {
|
|
"type": "Rectangle",
|
|
"parent": "tab-content",
|
|
"left": 756, "top": 182, "width": 104, "height": 110,
|
|
"fillColor": "#3a4050", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"body-thin-f-label": {
|
|
"type": "Text",
|
|
"parent": "body-thin-f",
|
|
"left": 786, "top": 272,
|
|
"text": "Thin",
|
|
"fontColor": "#c8d0e0", "fontSize": 10
|
|
},
|
|
"body-avg-f": {
|
|
"type": "Rectangle",
|
|
"parent": "tab-content",
|
|
"left": 868, "top": 182, "width": 104, "height": 110,
|
|
"fillColor": "#3a4050", "strokeColor": "#c8d8f0",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"body-avg-f-label": {
|
|
"type": "Text",
|
|
"parent": "body-avg-f",
|
|
"left": 890, "top": 272,
|
|
"text": "Average",
|
|
"fontColor": "#c8d8f0", "fontSize": 10
|
|
},
|
|
"body-musc-f": {
|
|
"type": "Rectangle",
|
|
"parent": "tab-content",
|
|
"left": 980, "top": 182, "width": 104, "height": 110,
|
|
"fillColor": "#3a4050", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"body-musc-f-label": {
|
|
"type": "Text",
|
|
"parent": "body-musc-f",
|
|
"left": 1000, "top": 272,
|
|
"text": "Muscular",
|
|
"fontColor": "#c8d0e0", "fontSize": 10
|
|
},
|
|
"body-heavy-f": {
|
|
"type": "Rectangle",
|
|
"parent": "tab-content",
|
|
"left": 756, "top": 300, "width": 104, "height": 110,
|
|
"fillColor": "#3a4050", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"body-heavy-f-label": {
|
|
"type": "Text",
|
|
"parent": "body-heavy-f",
|
|
"left": 784, "top": 390,
|
|
"text": "Heavy",
|
|
"fontColor": "#c8d0e0", "fontSize": 10
|
|
},
|
|
"body-teen-f": {
|
|
"type": "Rectangle",
|
|
"parent": "tab-content",
|
|
"left": 868, "top": 300, "width": 104, "height": 110,
|
|
"fillColor": "#3a4050", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"body-teen-f-label": {
|
|
"type": "Text",
|
|
"parent": "body-teen-f",
|
|
"left": 898, "top": 390,
|
|
"text": "Teen",
|
|
"fontColor": "#c8d0e0", "fontSize": 10
|
|
},
|
|
|
|
"body-row2-label": {
|
|
"type": "Text",
|
|
"parent": "tab-content",
|
|
"left": 756, "top": 422,
|
|
"text": "Male",
|
|
"fontColor": "#555568", "fontSize": 11
|
|
},
|
|
"body-thin-m": {
|
|
"type": "Rectangle",
|
|
"parent": "tab-content",
|
|
"left": 756, "top": 438, "width": 104, "height": 110,
|
|
"fillColor": "#3a4050", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"body-thin-m-label": {
|
|
"type": "Text",
|
|
"parent": "body-thin-m",
|
|
"left": 786, "top": 528,
|
|
"text": "Thin",
|
|
"fontColor": "#c8d0e0", "fontSize": 10
|
|
},
|
|
"body-avg-m": {
|
|
"type": "Rectangle",
|
|
"parent": "tab-content",
|
|
"left": 868, "top": 438, "width": 104, "height": 110,
|
|
"fillColor": "#3a4050", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"body-avg-m-label": {
|
|
"type": "Text",
|
|
"parent": "body-avg-m",
|
|
"left": 890, "top": 528,
|
|
"text": "Average",
|
|
"fontColor": "#c8d0e0", "fontSize": 10
|
|
},
|
|
"body-musc-m": {
|
|
"type": "Rectangle",
|
|
"parent": "tab-content",
|
|
"left": 980, "top": 438, "width": 104, "height": 110,
|
|
"fillColor": "#3a4050", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"body-musc-m-label": {
|
|
"type": "Text",
|
|
"parent": "body-musc-m",
|
|
"left": 1000, "top": 528,
|
|
"text": "Muscular",
|
|
"fontColor": "#c8d0e0", "fontSize": 10
|
|
},
|
|
|
|
"body-scroll-hint": {
|
|
"type": "Text",
|
|
"parent": "tab-content",
|
|
"left": 880, "top": 556,
|
|
"text": "Scroll for more...",
|
|
"fontColor": "#555568", "fontSize": 10
|
|
},
|
|
|
|
"skin-dock": {
|
|
"type": "Rectangle",
|
|
"parent": "tab-content",
|
|
"left": 740, "top": 580, "width": 380, "height": 76,
|
|
"fillColor": "#1a1e24", "strokeColor": "#333340",
|
|
"corners": [0, 0, 8, 8]
|
|
},
|
|
"skin-dock-label": {
|
|
"type": "Text",
|
|
"parent": "skin-dock",
|
|
"left": 756, "top": 588,
|
|
"text": "SKIN TONE",
|
|
"fontColor": "#c8d0e0", "fontSize": 11
|
|
},
|
|
"skin-1": {
|
|
"type": "Rectangle",
|
|
"parent": "skin-dock",
|
|
"left": 756, "top": 606, "width": 32, "height": 32,
|
|
"fillColor": "#f5d6b8", "strokeColor": "#c8d8f0",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"skin-2": {
|
|
"type": "Rectangle",
|
|
"parent": "skin-dock",
|
|
"left": 796, "top": 606, "width": 32, "height": 32,
|
|
"fillColor": "#e8c4a0", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"skin-3": {
|
|
"type": "Rectangle",
|
|
"parent": "skin-dock",
|
|
"left": 836, "top": 606, "width": 32, "height": 32,
|
|
"fillColor": "#c8a882", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"skin-4": {
|
|
"type": "Rectangle",
|
|
"parent": "skin-dock",
|
|
"left": 876, "top": 606, "width": 32, "height": 32,
|
|
"fillColor": "#b08860", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"skin-5": {
|
|
"type": "Rectangle",
|
|
"parent": "skin-dock",
|
|
"left": 916, "top": 606, "width": 32, "height": 32,
|
|
"fillColor": "#96724c", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"skin-6": {
|
|
"type": "Rectangle",
|
|
"parent": "skin-dock",
|
|
"left": 956, "top": 606, "width": 32, "height": 32,
|
|
"fillColor": "#7c5c3a", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"skin-7": {
|
|
"type": "Rectangle",
|
|
"parent": "skin-dock",
|
|
"left": 996, "top": 606, "width": 32, "height": 32,
|
|
"fillColor": "#624830", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"skin-8": {
|
|
"type": "Rectangle",
|
|
"parent": "skin-dock",
|
|
"left": 1036, "top": 606, "width": 32, "height": 32,
|
|
"fillColor": "#4a3424", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"skin-9": {
|
|
"type": "Rectangle",
|
|
"parent": "skin-dock",
|
|
"left": 1076, "top": 606, "width": 32, "height": 32,
|
|
"fillColor": "#3a2818", "strokeColor": "#333340",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
|
|
"footer": {
|
|
"type": "Rectangle",
|
|
"parent": "bg",
|
|
"left": 0, "top": 700, "width": 1140, "height": 80,
|
|
"fillColor": "#1a1e24"
|
|
},
|
|
"btn-back": {
|
|
"type": "Rectangle",
|
|
"parent": "footer",
|
|
"left": 20, "top": 720, "width": 120, "height": 40,
|
|
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"btn-back-label": {
|
|
"type": "Text",
|
|
"parent": "btn-back",
|
|
"left": 36, "top": 730,
|
|
"text": "[ESC] Back",
|
|
"fontColor": "#c8d8f0", "fontSize": 13
|
|
},
|
|
"btn-random": {
|
|
"type": "Rectangle",
|
|
"parent": "footer",
|
|
"left": 290, "top": 720, "width": 160, "height": 40,
|
|
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"btn-random-label": {
|
|
"type": "Text",
|
|
"parent": "btn-random",
|
|
"left": 310, "top": 730,
|
|
"text": "[R] Randomise",
|
|
"fontColor": "#c8d8f0", "fontSize": 13
|
|
},
|
|
"btn-confirm": {
|
|
"type": "Rectangle",
|
|
"parent": "footer",
|
|
"left": 980, "top": 720, "width": 140, "height": 40,
|
|
"fillColor": "#2a3040", "strokeColor": "#c8d8f0",
|
|
"corners": [4, 4, 4, 4]
|
|
},
|
|
"btn-confirm-label": {
|
|
"type": "Text",
|
|
"parent": "btn-confirm",
|
|
"left": 998, "top": 730,
|
|
"text": "[ENTER] Start",
|
|
"fontColor": "#c8d8f0", "fontSize": 13
|
|
}
|
|
}
|
|
}
|