Skip to content

[Research 74] All 27 UX Pilot designs as HTML, with the lineage measured #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pseudoseed merged 1 commit into from
Aug 24, 2026
Merged

[Research 74] All 27 UX Pilot designs as HTML, with the lineage measured #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 113 additions & 1 deletion codev/research/v2-mockups/uxpilot/MANIFEST.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ Source: `https://uxpilot.ai/a/ui-design?page=SXl8jE8uNyYLwBsG6vsL`
IDs from `codev/experiments/74-v2-ui-pull-all-27-ux-pilot-des/manifest.json` (written by architect:uiv2).
Titles in that file are null. Titles below are the visible screen heading from the preview PNG.

**HTML is not pulled.** This harness has no uxpilot MCP. Do not invent markup. Previews only.
**HTML is pulled.** All 27 designs are on disk beside their previews as `<group-slug>/<design-id>.html`,
pulled by `architect:uiv2` through the uxpilot MCP (no builder harness has it). The
"not pulled" cells in the tables below are stale; the files exist.

Existing extracted files (`01-site.html`, `02-gate.html`, `tokens.css`, `tokens-dark.css`) are untouched.

Expand Down Expand Up @@ -140,3 +142,113 @@ The one genuine phone design is a single-column card stack with a segmented cont
## Design a bespoke control surfa (parent)

0 designs. No files. Not a coverage gap; it is a container.

---

# Measured lineage (all 27, in generation order)

**Everything above this line predates the HTML pull and infers viewport from previews. This
section measures.** Where the two disagree, this one is right. The group names are not
viewports and the group order is not the design order.

`useCase` is the generation prompt's target and is wrong on 14 of 27 designs — every one of
them says `desktop (1440x1024)` including the 1024x1366 iPad screens. **Measured `dimensions`
is the only trustworthy width.** Class below is derived from measured width: phone ≤430,
tablet ≤1024, desktop above.

## Two design families, and which one governs

The page holds **two incompatible visual languages**, not one evolving design. Measured from
the pulled HTML — font stack, body ground, and chevron count:

| | Family A — "porch" | Family B — "IDE" |
|---|---|---|
| Display / sans / mono | Fraunces / Space Grotesk / IBM Plex Mono | — / Inter / JetBrains Mono |
| Body ground | `#EDE8DE` throughout | `#0B0D0F` dark or `#F5F1E8` light, inconsistent |
| Hierarchy | nested lots and plots, **0 chevrons** | left sidebar tree, **10–16 chevrons** |
| Designs | 11 | 16 |
| Generated | 00:11–00:24, **and 01:37** | 00:30–01:19 |

**Family A governs. This is a decision, recorded so it can be overridden.**

Three reasons, in order of weight:

1. **The three most recent designs in the page are Family A** — the iPad trio at 01:37
(`GyhcwHplwDsZ0ENiyTnI`, `YjOhy7S3Pz06oilXMo6R`, `TiCebhzPvbU1AeCZqj5z`). Family B's last
member is the 01:19 phone. The page returned to A after exploring B.
2. **Every shipped artifact is Family A**: `tokens.css`, `tokens-dark.css`, `01-site.html`,
`02-gate.html`. Provenance measured, not assumed — Jaccard token overlap of each local file
against all 27 pulled designs:

| Local file | Best match | Overlap | Runner-up |
|---|---|---:|---:|
| `01-site.html` | `lxhbQ26SZ1QzUt8vTpUK` (00:22) | **0.830** | 0.385 |
| `02-gate.html` | `c6PfQn1i22G2IcFejzaZ` (00:23) | **0.863** | 0.409 |

Both are unambiguous. The extractions are faithful and neither is an invention.
3. **The iPad is the MUST-tier target** (FR-7 tiling was promoted from SHOULD to MUST at FRD
rev. 6), and all three iPad screens are Family A.

Family B stays in the repo. It is recorded exploration, not dead weight: `alggCr6fYS7YFpxmiGWt`
(00:58, the last Family B desktop Site) is the strongest argument on record for a conventional
tree sidebar over containment, and FR-1 rejects it deliberately rather than by omission.

**Do not mix families.** A Family B screen rendered with `tokens.css` is neither design.

## Two build traps in every one of the 27 files

1. **Tailwind arrives from `cdn.tailwindcss.com` and Font Awesome from cdnjs.** These are
mockup scaffolding. The v2 client is React 19 + Vite; do not add a CDN script tag to it.
2. **Family A mockups load Space Grotesk. `tokens.css` ships IBM Plex Sans** — the swap
landed in PR #51 and the mockups were never regenerated. `tokens.css` wins; the HTML is
stale on that one line.

## The table

| # | Time | ID | Title | Measured | Class | Family | Group |
|--:|---|---|---|---|---|---|---|
| 1 | 00:11 | `PXL1ch4T5kjMO4LYGdN9` | Porch - Site | 1024x1366 | tablet | **A** | `porch-site-mobile-redesign` |
| 2 | 00:12 | `3sOUJgaqK6CgFX4eb1Sb` | Porch - Gate | 1024x1366 | tablet | **A** | `porch-gate-interaction-design` |
| 3 | 00:12 | `cL4RvRXLrWQEGFt7ugmi` | Porch - Find Node | 1440x1024 | desktop | **A** | `find-node-screen-flow` |
| 4 | 00:12 | `HOt71AQtECabPPgK5ZNK` | Porch - Add Machine | 1440x1091 | desktop | **A** | `add-machine-to-porch` |
| 5 | 00:22 | `lxhbQ26SZ1QzUt8vTpUK` | Porch - Site | 1440x1092 | desktop | **A** | `porch-site-mobile-redesign` |
| 6 | 00:23 | `c6PfQn1i22G2IcFejzaZ` | Porch - Gate | 1440x1125 | desktop | **A** | `porch-gate-interaction-design` |
| 7 | 00:23 | `nwrrq0r5q6FUBL9HgGad` | Porch - Find Node | 1440x1024 | desktop | **A** | `find-node-screen-flow` |
| 8 | 00:24 | `qwYWc6topSJn0NbcLFQA` | Porch - Add Machine | 1440x1091 | desktop | **A** | `add-machine-to-porch` |
| 9 | 00:30 | `GnWkqflXk3dHyEAyMkCe` | Porch - Site | 1440x1024 | desktop | B | `porch-site-mobile-redesign` |
| 10 | 00:31 | `wtSunFZw8rCeadZpqDW8` | Porch - Gate | 1440x1024 | desktop | B | `porch-gate-interaction-design` |
| 11 | 00:31 | `fNx6eGEgyV2GDY4ASzod` | Porch - Find Node | 1440x1024 | desktop | B | `find-node-screen-flow` |
| 12 | 00:31 | `51b1CgYzLv0iRRqgh4G3` | Porch - Add Machine | 1440x1024 | desktop | B | `add-machine-to-porch` |
| 13 | 00:39 | `9GvvtY66cZ9o588S1ZG6` | Porch - Site | 1440x1024 | desktop | B | `porch-site-mobile-redesign` |
| 14 | 00:47 | `pcuGTxWBv4S195IB7nXO` | Porch - Site | 1440x1024 | desktop | B | `porch-site-mobile-redesign` |
| 15 | 00:52 | `JVQ55vBl3KuTQK6MKEnn` | Porch - Site | 1440x1024 | desktop | B | `porch-site-mobile-redesign` |
| 16 | 00:55 | `da25kSWpzRdJUZGp4dFB` | Porch - Site | 1440x1024 | desktop | B | `porch-site-mobile-redesign` |
| 17 | 00:58 | `alggCr6fYS7YFpxmiGWt` | Porch - Site | 1440x1024 | desktop | B | `porch-site-mobile-redesign` |
| 18 | 01:00 | `cI0vQS8yxrTmLcD5gokz` | Porch - Gate | 1440x1024 | desktop | B | `porch-gate-interaction-design` |
| 19 | 01:00 | `D3UEUmQeN43goRsYxUaJ` | Porch - Find Node | 1440x1024 | desktop | B | `find-node-screen-flow` |
| 20 | 01:00 | `F9qlq0WzIomyZX3y7L6G` | Porch - Add Machine | 1440x1024 | desktop | B | `add-machine-to-porch` |
| 21 | 01:19 | `jClfsPTbpz9rne4YAGBh` | Porch - Dashboard Overview | 375x1122 | phone | B | `porch-site-mobile-redesign` |
| 22 | 01:19 | `EdGJMIYxdc5nlaj5fyxX` | Porch - Pending Gates | 375x892 | phone | B | `porch-gate-interaction-design` |
| 23 | 01:19 | `CsPhgzxbCUWacaa4xcfW` | Porch - Node Search | 375x840 | phone | B | `find-node-screen-flow` |
| 24 | 01:19 | `cKttggjpN8Xa2xL5RXD7` | Porch - Add Machine 2 | 375x1466 | phone | B | `add-machine-to-porch` |
| 25 | 01:37 | `GyhcwHplwDsZ0ENiyTnI` | Porch - Split Terminals | 1024x1366 | tablet | **A** | `split-terminals` |
| 26 | 01:37 | `YjOhy7S3Pz06oilXMo6R` | Porch - Gate Queue Sheet | 1024x1366 | tablet | **A** | `gate-queue-sheet` |
| 27 | 01:37 | `TiCebhzPvbU1AeCZqj5z` | Porch - Terminal Soft Keyboard | 1024x1366 | tablet | **A** | `terminal-soft-keyboard` |

Family A rows, in generation order: `PXL1ch4T5kjMO4LYGdN9`, `3sOUJgaqK6CgFX4eb1Sb`,
`cL4RvRXLrWQEGFt7ugmi`, `HOt71AQtECabPPgK5ZNK`, `lxhbQ26SZ1QzUt8vTpUK`,
`c6PfQn1i22G2IcFejzaZ`, `nwrrq0r5q6FUBL9HgGad`, `qwYWc6topSJn0NbcLFQA`,
`GyhcwHplwDsZ0ENiyTnI`, `YjOhy7S3Pz06oilXMo6R`, `TiCebhzPvbU1AeCZqj5z`.

## Corrections to the group summaries above

| Group | Said | Measured |
|---|---|---|
| Find Node Screen Flow | "Phone" | 4 desktop 1440, 1 phone 375 |
| Porch Gate Interaction Design | "Phone" | 1 tablet 1024x1366, 3 desktop 1440, 1 phone 375 |
| Add Machine To Porch | — | 4 desktop 1440, 1 phone 375 |
| Porch Site Mobile Redesign | — | 1 tablet 1024x1366, 7 desktop 1440, 1 phone 375 |
| The three `Group with Porch - *` singles | "iPad" | correct, all 1024x1366 |

Any FR clause scored against a group's assumed viewport needs rescoring against this table.
That error has already produced one phantom finding (FRD rev. 8, retracted at rev. 9).
150 changes: 150 additions & 0 deletions codev/research/v2-mockups/uxpilot/add-machine-to-porch/51b1CgYzLv0iRRqgh4G3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Machine</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
canvas: '#0B0D0F', panel: '#111417', panel2: '#161A1E',
line: '#242A30', line2: '#2E353D', ink: '#E7EAED',
sub: '#8B939C', sub2: '#5C646D', accent: '#3B82F6',
red: '#EF4444', amber: '#F59E0B', green: '#22C55E',
},
fontFamily: { sans: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }
}
}
}
</script>
<style>
body { background: #0B0D0F; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #2E353D; border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; }
.qr {
background-image:
repeating-linear-gradient(0deg, #E7EAED 0 6px, transparent 6px 12px),
repeating-linear-gradient(90deg, #E7EAED 0 6px, transparent 6px 12px);
background-blend-mode: screen;
opacity: 0.9;
}
.blink { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
</style>
</head>
<body class="text-ink font-sans text-[13px]">

<div class="h-[1024px] flex flex-col bg-canvas">

<header id="header" class="border-b border-line bg-panel flex items-center justify-between px-4 h-12 shrink-0">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<div class="w-5 h-5 rounded bg-accent flex items-center justify-center"><i class="fa-solid fa-diagram-project text-white text-[10px]"></i></div>
<span class="font-semibold text-[13px]">Porch</span>
</div>
<div class="h-4 w-px bg-line"></div>
<div class="flex items-center gap-1 text-[12px]">
<a href="#" class="text-sub hover:text-ink">Site</a>
<span class="text-sub2">/</span>
<span class="text-ink font-medium">Add machine</span>
</div>
</div>
<button class="flex items-center gap-2 h-7 px-2.5 rounded bg-panel2 border border-line text-[12px] text-sub">
<i class="fa-solid fa-magnifying-glass text-[11px]"></i><span>Find</span>
<span class="px-1 py-0.5 rounded bg-canvas border border-line text-[10px] font-mono text-sub2">⌘K</span>
</button>
</header>

<main class="flex-1 overflow-y-auto px-6 py-8">
<div class="max-w-[880px] mx-auto">

<h1 class="text-[18px] font-semibold mb-1">Add a machine</h1>
<p class="text-[12.5px] text-sub mb-6">Install the agent, then pair it with this site.</p>

<div class="grid grid-cols-[1fr_300px] gap-6">

<!-- steps -->
<div class="space-y-3">

<div class="border border-line rounded-md bg-panel px-4 py-3.5">
<div class="flex items-center gap-2 mb-2">
<span class="w-5 h-5 rounded-full bg-accent text-white text-[10px] font-semibold flex items-center justify-center">1</span>
<span class="text-[13px] font-medium">Install the agent</span>
</div>
<div class="flex items-center justify-between rounded bg-canvas border border-line px-3 py-2">
<code class="font-mono text-[12px] text-sub">curl -fsSL porch.dev/install.sh | sh</code>
<button class="text-[11px] text-sub2 hover:text-ink"><i class="fa-regular fa-copy"></i></button>
</div>
</div>

<div class="border border-line rounded-md bg-panel px-4 py-3.5">
<div class="flex items-center gap-2 mb-2">
<span class="w-5 h-5 rounded-full bg-accent text-white text-[10px] font-semibold flex items-center justify-center">2</span>
<span class="text-[13px] font-medium">Pair with this site</span>
</div>
<div class="flex items-center justify-between rounded bg-canvas border border-line px-3 py-2">
<code class="font-mono text-[12px] text-sub">porch pair --site=foreman-hq</code>
<button class="text-[11px] text-sub2 hover:text-ink"><i class="fa-regular fa-copy"></i></button>
</div>
</div>

<div class="border border-line rounded-md bg-panel px-4 py-3.5 opacity-50">
<div class="flex items-center gap-2 mb-2">
<span class="w-5 h-5 rounded-full bg-panel2 border border-line text-sub2 text-[10px] font-semibold flex items-center justify-center">3</span>
<span class="text-[13px] font-medium">Name it</span>
</div>
<input type="text" disabled placeholder="e.g. tower-03" class="w-full bg-canvas border border-line rounded px-3 py-2 text-[12px] text-sub2 placeholder:text-sub2">
</div>

<div class="pt-2">
<div class="text-[10px] uppercase tracking-wide text-sub2 mb-2">Already on site</div>
<div class="space-y-1">
<div class="flex items-center gap-2 px-3 py-2 rounded border border-line bg-panel text-[12px]">
<span class="dot bg-green"></span><span>tower-01</span><span class="text-sub2 ml-auto font-mono text-[11px]">online</span>
</div>
<div class="flex items-center gap-2 px-3 py-2 rounded border border-line bg-panel text-[12px] opacity-50">
<span class="dot bg-sub2"></span><span>tower-02</span><span class="text-sub2 ml-auto font-mono text-[11px]">offline</span>
</div>
<div class="flex items-center gap-2 px-3 py-2 rounded border border-line bg-panel text-[12px]">
<span class="dot bg-green"></span><span>gpu-box</span><span class="text-sub2 ml-auto font-mono text-[11px]">online</span>
</div>
</div>
</div>
</div>

<!-- pairing card -->
<div class="border border-line rounded-md bg-panel h-fit">
<div class="flex items-center justify-between px-3.5 py-2.5 border-b border-line">
<span class="text-[12px] font-medium">Pairing</span>
<span class="flex items-center gap-1.5 text-[10px] text-amber font-mono">
<span class="w-1.5 h-1.5 bg-amber rounded-full blink"></span>waiting
</span>
</div>
<div class="p-5 flex flex-col items-center">
<div class="w-[160px] h-[160px] qr rounded border border-line2 bg-canvas"></div>
<div class="font-mono text-[15px] tracking-[0.2em] font-semibold mt-4 px-3 py-1.5 rounded bg-canvas border border-line">7F3K-91QD</div>
<div class="text-[10px] text-sub2 font-mono mt-2">expires in <span class="text-red">04:52</span></div>
</div>
<div class="px-3.5 py-3 border-t border-line space-y-1.5">
<div class="flex items-center gap-2 text-[11px] text-sub"><i class="fa-solid fa-check text-green text-[9px] w-3"></i>agent installed</div>
<div class="flex items-center gap-2 text-[11px] text-sub"><i class="fa-solid fa-check text-green text-[9px] w-3"></i>tunnel opened</div>
<div class="flex items-center gap-2 text-[11px] font-medium"><i class="fa-solid fa-spinner text-[9px] w-3"></i>waiting for pairing…</div>
</div>
</div>

</div>
</div>
</main>

<footer class="h-6 shrink-0 border-t border-line bg-panel flex items-center justify-between px-4 text-[10px] font-mono text-sub2">
<span>3 machines</span>
<span>pairing session active</span>
</footer>
</div>

</body>
</html>
Loading
Loading