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.

design workcardstable4 views of one babble.json

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.