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

[pseudoseed]

Closes #74. The coverage map and previews landed earlier; this adds the markup under them and corrects what the previews implied.

Problem

#74 asked for three things. Two were done: the FR coverage map and MANIFEST.md. The third — the HTML — was not, because no builder harness has the uxpilot MCP, so it had to come through the architect session. Without it, the FRD's requirements rested on 2 extracted screens and 25 PNGs, and every viewport claim in MANIFEST.md was inferred from a preview image.

Root cause of the bad viewport labels

useCase — the field that reads like the answer — is wrong on 14 of 27 designs. All 14 say desktop (1440x1024), including the three 1024x1366 iPad screens. Measured dimensions is the only trustworthy width.

Group names are not viewports either:

Group	MANIFEST 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
Porch Site Mobile Redesign	—	7 desktop 1440, 1 tablet, 1 phone
The three Group with Porch - * singles	iPad	correct

The finding that matters

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

	Family A — "porch"	Family B — "IDE"
Fonts	Fraunces / Space Grotesk / IBM Plex Mono	Inter / JetBrains Mono
Ground	#EDE8DE throughout	#0B0D0F dark or #F5F1E8 light, inconsistent
Hierarchy	nested lots and plots, 0 chevrons	sidebar tree, 10–16 chevrons
Count	11	16
Generated	00:11–00:24, and 01:37	00:30–01:19

Family A governs. Recorded as a decision in MANIFEST.md so it can be overridden:

1. The three most recent designs on the page are Family A — the iPad trio at 01:37.
2. Every shipped artifact is Family A: tokens.css, tokens-dark.css, 01-site.html, 02-gate.html.
3. The iPad is the MUST-tier target since FR-7 was promoted from SHOULD to MUST at FRD rev. 6, and all three iPad screens are Family A.

Family B stays in the repo as recorded exploration. alggCr6fYS7YFpxmiGWt is the strongest argument on record for a conventional tree sidebar over containment, and FR-1 now rejects it deliberately rather than by omission.

This matters because the naive reading — "use the newest design" — picks the wrong family. Family B has the majority of the designs and a group named "Mobile Redesign."

Provenance, measured

01-site.html and 02-gate.html were extracted before the pull. Jaccard token overlap against all 27:

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 unambiguous. Neither local file is an invention.

Two build traps, recorded

1. Every design loads Tailwind from cdn.tailwindcss.com and Font Awesome from cdnjs. Mockup scaffolding; the React 19 + Vite client must not.
2. Family A mockups still load Space Grotesk where tokens.css shipped IBM Plex Sans (PR [Research] v2 UI: swap Space Grotesk for IBM Plex Sans #51). tokens.css wins; the HTML is stale on that line.

Testing

• 27 of 27 written, 0 truncated (hasMore false on every design at htmlLimit: 100000).
• Font/ground/chevron classification run across all 27 files, not sampled.
• Provenance overlap computed against all 27, not against the expected match alone.
• Composition confirmed visually for lxhbQ26SZ1QzUt8vTpUK, alggCr6fYS7YFpxmiGWt, GyhcwHplwDsZ0ENiyTnI, jClfsPTbpz9rne4YAGBh, YjOhy7S3Pz06oilXMo6R and 01-site.png.

Research artifacts only. No source file changes.

🤖 Generated with Claude Code