# Screenshot-repair experiment — 2026-09-11

Built-in imagegen, one edit call. Input is the real 390px-mobile records crop, `before.png`. Output `proposal.png`; CSS implementation `implemented.png`. All three live in `eiko/img/designs/visual-fix/`.

## Visual diff

| Area | Original | Generated proposal | Implemented |
| --- | --- | --- | --- |
| Inner gutter | 0px, content on card borders | Clear left/right inset | Consistent 18px |
| Header | About 21px content height plus top-only padding | Even padded headers | 56px minimum; grows for wrapping |
| Fee metrics | Four tall rows | 2×2 grouping | 2×2 on mobile; same labels/values |
| LP footer | Amount against lower edge | Separator and padding | Separator; original data/geometry |
| Fee columns | Left headings/right numeric cells | Better alignment | Shared columns and right-aligned numeric headers |
| Overview toggle | Native marker | Adds a second arrow | One arrow; native keyboard toggle |

The generated proposal visually preserved the listed values in this run. It also resynthesized fonts, geometry and image resolution, so a raw pixel subtraction would mostly measure re-rendering rather than correctness. This is a visual/layout comparison, not a pixel-accuracy claim. The implemented screenshot uses a frozen DOM capture of the same public values (`snapshot.html`, no wallet/RPC scripts). The original three visible rows are retained; additional underlying scroll rows were not deleted. Financial engine scripts are unchanged.

Conclusion: promising as a visual proposal step, not an automatic patch or correctness oracle. Adopt layout improvements, verify data/state and interactions separately, then capture the real implementation.

## Final prompt

```text
Use case: precise-object-edit, UI layout repair.
Input image 1: edit target, an actual mobile screenshot crop of Eiko Alpha, not just a mood reference.
Repair this screenshot's visual alignment and spacing. Produce the improved version of this same mobile records section. Keep the dark indigo/lavender Eiko palette and current typography character. Make the section titles, icons, chevrons, content and numeric table columns feel deliberately aligned. Give elements breathing room within their cards. You may regroup the four fee summary metrics more compactly if this improves mobile hierarchy and scanning. Keep it practical for HTML/CSS implementation, not a conceptual illustration. Keep the same mobile width/proportions; the repaired content may be shorter.
INVARIANTS: preserve ALL visible words, values and units exactly, preserve section order, preserve the expanded epoch/LP/fee sections and collapsed Vault overview. Do not invent new figures, navigation, extra explanatory text, history entries, buttons, decorations, graphs or capabilities. Do not remove any visible information to make the layout fit. The three-segment LP gauge must retain its existing boundaries and blue colour encoding, not become a decorative chart. Preserve visible fee table rows and their relationship to column headings. Do not normalize or round numbers.
Exact text/values visible: 'Current Vault Epoch Results'; 'Results compared with a limit order at this strike.'; 'No completed epochs yet'; 'Vault overview · all strikes'; 'LP Positions'; '$0.00921', '$0.00940', '$0.00959', '$0.00978'; 'USDC', 'ROBO'; 'Strike Deployed', '$171'; 'Fee History'; 'THIS EPOCH', '$2.45'; 'ALL TIME', '$2.45'; 'EST. APY', '~14.2%'; 'VOLUME FACILITATED', '≈ $245', '≈ est. from LP fees'; 'BLOCK', 'ROBO FEES', 'USDC FEES'; row 'Pending' | '38.467525 (~$0.36)' | '$0'; row '#51163468' | '0' | '$0.06'; row '#51116788' | '45.141058 (~$0.43)' | '$0'.
Output just the fixed UI screenshot, no annotations, before/after board, phone frame or labels outside the app. Change only presentation, not information.
```