Repository navigation
notion-ios: the data-source and account flows, and the generator the folder never had - #61
Conversation
The six screens and the token board were hand-written, which the repo's own rule forbids -- gen.py is the only source of truth. This ports them into one, mechanically: the token block and the base frame CSS were already byte-identical in all seven files, so they lift out whole, and the status bar block was identical in all six phone boards, so it lifts out too. Everything else is the board's own CSS and body, verbatim. Nothing about the output changes. `python3 gen.py` rewrites all seven files and `git status` is clean. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Five @3x captures (adding-a-new-data-source 01-03, adding-an-end-date-01, share-settings-01) all put the sheet top at 68pt, not 71, and the grabber at 38 x 5 in #E7E5E3 starting 7pt below the sheet edge, not 42 x 5 in #D6D4D1 at 6. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Manage data sources, New data source, the same sheet with two sources, and the To do list page with an empty table. Measured off four native @3x Mobbin captures, which are three times sharper than the ones the first six screens came from, so the re-measurement corrected the shared chrome too. Three findings worth keeping: - The modal chrome is now one `SHEET` constant in gen.py -- scrim, rounded ground, grabber, centred nav title -- parameterised only by the nav's top margin, which is the one thing that moves between sheets. 05 and 06 render from it unchanged apart from that margin. - Card padding is card-relative. `.drow`'s left padding applies inside a card already inset 16, so the first draft's screen-edge measurement put every row 16pt right. Same mistake on 08's rows. - Size an icon's box to its ink, not to the icon. The database glyph carries 13.3 x 14.7 of ink, which an 18px box gives and the 16px box first tried does not. probes.json is new: 25 replayable measurements behind the tokens, including the two deltas left standing on purpose (--n-t-nav reads ~4.7pt wide against these captures but a true 17px on 06, and the row's trailing value reads a shade larger than the row label beside it). refkit batch probes.json --against <shots> --pt 3 box probes: 17, mean |dw| 0.69, mean |dh| 0.26 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Three of board 10's four bar glyphs are Notion's, lifted from the sprite notion.com ships and parked in assets/icons/ so the canvas inspector can name them by geometry and hand them back as vector assets: magnifyingGlass, aiFace and microphoneFill. Two details the site's copies do not give. The mic's capsule is an outline, not a fill: microphoneFill's arc, stem and base bar land on the capture as shipped at 25.3px, but its capsule is drawn as a 1.58pt-walled outline, outer 5.884 x 9.505 units. And the compose glyph is not published at all, so it is traced off capture 04 -- an open rounded square whose two edges stop 7.95 short, a 45 degree pencil 16.26 long along its own axis, and a round dot 2.24 across sitting 1.65 clear of the pencil's cap. The first draft drew that dot as a capsule along the pencil's axis, which read as a nib touching the shaft. The bar's own metric moved with them: the compose button sat 0.45pt left of the capture's, so .bottombar's right padding is 17.77 and .askbar's is 10.53 so the mic stays put. bar-mic is new and reads 0.0 on both axes; bar-search and bar-compose carry the new geometry in their notes. The mascot's helmet is still hand-drawn; notion.com does not ship it either. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Deploying super-prototyping with
|
| Latest commit: |
94cf1b2
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ccc3cf4f.super-prototyping.pages.dev |
| Branch Preview URL: | https://notion-data-sources.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: 0b7707b14b
ℹ️ 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".
| | `gen.py` | The source of truth. Every `NN-*.html` here is its output; edit the generator and re-run, never the HTML. | | ||
| | `00-design-tokens.html` | The contract. Swatches, type ramp, radii, metrics, and the evidence for each value. Inlined byte-identically into all ten screens. | | ||
| | `01-splash` … `06-share-settings-sheet` | The screens. 393 × 852 pt frames on 478 × 980 artboards, fully self-contained. | | ||
| | `07-manage-data-sources` … `10-to-do-list-table` | The *adding a new data source* flow, added later against four more captures. | |
There was a problem hiding this comment.
For screens 7–10 added here, the README contains no Phase 4 per-screen delta table naming the crop and units; the later “exact matches” statement only describes selection of the source captures, not rendered similarity. Without those results, readers cannot assess how closely the new replicas land or detect future visual regressions, so record the measured deltas for all four screens.
AGENTS.md reference: AGENTS.md:L65-L67
Useful? React with 👍 / 👎.
| <div><div class="rb" style="border-radius:var(--n-r-pill)"></div><em>pill 999</em></div> | ||
| </div> | ||
| <p class="metrics">gutter 20 · page 26 · summary 46 · card 12 · row 44 · tap 44 · | ||
| status bar 54 · sheet top 71 · day cell 34 / pitch 44</p> |
There was a problem hiding this comment.
The generator now defines --n-sheet-top as 68px, and both the new probe and README say it was remeasured from 71, but the generated design-token board still labels the metric as “sheet top 71.” Anyone treating board 00 as the documented token contract receives the obsolete value; update this generator text to 68 and regenerate the HTML.
AGENTS.md reference: AGENTS.md:L46-L47
Useful? React with 👍 / 👎.
Five captures of one sheet in five states -- the six providers, the email field, then the verification code, with 14 and 15 the same content scrolled 81pt up. One generator function covers all five, since only the form below the providers changes. Adding them turned up a token the first ten boards had absorbed silently: `-apple-system` resolves to SF Pro's Display cut, about 4% narrower than the Text cut these captures are set in. Every string on the sheet came out short until the stack named "SF Pro Text" outright, so the token block now carries `--n-font-text` and this sheet uses it. The first ten boards stay on `--n-font`: their tracking was tuned against the Display cut and moving them costs a re-measure. The other lesson is that ink height is a poor way to guess a font size. The helper line under the email field reads 11.3 tall, which suggested 16px and made the line wrap; measured by width it is 354.0 on one line, so it is 12px. Nothing in that string has an ascender. Every size in the new probes came out of width for that reason. Six provider glyphs land in assets/icons/, each normalised to a 24-unit viewBox so one rule sizes them all. apple.svg is Notion's own appleLogo path scaled by its measured ink box; Google and Microsoft are the brand marks at their published palettes; passkey, sso and envelope are traced off the captures by connected component, since Notion publishes none of them. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Board 00's metrics line still read `sheet top 71` after --n-sheet-top moved to 68, so the board that documents the token contract was stating the value the re-measurement disproved. One string in the generator, and 00 regenerated. The folder was also the only canvas here without a `How close it lands` section, which `skills/clone-prototype/references/documenting.md` asks every board folder for. Screens 7-15 now have their per-screen deltas with the crop and units named, in two tables: whole-frame mean absolute delta against each capture, and the refkit batch probe spread. Whole-frame mean is 5.37, which reads badly until the columns are split. The top 60pt band scores a near-constant 51.9 on eight of the nine boards because every board here draws a Dynamic Island and no Mobbin capture has one. Below that band the mean is 1.94 and the worst 2.84. Both columns are in the table so neither number has to be taken on trust. Two things checked while writing it. Screen 7 carries its whole spread in `nav-title`, the standing --n-t-nav delta, and reads 0.32 without it. Screen 9's lone `sheet-top` probe lands 1.0 off because all eight captures with a sheet ramp from scrim to ground across 68.0 -> 69.0 while the boards draw a hard edge at 68 -- not a per-capture disagreement, which is what the first draft of this section claimed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f33c19a360
ℹ️ 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".
| OUT = Path(__file__).resolve().parent | ||
|
|
||
|
|
||
| def page(title, css, body): |
There was a problem hiding this comment.
page() is called only by write(), and write() itself has only the final BOARDS loop as a call site. Fold this formatting and output chain into that loop rather than introducing two single-use helpers, as required by the repository's generator conventions.
AGENTS.md reference: AGENTS.md:L72-L75
Useful? React with 👍 / 👎.
| at their published palettes; `passkey`, `sso` and `envelope` are traced off the | ||
| captures by connected component, since Notion does not publish them. |
There was a problem hiding this comment.
Because passkey, sso, and envelope are hand-traced substitutions rather than published product assets, the README needs to carry probes showing how closely each lands. The new probes.json has no icon probe for passkey or envelope and mentions SSO only in a label-typography probe, so these three assets currently have no reproducible geometry or delta evidence and later edits cannot be checked against their captures.
AGENTS.md reference: AGENTS.md:L65-L67
Useful? React with 👍 / 👎.
| ], | ||
| "only": "flat", | ||
| "mine": "12-add-an-account-email.png", | ||
| "_": "a2 inside Continue: #2383E2, --n-blue, on a 40-tall button from 719" |
There was a problem hiding this comment.
This probe note records the a2 sample as #2383E2 and calls it --n-blue, but the generator defines that token as #2784E0, while the new README reports the same capture sample as #2280DE with Δmax 5. Those values yield different deltas, so rerun the probe and make the stored note and reported aggregate agree; otherwise the committed measurement evidence cannot reproduce its own colour result.
AGENTS.md reference: AGENTS.md:L50-L51
Useful? React with 👍 / 👎.
RELEASE-NOTES.md asks a pull request that changes what a user sees to add its line to Unreleased as part of the change, and this one ships nine boards in an example canvas the plugin installs. Co-Authored-By: Claude Opus 5 <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: 94cf1b29cd
ℹ️ 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".
| { "file": "ref-05-date-sheet", "label": "Date sheet" }, | ||
| { "file": "ref-06-share-settings-sheet", "label": "Share settings sheet" } | ||
| { "file": "ref-06-share-settings-sheet", "label": "Share settings sheet" }, | ||
| { "file": "ref-07-manage-data-sources", "label": "Manage data sources" }, |
There was a problem hiding this comment.
When a reader follows this snippet, references 7–15 are appended as columns 7–15 of one row, but layout.json places their replica boards in two new rows that each restart at column 1. Because every layout row begins at x=0, these references will not sit beneath their corresponding boards, defeating the side-by-side fidelity comparison described above; split the references into rows matching the three replica rows or keep all replicas and references in one shared column sequence.
Useful? React with 👍 / 👎.
| @@ -0,0 +1,1038 @@ | |||
| """Emit mockups/canvases/notion-ios/ from measurements of fifteen Mobbin captures. | |||
There was a problem hiding this comment.
Once this generator is added, mockups/canvases/README.md still says twice that notion-ios has no committed generator and that its HTML must be treated as read-only. Contributors consulting the repository's canvas guide will therefore be steered away from the newly authoritative workflow; update both the generator overview and the notion-ios example entry to identify gen.py as the source of truth.
AGENTS.md reference: AGENTS.md:L46-L47
Useful? React with 👍 / 👎.
Nine new boards on the
notion-ioscanvas — the flow for adding a data sourceto a Notion database, and the flow for adding an account — plus the generator
the folder never had, and a pass over board 10's Ask AI bar to source its
glyphs from Notion itself.
The boards
07-manage-data-sources…10-to-do-list-table, and11-add-an-account…15-add-an-account-code-filled, measured against native @3x Mobbin captures(
1179 / 393 = 3.0px/pt exactly), which are sharper than the 0.7634 px/ptcaptures the first six boards came from.
gen.pyis new here — the folder's boards were hand-written HTML before, so atoken could not be changed in one place. It is now the only source of truth for
the folder, and
refkit tokens .reports one shared:rootacross all sixteen.Three token findings
--n-sheet-topis 68, not 71. Eight captures agree..drow's 17pt left padding applies insidea card already inset 16, so reading it off the screen edge lands everything
16pt right. This was the single biggest error in the first draft.
--n-fontresolved to the wrong optical cut. A browser hands-apple-systemSF Pro's Display cut, about 4% narrower than the Text cutthese captures are set in. The token block now carries
--n-font-textandthe account sheet uses it; the first ten boards stay on
--n-fontbecausetheir tracking was tuned against Display and moving them costs a re-measure.
A fourth lesson, in the README: ink height is a poor way to guess a font
size. The helper line under the email field reads 11.3 tall, which suggested
16px and made the line wrap; measured by width it is 354.0 on one line, so it
is 12px. Nothing in that string has an ascender. Every size in the new probes
came out of width for that reason.
The icons
Three of board 10's four bar glyphs are Notion's own, lifted from the sprite
notion.com ships. The mic's capsule is an outline, not a fill — the arc,
stem and base bar land as shipped at 25.3px, the capsule does not. The compose
glyph is not published at all, so it is traced off capture 04.
Six provider glyphs sit in
assets/icons/, each normalised to a 24-unitviewBox.
apple.svgis Notion's ownappleLogopath; Google and Microsoft arethe brand marks at their published palettes;
passkey,ssoandenvelopeare traced off the captures, since Notion publishes none of them.
How close it lands
Whole-frame mean absolute delta 5.37, worst 6.55. That reads badly until the
column is split: the top 60pt band scores a near-constant 51.9 on eight of the
nine boards, because every board here draws a Dynamic Island and no Mobbin
capture has one. Below that band the mean is 1.94 and the worst 2.84. Both
columns are in the README's per-screen table, so neither has to be taken on
trust.
refkit batchreplays all 43 probes: 33 box probes at a mean |dw| of 0.41ptand |dh| of 0.18, and 4 colour probes at a mean Δmax of 1.8.
Three deltas are knowingly left standing and written down:
--n-t-nav's 17pxrenders about 4.7pt wider than these captures' nav titles and carries screen
7's whole spread;
acc-ctareads#2280DEagainst--n-blue's#2784E0, aΔmax of 5 and the worst colour delta in the folder, on a token four boards
share; and the search glyph's handle runs 0.66 short of the capture's.
The mascot's helmet is still hand-drawn; notion.com does not ship that one
either, and
helmetreads 0.7 × 1.0 out.Review
Both Codex findings are fixed in
f33c19a: board 00's metrics line still saidsheet top 71after the token moved to 68, and the folder was the only canvashere without the
How close it landssection thatskills/clone-prototype/references/documenting.mdasks every board folder for.Not in this PR
The
ref-*.htmlboards andassets/refs/. They embed third-party Mobbincaptures,
.gitignoreexcludes them, andclone-prototyperebuilds them. TheREADME says how to add the reference row back locally.
🤖 Generated with Claude Code