Repository navigation
notion-ios: the Plus & Notion AI purchase sheet, boards 16–18 - #62
Conversation
Three boards added to the Notion example canvas from Mobbin captures of the in-app Plus & AI paywall. They inline the shared token block byte-identically and keep the paywall's own values (sheet top at 58pt, the lighter StoreKit blue, iOS system blue on the alert) in a board-local block, with the README saying why each stays out of the tokens. The cat and sparkles are hand-drawn SVG paths, not cropped artwork, and the README says so. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Deploying super-prototyping with
|
| Latest commit: |
1fd86b1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://91407e7a.super-prototyping.pages.dev |
| Branch Preview URL: | https://notion-purchase-sheet.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: 148e2ce8fa
ℹ️ 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".
| @@ -0,0 +1,189 @@ | |||
| <!DOCTYPE html> | |||
There was a problem hiding this comment.
When this canvas is regenerated or maintained, the three new screens cannot be reproduced because the commit adds only hand-authored HTML and there is still no gen.py anywhere under mockups/canvases/notion-ios. Add the generator source and produce all three boards from it rather than making the generated files the only copy of their implementation.
AGENTS.md reference: AGENTS.md:L46-L47
Useful? React with 👍 / 👎.
| Three screens added later from 881 × 2000 Mobbin captures | ||
| (`881 / 393 = 2.242 px/pt`, footer strip excluded), read off the images | ||
| rather than probed, so treat their metrics as ±1 pt. What they add on top |
There was a problem hiding this comment.
For screens 07–09, this explicitly substitutes values read by eye for probes, while the reviewed tree contains neither probes.json nor crops.json. Consequently the new positions, colors, and stated ±1 pt accuracy cannot be checked or reproduced as measurement evidence; commit the probe and crop manifests backing these additions.
AGENTS.md reference: AGENTS.md:L50-L51
Useful? React with 👍 / 👎.
…rated The three boards are re-measured against the Mobbin captures with refkit and diffed at capture scale until every glyph box, edge and colour agrees within 0.5pt: the stock 17pt status bar placed by hand, the segmented control's true inset and shadowless pill, the card's three-layer shadow and 40pt fade, the 54.4pt spinning button in the success state, the alert's shadow. The cat and the sparkle strokes are no longer hand-drawn SVG: they are gpt-image-2 redraws of the capture's crops through artgen, scored in art-gen.json. The Dynamic Island stays, as the one deliberate deviation. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: db372b9aaf
ℹ️ 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".
| - **The cat and the sparkles are generated, not drawn.** Both are crops of | ||
| the capture in `assets/art/` (198 × 250 and 77 × 88 px), redrawn by | ||
| `gpt-image-2` through `artgen` in one two-cell, white-ground, | ||
| geometry-anchored grid at high quality, keyed, and shipped at 3× the | ||
| measured box as `assets/cat.png` and `assets/spark.png`. `art-gen.json` | ||
| has the scores: cat 13.97 and sparkles 10.9 against the crop's 0, both |
There was a problem hiding this comment.
When any of the three new boards is rendered, it embeds the generated assets/cat.png and assets/spark.png even though the exact capture crops are already committed under assets/art/. The accompanying manifest records deltas of 13.97 and 10.9 for these redraws versus 0 for the crops, and this README notes a visible 4 pt geometry error; this unnecessarily reduces the pixel accuracy that the clone workflow in skills/clone-prototype/SKILL.md:306-318 requires. Generate the boards using the committed crop assets instead.
Useful? React with 👍 / 👎.
|
|
||
| A real run of the `clone-prototype` skill, kept as the reference for what a | ||
| finished board looks like. One measured token block plus six replica screens, | ||
| finished board looks like. One measured token block plus nine replica screens, |
There was a problem hiding this comment.
This changes the Notion example from six replica screens to nine, but the repository's primary showcase still labels it notion-ios, six screens in README.md:50. Readers arriving through the project README therefore receive a stale description of the example and may not discover the three newly added boards; update that heading alongside this count.
Useful? React with 👍 / 👎.
# Conflicts: # mockups/canvases/notion-ios/README.md
Main gained 07–15 and a generator while this branch was open, so the three paywall boards move to the end of the row and their generator folds into gen.py as a section after the account flow, sharing TOKENS and BASE with the other eighteen. The scratch script that drew them is gone. The status bar's ink was --n-text where the capture's is black, which is why the battery's nub read 4pt short; the bar is #000 now, with the outline and nub at .5 and .55. Nineteen probes for the sheet join probes.json against the captures resampled to 3 px/pt, and the README's "How close it lands" tables carry rows 16–18. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Jing-yilin
changed the title
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1fd86b16e3
ℹ️ 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".
| | 14 | Verification code | 4 | 0.07 | 0.00 | 0.3 | | ||
| | 15 | Code typed | 1 | 0.00 | 0.00 | 0.0 | | ||
| | 16 | Plan sheet, monthly | 13 | 0.35 | 0.65 | 3.6 | | ||
| | 17 | Plan sheet, yearly | 16's probes, the other card selected | | | | |
There was a problem hiding this comment.
Fresh evidence in the current tree shows that probes.json now covers screens 16 and 18 but contains no mine entry for 17-plan-plus-ai-yearly.png and no probe against s2.png; this row merely claims screen 16's probes apply. Consequently refkit batch can pass when the yearly-only left-card selection or yearly CTA drifts, so add probes against the second capture for the properties that differ.
AGENTS.md reference: AGENTS.md:L50-L51
Useful? React with 👍 / 👎.
| def png(name): | ||
| b = (OUT / "assets" / (name + ".png")).read_bytes() | ||
| return "data:image/png;base64," + base64.b64encode(b).decode() |
There was a problem hiding this comment.
When an artgen rerun changes the selected return, fit, or score, png() reads only the resulting PNG bytes and no code parses art-gen.json, while the README independently hard-codes those results. This leaves the new manifest disconnected from the generated evidence and allows the boards and documented deltas to diverge silently; load the manifest in gen.py and derive or validate the generated-art evidence from it.
AGENTS.md reference: AGENTS.md:L65-L66
Useful? React with 👍 / 👎.
Summary
Three boards added to the Notion example canvas, replicating captures of the in-app Plus & AI paywall:
16-plan-plus-ai-monthly— the plan sheet with the monthly price selected17-plan-plus-ai-yearly— the same sheet with the yearly price selected18-purchase-success— the monthly sheet dimmed under the StoreKit "You're all set" alert, subscribe button spinningThey were 07–09 when the PR opened; #61 landed 07–15 and
gen.pyin the meantime, so the branch is merged with main, the boards renumbered, and their generator is now a section ofgen.py(paywall(), after the account flow) so every one of the nineteen boards sharesTOKENSandBASEbyte-for-byte.layout.jsonlists them as a fourth row, Flow: the purchase sheet. The READMEs say eighteen screens;RELEASE-NOTES.mdgets an Unreleased bullet.Measured to the captures
Every board was measured against its capture with
refkit(bbox, row and column scans) and the 3× render diffed against it, resampled to the capture's 2.2417 px/pt, until every glyph box, edge and colour agreed within 0.5 pt. Mean absolute delta over the whole phone crop is 5.02 / 5.23 / 4.27; below the status bar 2.61 / 2.83 / 2.26. The rest is the Dynamic Island, which the captures lack and every board in the repo draws, kept as the deliberate framing the README already describes.Nineteen probes for the sheet join
probes.json, against the captures resampled to 3 px/pt (assets/refs/s1–s3.png, not committed, like the others) so the whole file still replays with one--pt 3. Box probes: 17 at a mean |dw| of 0.32 and |dh| of 0.59; the two above half a point are the generated cat's hind leg (3.6) and the selected card's height, where the resample blurs the capture's 2pt border. The README's How close it lands tables carry rows 16–18 and name both.The paywall's own values sit in a board-local block after the shared tokens, with the README saying why:
--n-sheet-top's 68--n-text, which left the battery's nub 4 pt short at the probe's threshold)#4E7AB0, selected price card#487ED0on#E7F3FF, subscribe#4380D7, alert OK#367CEF; none is--n-blueGenerated art
The cat and the sparkle strokes are
gpt-image-2redraws of the capture's crops (assets/art/) throughartgen, keyed and shipped at 3× the measured box (assets/cat.png,assets/spark.png).art-gen.jsonrecords the scores: cat 13.97, sparkles 10.9 against the crop's 0, with a second independent return at 14.56 and 11.12 that did not beat the first. Two returns, about US$0.50. The redraw rather than the crop was the brief for this PR, and the README says what it costs (the hind leg).Review comments
gen.pyoutputprobes.json, replayed aboveTest plan
python3 gen.pyrewrites all nineteen boards; 00–15 byte-identical to main'srefkit shootrenders 16–18 at artboard size, fits 478 × 980 (--clip-ok div.hero, the fade window clipping the card is intentional)TOKENSandBASEfound verbatim in every boardrefkit diffagainst each capture: 5.02 / 5.23 / 4.27 whole frame, 2.61 / 2.83 / 2.26 below the status barrefkit batch scratch/probes-pw.json --against <3x shots> --pt 3: 17 box probes, mean |dw| 0.32, |dh| 0.59?canvas=notion-iosand check the three boards land in a fourth row after the account flow🤖 Generated with Claude Code