dun-web: the marketing page's feature section, cloned from one capture - #76
Jing-yilin wants to merge 1 commit into
Conversation
A clone-prototype run over one 1954 x 982 web capture: the eight-card bento grid on Dun's marketing page, where each pastel card carries a handwritten label, a paragraph and a piece of the product's own UI. Eight boards across three rows -- a colour and radius sheet, a type and metrics sheet, four evidence boards for 94 tokens, the replica, and the capture parked under it. The capture is 1x, a web page screenshot rather than a device one, so capture px and design px are the same number: no scale constant in gen.py, no --pt on any probe, and crops.json holds plain page coordinates. Mean absolute delta is 4.86 levels of 255 over the whole frame and 3.19-9.21 per card, the spread tracking how much of a card is small type. Three findings are in the folder README because a reader would otherwise take them for measurement. A faded row's tile does not fade with its contents -- the tile holds .78 while the contents go to .04 -- so the tile is painted behind an opacity wrapper, and the estimator that separates the two only works with both windows at the same x, because that is what cancels the cards' right-edge fade. The two dark pills are a gradient whose plane fit extrapolates below black, so the ramp starts at #000000 and the residual is recorded rather than papered over with a stop. And the card radius is 36, not the 28 refkit bbox reports off a corner crop: that number is the corner's chord, and a circle fit plus a render sweep both say 36. Chrome is CSS. The eight photographs, brand marks and cursors are crops of the capture at their measured boxes, keyed in crops.json, because a crop scores 0 by construction. The 17 line icons are inline SVG from assets/icons/, each at its measured ink box. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Deploying super-prototyping with
|
| Latest commit: |
5a0fb03
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://85759520.super-prototyping.pages.dev |
| Branch Preview URL: | https://clone-dun-web.super-prototyping.pages.dev |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5a0fb0332c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| if not f.exists(): | ||
| continue |
There was a problem hiding this comment.
When assets/refs/ exists but 01.png is absent or misnamed, this silently skips every crop and continues using the previously committed artwork, so a user can believe they rebuilt against a new capture while the generated board still embeds stale assets. Since every crop in this canvas names that single required reference, fail when it is missing rather than continuing.
AGENTS.md reference: AGENTS.md:L81-L82
Useful? React with 👍 / 👎.
1 participant
A
clone-prototyperun over one 1954 × 982 web capture: the eight-card bentogrid on Dun's marketing page, where each pastel card carries a
handwritten label, a paragraph and a piece of the product's own UI.
Open it with
?canvas=dun-web— hosted: https://prototyping.rescience.com/?canvas=dun-webEight boards across three rows. A colour and radius sheet, a type and
metrics sheet, four evidence boards for the 94 tokens, the replica at
1954 × 982 with its own
w/h, and the capture parked directly under it(gitignored, so a fresh clone has 7).
gen.pyemits all of it pluslayout.jsonandicon.png, byte-identically.The capture is 1× — a web page screenshot, not a device one — so capture px
and design px are the same number. There is no scale constant in
gen.py, no--pton any probe, andcrops.jsonholds plain page coordinates.How close it lands. Mean absolute delta 4.86 levels of 255 over the whole
frame, 3.19 (Projects) to 9.21 (Comments) per card, the spread tracking how
much of a card is small type.
refkit blendputs the best shift at dy 0.00,refkit tokens .passes, andrefkit batch probes.jsonreplays all 90 probesagainst the render.
Three things a reader would otherwise take for measurement, all written up
in
mockups/canvases/dun-web/README.md:while the contents go to .04, so the tile is painted behind an opacity
wrapper rather than sharing one alpha. The estimator that separates the two
only works with both windows at the same x — that is what cancels the cards'
own right-edge fade.
black, so the ramp starts at
#000000and the residual is recorded insteadof being papered over with a stop offset.
refkit bboxreports off a cornercrop: that number is the corner's chord. A circle fit and a render sweep both
say 36, and fixing it took the whole frame from 4.91 to 4.86.
Artwork is cropped, not drawn. The eight photographs, brand marks and
cursors are crops of the capture at their measured boxes, keyed in
crops.json, because a crop scores 0 by construction. The 17 line icons areinline SVG from
assets/icons/, each placed at its measured ink box.Every foundation board passes
refkit shoot --check-overflow: the swatches andthe type specimens together overflowed one 478 × 980 shape by 573px, so the
specimens and the metrics moved to
00b-type, and an evidence board is nowfilled to a height rather than to a row count and the table split evenly across
the boards it needs.
🤖 Generated with Claude Code