Gallery › design work › robotparts design babble
robotparts design babble
The ten robotparts.dev design proposals from the two babbles of 2026-10-22 (five design languages, then five catalog designs) as cards with their stills: each card the proposal's landing page, its weighted score out of 100 and when it wins; open any still full screen and arrow through the rest. Other views show every still per proposal and the phone layouts side by side.
The .base file and its data
Every tab above is one entry of this file; the views read these rows. ⋯ in the toolbar copies the current view as YAML.
# robotparts' two design babbles (2026-10-22): ten proposals as cards with their stills, ranked by the babble's own
# weighted score, and every still in a lightbox. Obsidian Bases grammar plus data-ui's keys (docs/CONTRACT.md §5).
# Check it: node bin/data-ui.mjs check <this file> --data babble.json
data: babble.json
facets:
- round
- shot
- { property: score, as: range }
views:
- type: cards
name: Proposals
filters: 'shot == "Landing"'
order: [variant, score, default, best_when]
image: still
imageFit: cover
imageAspectRatio: 0.625
cardSize: 280
lightbox: true
caption: [round, score, thesis]
groupBy: { property: round, direction: DESC }
sort:
- { property: score, direction: DESC }
- type: cards
name: Every still
order: [shot, score]
image: still
imageFit: contain
imageAspectRatio: 0.7
cardSize: 220
lightbox: true
caption: [variant, shot, score]
groupBy: { property: variant, direction: ASC }
sort:
- { property: order, direction: ASC }
- type: cards
name: Phones
filters: 'shot == "Phone"'
order: [variant, score]
image: still
imageFit: cover
imageAspectRatio: 1.8
cardSize: 150
lightbox: true
caption: [variant, score]
sort:
- { property: score, direction: DESC }
- type: table
name: Table
filters: 'shot == "Landing"'
order: [variant, round, score, default, thesis, best_when, loses_when]
sort:
- { property: score, direction: DESC }
// babble.json: 30 rows, 22 KB; the first 3
{
"id": "design-babble",
"title": "robotparts design babble",
"titleProperty": "variant",
"imageProperty": "still",
"properties": {
"variant": {
"type": "text",
"label": "Variant"
},
"name": {
"type": "text",
"label": "Name"
},
"round": {
"type": "text",
"label": "Round",
"facet": true
},
"shot": {
"type": "text",
"label": "Still",
"facet": true
},
"order": {
"type": "number",
"label": "Still order",
"hidden": true
},
"score": {
"type": "number",
"label": "Score",
"unitText": "/ 100",
"derived": "the babble's weighted total, sum(score x weight) / 5"
},
"default": {
"type": "boolean",
"label": "Default pick"
},
"thesis": {
"type": "text",
"label": "Thesis"
},
"best_when": {
"type": "text",
"label": "Best when"
},
"loses_when": {
"type": "text",
"label": "Loses when"
},
"still": {
"type": "text",
"label": "Still",
"media": "image"
}
},
"rows": [
{
"id": "b1-v1-landing",
"variant": "R1 v1 · Shell",
"name": "Shell",
"round": "Round 1 · five design languages",
"shot": "Landing",
"order": 0,
"score": 93,
"default": false,
"thesis": "The site is a terminal session: clickable commands whose output is the UI, with real pictures inside the output.",
"best_when": "The visitor is a developer who wants to find a part, see it, check its sources and copy the code.",
"loses_when": "Browsing visually or a non-technical visitor — outputs pile up as history and the prompt bar costs ~80 px.",
"still": {
"value": "stills/b1-v1-landing.webp",
"source": "robotparts design/babble-2026-10-22/v1-shell/shots/landing-1280.png",
"asOf": "2026-10-22"
}
},
{
"id": "b1-v1-hero",
"variant": "R1 v1 · Shell",
"name": "Shell",
"round": "Round 1 · five design languages",
"shot": "Part page",
"order": 1,
"score": 93,
"default": false,
"thesis": "The site is a terminal session: clickable commands whose output is the UI, with real pictures inside the output.",
"best_when": "The visitor is a developer who wants to find a part, see it, check its sources and copy the code.",
"loses_when": "Browsing visually or a non-technical visitor — outputs pile up as history and the prompt bar costs ~80 px.",
"still": {
"value": "stills/b1-v1-hero.webp",
"source": "robotparts design/babble-2026-10-22/v1-shell/shots/hero-1280.png",
"asOf": "2026-10-22"
}
},
{
"id": "b1-v1-phone",
"variant": "R1 v1 · Shell",
"name": "Shell",
"round": "Round 1 · five design languages",
"shot": "Phone",
"order": 2,
"score": 93,
"default": false,
"thesis": "The site is a terminal session: clickable commands whose output is the UI, with real pictures inside the output.",
"best_when": "The visitor is a developer who wants to find a part, see it, check its sources and copy the code.",
"loses_when": "Browsing visually or a non-technical visitor — outputs pile up as history and the prompt bar costs ~80 px.",
"still": {
"value": "stills/b1-v1-phone.webp",
"source": "robotparts design/babble-2026-10-22/v1-shell/shots/phone-375.png",
"asOf": "2026-10-22"
}
}
]
}README.md
# robotparts design babble
The ten robotparts.dev design proposals from the two babbles of 2026-10-22 (five design languages, then five catalog
designs) as cards with their stills: each card the proposal's landing page, its weighted score out of 100 and when
it wins; open any still full screen and arrow through the rest. Other views show every still per proposal and the
phone layouts side by side.
- **App:** design work
- **Replaces:** the babble skill's hand-built comparison galleries for those rounds (`design/babble-2026-10-22*/
build_gallery_spec.py` writing `gallery-spec.json`, whose `media` entries inline every still as base64 HTML).
- **Shows:** cards with `imageFit: cover` and `contain` on the same stills, a tall `imageAspectRatio` for phone
shots, groups by round and by proposal, the lightbox with a caption (`caption: [round, score, thesis]`) and the
still's source path and date, a derived score, a boolean (`default`, the babble's own pick).
- **Data:** `babble.json` and the `b1-*` / `b2-*` WebP stills in `stills/` (30 stills, 1.1 MB), written by
`source/make.py` from each round's `gallery-spec.json` and the variants' `shots/` (desktop stills re-encoded at
960 px, phones at 375 px). The score is the babble's own: sum(score × weight) / 5, which reproduces round 2's
published 92.0 for Views + Offers.
The original UI it replaces
the babble skill's hand-built comparison galleries for those rounds (design/babble-2026-10-22*/ build_gallery_spec.py writing gallery-spec.json, whose media entries inline every still as base64 HTML).
What it shows
cards with imageFit: cover and contain on the same stills, a tall imageAspectRatio for phone shots, groups by round and by proposal, the lightbox with a caption (caption: [round, score, thesis]) and the still's source path and date, a derived score, a boolean (default, the babble's own pick).
Data
babble.json and the b1-* / b2-* WebP stills in stills/ (30 stills, 1.1 MB), written by source/make.py from each round's gallery-spec.json and the variants' shots/ (desktop stills re-encoded at 960 px, phones at 375 px). The score is the babble's own: sum(score × weight) / 5, which reproduces round 2's published 92.0 for Views + Offers.