canvases: grok-ios, fifteen Grok iOS screens with every icon a crop - #64
Conversation
Home Screen widget, two pages of the widget guide, the Voice Settings sheet over the companion scene, and the SuperGrok paywall, rebuilt from Mobbin captures. Nine boards from one gen.py: a token board, three evidence boards for 61 tokens, the five replicas; five ref-* boards park the captures and are gitignored. Every icon is a crop of the capture at its measured ink box plus 1pt rather than a drawing, so the folder has no assets/icons/. The two illustrations, the companion scene, the voice sheet and the paywall's smoke are crops too, inpainted before cutting so the CSS type lands on clean ground; the paywall's feature card has its material un-applied in the crop and re-applied by CSS. Five alphas are solved against those patched frames. Mean absolute delta against the captures: 0.26 / 0.90 / 0.89 / 1.00 on the four crop-led screens and 5.75 on the paywall, whose residue is glyph edges on eighteen lines of white type. probes.json replays 33 measurements; refkit tokens passes; regeneration is byte-identical. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Deploying super-prototyping with
|
| Latest commit: |
8d066e3
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e4e44761.super-prototyping.pages.dev |
| Branch Preview URL: | https://canvas-grok-ios.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: c896ce31a6
ℹ️ 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".
| ] | ||
| }, | ||
| { | ||
| "title": "Source of truth: Mobbin captures", |
There was a problem hiding this comment.
On a fresh checkout, where assets/refs/ is intentionally ignored, running python3 gen.py regenerates layout.json with only two rows and removes this committed source row. This means the checked-in layout is not reproducible from the folder's committed source of truth and a normal regeneration silently loses the reference positioning; make the generated layout independent of whether private captures happen to be present.
AGENTS.md reference: AGENTS.md:L46-L47
Useful? React with 👍 / 👎.
| f = ART_DIR / (cid + ".png") | ||
| return ("data:image/png;base64," + base64.b64encode(f.read_bytes()).decode() | ||
| if f.exists() else "") |
There was a problem hiding this comment.
If a committed crop is missing or renamed, _uri returns an empty string and the generator still succeeds, producing an <img src=""> instead of reporting that the canvas folder is incomplete. Since every art() call refers to required committed output, let read_bytes() fail so a broken asset set cannot be silently regenerated into blank boards.
AGENTS.md reference: AGENTS.md:L79-L80
Useful? React with 👍 / 👎.
Terms update, SuperGrok home, and the video maker as a sheet and with the keyboard up, from native 1290 x 2796 captures rendered and scored on their own grid (0.75-1.97 mean delta below the status bar). The status bar and island on these four are the template's, by request, not the capture's; the capture's own bar is patched out of the two full-frame crops and nothing above 59pt is compared. 36 new tokens with their evidence on two more boards, 29 new probes carrying their own scale, eleven more icon crops, a composer shadow fitted by sweep, and one token the replay corrected: the grey copy on 06 cored over a window that took in a black span. The token board is relaid as lists so 97 tokens fit the artboard, and the evidence boards drop to 22 rows so the first one no longer clips by 37px. 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: ef676415ea
ℹ️ 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 (REFS_DIR / (INPAINT.get(ref, (ref,))[0] + ".png")).exists(): | ||
| continue |
There was a problem hiding this comment.
When assets/refs/ exists but contains only some captures, this branch silently leaves the corresponding committed crops untouched while regenerating the others. The run therefore succeeds with a mixture of stale and newly cut assets, and the later _uri check cannot detect it because those stale PNGs still exist; require every referenced capture once refresh mode is entered rather than skipping missing sources.
AGENTS.md reference: AGENTS.md:L79-L80
Useful? React with 👍 / 👎.
…ing it 02 and 03 held the guide illustration as a crop of the capture. Now 03's phone is CSS (frame, island, ten tiles, side buttons, a mask with the capture's own fade profile) and 02 adds the add-widget sheet over it: a 12% scrim, the sheet with a swept halo, grabber, label, title and sub-line at swept sizes, two blurred ghosts, and the widget card as a flat 130 x 90.9 rectangle under one matrix3d fitted from the capture's four edges, with the pill and its label as flat children. The app icon, close disc and Grok mark inside the illustration stay crops (icons must match the source exactly), so the icon count is 34. Seventeen new tokens with sweeps as evidence (114, a sixth evidence board), twenty probes, and the token board's CSS tightened so it fits 980px again. 02 reads 1.42 and 03 1.04 against the captures (0.90 and 0.89 as crops). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The capture holds the companion scene only above the sheet's edge; below it every pixel is the scene blurred and dimmed, and cropping that was a screenshot of the sheet. The scene is now the patched capture above 403.6 and a gpt-image-2 edit of the same frame below it (masked to the sheet's box, the body's measured proportions in the prompt, medium quality since every high request is cut at 60 s), and the sheet is drawn: a 4px backdrop blur read off the voice pill's edge, a .40 black tint fitted through it, 1pt-line row cards at radius 13, the pill under the blur, and no home indicator, which the capture does not show. 04 reads 9.46 against 1.00 as a crop, nearly all of it the generated body under the sheet; README has the nine candidates and their scores. Five probes added (86). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Cut with the sheet's blurred ground in their margins, they showed as dark squares once the sheet was drawn. cut() now keeps their coverage as white on alpha, so the glyph is still the capture's over the board's own sheet. 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: d25c6d4828
ℹ️ 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".
| ("Metrics", "sheet-top", "59px", "02/03 sheet ground starts at 58.9"), | ||
| ("Metrics", "sheet-top-v", "403.6px", "04 sheet edge, col x100"), | ||
| ("Metrics", "widget", "162.4px", "01 widget 24.1-186.5 both axes"), | ||
| ("Metrics", "disc", "40px", "05 icon discs 40 x 39.8, left edge 40.3"), |
There was a problem hiding this comment.
On 05-supergrok, _root() emits this Metrics entry after the Surface entry, so --k-disc:40px overrides the measured --k-disc:rgba(255,255,255,.17). The five circles created in s05() therefore resolve to background:40px, which supplies no background color and leaves the feature-icon discs transparent. Rename or remove the size token and regenerate the boards rather than editing the generated HTML.
AGENTS.md reference: AGENTS.md:L46-L47
Useful? React with 👍 / 👎.
| every pixel is the scene blurred and dimmed under the Voice Settings sheet, | ||
| and a crop of that (`04-bg` and `04-sheet`, the first version, 1.00) is a | ||
| screenshot of the sheet rather than a replica of it. On request the ground | ||
| was regenerated and the sheet rebuilt in code. `assets/art/04-scene.png` is |
There was a problem hiding this comment.
Because 04-scene.png is the folder's generated asset, its shipped delta and individual generation runs need to live in a manifest that gen.py reads; the tracked grok-ios tree contains no art-gen.json or equivalent manifest. The prose only aggregates several candidate scores into ranges, so the selected asset's evidence cannot be consumed or checked by the generator as required for generated artwork.
AGENTS.md reference: AGENTS.md:L65-L67
Useful? React with 👍 / 👎.
The focus, hanger and trash icons in the voice screen's side discs were crops; by request they are now SVGs whose viewBox is the measured ink box in pt, inlined by icon() so the inspector names them as vector assets. Traced against the capture's coverage (15px median ground, row/column sums, ink area, a +-4px offset probe, a polar profile for the ring): flat #CDCECF ink (--x-side-ink, a grey and not white at an alpha), 1.7 focus with a 3.05 dot, 1.6 trash with a 1.4 lid, 1.3 hanger with a 2.3 bar read through the blue channel over its cloud ground. Ink areas within 5-10% of the capture, offset probe at 0; 04 whole-frame 9.51 -> 9.52. Three crops removed, three probes added, READMEs updated. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Five more Mobbin captures of the 393pt phone: the voice picker on Ara and on Eve, and the Settings sheet at the top, scrolled to Voice, and at the bottom. Boards 08 and 09 (the video maker) are removed. Nineteen new tokens with evidence rows (133 in all, 00b-00h), 40 new crops (61 icons in all), 33 new probes (110 in all). cp8, cp9 and cp12 carry a colour cast the other captures do not; a per-channel lookup fitted on what 12 shares with 11 is applied before sampling, and the README explains it. Two evidence rows shortened and the token board tightened so every 00 board fits the artboard again. Mean delta 0.73-1.67 on the five new screens. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
An icon audit (scratch/icons.py: every placed crop and SVG scored against the capture with a shift search) found crops set at their pt box landing up to half a capture pixel from where they were cut. art() now snaps each placement to the cut pixels. On the two native 3px/pt screens every icon is now an exact copy (delta 0.0 over its ink); on the Mobbin screens the placement is within one capture pixel and the residual is the 3x-to-2.2417 resampling of the scoring chain. README records the audit. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The Terms update and the SuperGrok home are rebuilt from native 1206 x 2622 captures of a 402pt phone, replacing the 430pt boards, and three screens from the same device join them: the Terms update with its spinner, the Introducing Grok Bot sheet, and the App Store sheet for Grok Bot. The five score 0.80-0.95 on the white pages, 4.77 on the sheet and 2.12 on the store. 167 tokens now, so the type ladder has its own board (00a) and the evidence pages break by estimated lines (00b-00j). The composer line, the glass sheet and the card halo are fitted by sweep; the evidence rows carry the grids. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UB5sVQvqWjrjvSuM6i6iT5
Jing-yilin
changed the title
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UB5sVQvqWjrjvSuM6i6iT5
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0c9418b40b
ℹ️ 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".
| "15 the App Store sheet's corner (top 62, left edge 0): insets 17.7/10.7/" | ||
| "6.0/3.3/1.7/0.7 at 5.7/11.3/17/22.7/28.3/34 down; r 38 gives 17.3/10.4/" | ||
| "6.4/3.5/1.6/0.5"), | ||
| ("Radius", "r-card", "18px", |
There was a problem hiding this comment.
On screens 02 and 03, the widget-guide card uses --k-r-card expecting the measured 26px value declared earlier, but this later 18px declaration for screen 14 overrides it in the shared :root, so both guide cards render with incorrect corners. Rename one of the tokens and regenerate the HTML boards from gen.py.
AGENTS.md reference: AGENTS.md:L46-L47
Useful? React with 👍 / 👎.
…o 3.83) The card's pale ellipse now fades along its own width with a thin ring 33pt outside it, one least-squares fit of that CSS to the card (4.26 to 2.55 over its box). The sheet starts at 445.3 with r 37 and white inset highlights, and the body copy is iOS's plus-darker grey, filled as a ramp of the capture's ground so lines 2-3 darken over the Got it pill. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UB5sVQvqWjrjvSuM6i6iT5
ref-14-grok-bot-sheet is un-ignored so the hosted canvas shows the native screenshot directly under its replica, as spotify-ios does for its captures. The other fourteen ref boards stay local. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UB5sVQvqWjrjvSuM6i6iT5
…5 join the flow The Build a Bot ball and the Gmail / GitHub / Notion trio were crops of a blurred capture. They are now the published artwork itself - asvg.app's logomark, Wikimedia's 2020 Gmail envelope, Iconify's invertocat and Notion mark - each one's own children under a single transform onto the box fitted against the capture, so nothing here is traced or redrawn. Placement is measured, not guessed: the bot lands at 10.80 mean levels against the capture and the trio's window at 11.33, both at offset 0 in a +-4 capture pixel search and f = 1.00 in a +-12% scale sweep. Being real <svg> in the board, the inspector names all four as vector assets instead of listing two PNG crops. 13-15 now sit between 06 and 07 in both rows: the sign-out spinner and the two Grok Bot sheets follow the Terms update they come from. The Screens row is the SCREENS list, so the move is the list's; ref_boards() takes each board's capture from its own NN prefix rather than its place in the row, which is what the number has always meant. The files keep their numbers - a board's number is the capture it was built from. 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: 8d066e3680
ℹ️ 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".
| which are flat grounds, white cards and crops. Every icon but three, 66 of | ||
| them, is a crop of the capture at its measured ink box rather than a | ||
| drawing, because a crop scores 0 by construction and most of the glyphs | ||
| are SF Symbols whose outlines cannot be redistributed; the three side | ||
| glyphs on the voice screen are SVGs in `assets/icons/`, traced against the |
There was a problem hiding this comment.
When readers use this catalogue to select an example for exact icon handling, it describes the state before the four publisher marks on screen 07 replaced two crops. The canvas README now documents 64 cropped icons and seven SVG exceptions, and assets/icons/ contains the three traced screen-04 glyphs plus the four publisher icons; leaving this at 66 crops and three exceptions misrepresents the example's shipped asset strategy.
Useful? React with 👍 / 👎.
1 participant
Summary
Fifteen screens of the Grok iOS app as one canvas,
mockups/canvases/grok-ios/, built theclone-prototypeway: onegen.py, a token board, a type board and nine evidence boards for 167 measured tokens, fifteen replicas, and the capture of each parked under its board.Mean absolute delta against the captures, y 58–838 on the Mobbin screens and y 59–874 on the native ones:
04's number is the companion scene under the sheet, the one ground the capture does not hold, generated with gpt-image-2 and scored against the capture's; 05's is eighteen lines of white type over an inpainted hero. 14's worst blocks are the Terms title under the scrim; its Grok Bot card is a least-squares fit of the CSS that draws it (a fading pale ellipse and a ring outside it), and its body copy is iOS's plus-darker grey over the glass, filled as a ramp of the capture's ground. The rest are crops, flat fills and type within a point of their measured boxes.
What the README records
assets/icons/, by request.probes.json, replayed withrefkit batch: 70 colour probes at a mean Δ of 2.6, 53 boxes at |dw| 0.35pt / |dh| 0.22pt, 15 edge scans. On the native screens every ink probe replays at Δ 0 and every fill within 3.Checks
python3 gen.pytwice, byte-identical output.refkit tokens .passes: one shared:root, everyvar()and evidence row defined.refkit shoot --check-overflow: all 26 boards fit the 478 × 980 artboard.Preview: https://canvas-grok-ios.super-prototyping.pages.dev/?canvas=grok-ios
🤖 Generated with Claude Code
https://claude.ai/code/session_01UB5sVQvqWjrjvSuM6i6iT5