Chapter 5c: The Finish — Details, Feedback, AI Images, and the Polished Preview

Structure first: location (map, no form — 'she didn't want a form, remember?'), opening hours (duplicated from location; a new space-xxs=4 token; spacing inconsistencies reconciled to 24 heading→body, 32 intro→content), the footer built against a pasted requirements CHECKLIST (WhatsApp, official social icons, small print, NO form) with the logo's SVG strokes outlined so scaling doesn't distort — then Present-mode review that rules it 'not ready yet to send.'

Then the pass itself, images still banned: per-section background variation (Light 1/2/3, a dark mid-page breaker) to kill the one-big-block feel; the hero saturated toward primary with asymmetric 128-top padding; the full-bleed dark footer via Ignore Auto Layout and a 1440-wide rect (1120 + 2×160 — the math aligning to the grid); bracket-key layering; a stroke-only rounded shape duplicated and rotated across sections as a unifier; corner tokens applied everywhere including the map embed; interim copy drafted by ChatGPT so the send isn't bare lorem ipsum ('Real bread, real people, just around the corner'). The governing line: 'don't be scared to add a bit of space' — and 'this is not a school assignment. This is just a design.'

THE SEND: Share Prototype, never the file (the client sees a clean scroll-through, not your inspiration boards); test in incognito; hyperlink the URL (Cmd+K), don't paste Figma's monster link. The email is engineered: 'phase 1... a rough version'; 'filler words' not 'lorem ipsum'; feedback scoped to 'general styling of the typography, color scheme and overall feel'; full disclosure of what does and doesn't click. The result is the process paying out: 'clients will have less feedback because we are guiding them every step of the way. The client feels guided and safe.'

THE FEEDBACK: Lucy's two real notes (font too round versus the serious logo; the self-congratulatory section folded into the intro) get applied on a DUPLICATE — 'designers love to just try out things until it feels good. But it never feels good because your brain will always try to convince you that you can do better. Have 2 versions next to each other.' The craft of applying: Paste-and-Match-Style to avoid inherited formatting, Figma's spellcheck catching 'craftmanship,' BatchStyler swapping headings to Clash Grotesque in one pass (with the missing-Bold warning read correctly), calculation fields (+128) for precise offsets, Group (not auto layout) to move impossible clusters. And the boundary that ends the loop: no re-send per micro-fix — 'you're not an employee. You have your own business.'

REAL: Envato bakery photography, with hygiene taught as craft — the 8000×5000, 32MB source run through Bulk Resize Photos to ~400KB ('60, 70, 80 times smaller'; Figma tolerates big files, exports and dev do not); a paid background-removal tool for subject cutouts (the free-tier low-res paywall called out: 'see how they trick you? I don't like this kind of marketing' — paid anyway, ~€3 for 3); Figma's mask workflow (image into Fill, Option+double-click to crop — 'a little bit more clicks, unfortunately' than XD); transparent cutouts layered sticker-style over color blocks with Ignore Auto Layout, Lucy herself bleeding into the next section.

AI: 'we're in the time of AI. Let's generate it.' ChatGPT expands the bread list from three to six, then generates the sourdough product shot — first result too saturated, refined with 'make the bread sit on a wooden table... not too saturated. Keep it sourdough,' the constraint existing because 'sometimes ChatGPT just changes the whole bread if you don't tell it to stick to a specific style.' The verdict that dates itself proudly: 'I would even start here these days... I would not even try to spend hours on those image websites if you can just generate something that looks super realistic.'

The bread-details popup pays off the sitemap's oldest promise (details behind a pop-up, not new pages). Built as a standalone 8-column frame ('breadspopup') from existing components — name, image, category tag, ingredient rows, an allergy 'wheat off' icon found on first search — its teaching core is SCALABILITY: the ingredient-tag row set to wrap + fill-container, validated by adding and deleting test tags until extra ingredients flow to a new row automatically. 'Our design is fully scalable' is earned, not asserted. The close button is a rotated plus sign; the wiring is the right interaction primitive — OPEN OVERLAY, not Navigate To ('Figma doesn't know it's a popup even though you call it a popup') — centered, close-on-outside-click, and Figma auto-dimming the background ('Figma is super smart').

Two passes on a fresh duplicate (Home v3). PASS ONE: bread-line icons (Iconoir, Iconify) scattered through the hero — each REJECTED or kept by relevance ('does this have to do anything with bread?'), each standardized by Outline Stroke + Pathfinder Union so SVGs scale (and each icon pack's layer panel checked for hidden trademark sub-layers — a real gotcha); sizes matched BY EYE ('use your eyes when you're resizing icons... you get a better result than sticking to the numbers'); a drop-shadow experiment honestly abandoned (can't bind shadow color to variables) for a secondary-yellow bottom/right stroke propagated via Copy Properties → Paste Properties (which fails silently on non-auto-layout rects — wrapped first); ±1° rotations for the hand-placed feel, cashing in Lucy's original moodboard ask: option 2 with elements of option 1.

PASS TWO, the signature: the LOGO MOTIF — the mark's three steam lines extracted, outlined, unioned, and repeated above bread imagery in four-plus sections (skipped where 'busy enough') — 'if you have a logo from a client that has a visual element, you can use that throughout the website. These are very small details but I think they matter.' Plus the sweeps a system can't do: un-globalized local colors caught and rebound, an off-palette background chosen by eye and FLAGGED for palette formalization, the heading font landing on Clash Display because its joined ligatures echo the logo's wordmark — swapped manually because 'the BatchStyler plugin which we used before is not available anymore.'