Image Recipe UI Directions

What it does better

Honesty handling is the best thing in this file, and it is not close. Case 3's flag does three separate honest things in one block: names the source ("This is the publisher's own marketing header"), quotes the burned-in overlay exactly ("How to Do AI SNOW TREND"), and disclaims provenance twice over ("not a clean before/after asset and not a render we produced") — plus `.v-gallery .g-c3 .g-stage::after{ display: none; }` strips the accent rule that every trusted render gets, so the untrusted capture is denied the page's visual endorsement. The alt text repeats the disclosure for screen readers. Verbatim fidelity is equally careful: panel 4 reproduces the brief's malformed `Categories: Corporate Tech, Neumorphism, Data Visualization, Clean Minimalist,` with its trailing comma and orphaned `Symmetrical` on a separate line rather than tidying it, and every panel correctly appends `Reference extracted metadata for exact aesthetic and structural adherence.` per the brief's "The full prompt ends with, for every style" note. All 21 hex values, all seven style names, and all seven image-token-to-style mappings check out against the brief one by one. Rule compliance is genuinely clean, not approximately clean. The one real craft idea — `--plate-accent` set from each frame's `data-accent` so the stage rule and the 54px `.g-bar` take colour from the declared palette of whichever render is up — is the only moment in this direction where the interface earns its identity from the data instead of decorating it. The Case 1 editorial call is also correct on the merits: the eight-field schema is identical across all seven styles, so a side-by-side text comparison would show seven columns of matching labels, and leading with renders is the right read of that. Keyboard support on the tablist is properly built (roving tabindex, arrows, Home/End), which most first drafts skip.

Best for

A consultant at 11pm who already has the AXIS datasheet loaded in a NotebookLM notebook and needs one deck cover by morning — a single-choice, single-session decision on a large monitor. That person lands on a 690px-wide render, flicks the sheet, stops on Sumi-e, and takes the eight fields. For that exact moment this is close to the right page. It is the wrong page for anyone doing the other three jobs a catalog gets used for: comparing two styles at full size before committing, diffing what actually changes between two prompts of the same schema, or arriving at Case 3 wanting to swap the lens and the outfit — where the nine chips name the parameters and then hand back an undifferentiated paragraph.

Problems found

• majorThe section's own subhead states "The render leads; the prompt waits underneath as a receipt you open only when you commit." The page has no such interaction. The receipt is rendered open at first paint inside .g-read, permanently occupies the minmax(0,1fr) right column, and there is no collapse, disclosure, or close affordance anywhere in the markup or the script. There is never a browse-only state — text is on screen from the first frame. This is a false statement about the interface printed on the interface, and it is also the direction's whole thesis, so the copy is where the concept lives rather than in the layout. — .g-sub, line 402
• majorCase 3 is 'the parameterisation case' and the nine chips (aspect, frame count, top frame ... mood) are inert labels with no values and no link to the paragraph. They assert nine parameters exist and then leave every one of them buried. Someone changing the lens still has to hunt 'Canon EOS R5, 85mm f/1.2' out of a 90-word block. The fix is already implemented elsewhere in this same file: .v-gallery .g-receipt pre b{ font-weight:600; color: var(--ink) } is used in Case 1 to bold field labels inside a <pre> — applied to a prompt that was already schema-structured and did not need the help. The mechanism is withheld from exactly the prompt that has no structure. That is backwards. — .g-params, lines 779-789
• majorThe stage has no fixed aspect box — only min-height 300px and max-height 620px on the image — so swapping the hero to a render of a different aspect ratio changes the plate's height, and the reading column's height also varies (tone strings run from 4 words to 17, receipts from 8 to 11 blocks). The contact sheet sits BELOW the plate, so every selection moves the row of thumbnails the user is clicking through, under the cursor. The primary interaction of the direction fights itself. — select() lines 821-845 and .g-stage min-height:300px / img max-height:620px
• majorSeven frames at 150px plus six 10px gaps is 1110px, inside a container of min(1220,vw) minus 44px of padding — so all seven thumbnails are visible simultaneously only above roughly 1154px of viewport. At 1024px or on any laptop with browser chrome, the contact sheet becomes a horizontal scroller showing five or six; at the 700px breakpoint frames drop to 128px and roughly 2.5 are visible. The single thing this direction exists to do — compare seven looks at a glance — silently degrades to a carousel across most real screens, and there is no wrap-to-grid fallback in any of the three media queries. — .g-sheet / .g-frame flex: 0 0 150px

What it does better

Two things it does better than any prompt-as-text-blob direction can. First, the verbatim guarantee is real and I verified it. I reassembled both prompts from the JS at default state and diffed them against the brief: Case 3 comes out byte-identical at 496 characters, and the Case 1 copy string for style 01 is byte-identical to the source block including the blank-line separators and the trailing "Reference extracted metadata for exact aesthetic and structural adherence." The badge that flips from "as captured" to "edited · no longer verbatim" (line 787) is the strongest honesty device available for a catalog whose cardinal rule is never to reconstruct a prompt — it lets a reader edit without the page ever lying about what it is showing. Second, Case 3 is genuinely solved, not decorated. The frame toggles (lines 890-918) do not just gray out a sentence; turning a frame off removes its clause AND rewrites the count word AND, when all three are off, drops the entire "split into ... stacked frames" clause to produce "Create a vertical 9:16 cinematic composite in winter snow. Lighting: ..." — a coherent prompt. That is the correct mechanical model of a paragraph carrying nine parameters, and it is the best answer in the set for that case. The Case 3 marketing overlay is handled exactly as the brief demanded: the image sits at 190px as a figure captioned "Source capture · publisher's article header" with an explicit warn bar reading "The \"How to Do AI SNOW TREND\" text is burned into this marketing header. It is a real capture of the source, not an output of the prompt below and not a tested before/after asset." No other treatment of that asset would be honest. CSS is clean on inspection: zero hex values anywhere in the style block, every chrome colour from a token, all 10 image tokens used exactly once with real alt text.

Best for

The person who has already chosen a style and now wants to bend it. Concretely: someone with a NotebookLM notebook of product datasheets who has decided Engineering Blueprint Schematic is the house look, and needs to swap the accent from #ff9f30 to a brand orange, soften the tone line, and drop 'Industrial Design' from the categories — then copy a prompt they can trust, with the page telling them plainly that what they are holding is no longer the captured original. That is a real and underserved moment, and no gallery-style direction serves it. It is the wrong lead for Case 1's stated problem, which is the browsing moment: the art director scanning seven looks cold, deciding which one survives a client deck. That person wants all seven at once and one of them large, and this direction gives them a scrolling strip and a 292px maximum. Where it is clearly the best answer is Case 3 — reverse-engineering a dense press-article paragraph into something you can retarget to your own subject. Consider leading the catalog with Case 3 on this direction and giving Case 1 a gallery, since the machinery transfers to Case 1 as a second panel but the strip does not transfer back.

Problems found

• majorThe live-preview promise breaks for the bottom half of the controls. `.v-panel .prompt` is capped at `max-height: 400px; overflow-y: auto` (line 220) while the left column is eight auto-grown textareas that stack to roughly double that. The assembled Case 1 prompt runs about 29 wrapped lines in a ~350px output column — it scrolls internally from the start. Then `hi()` (lines 962-965) toggles `.is-hi` on the matching segment but never calls scrollIntoView, and `.out` is not sticky. So when you focus Typography Style (field 07) or Categories (08), the segment you are editing is off-screen inside a scroll box that does not follow you, and the page has scrolled the whole output panel away besides. The direction's entire pitch is 'the assembled prompt updates live beside the controls'; for the last three or four fields it does not. — CSS line 220; link()/hi() lines 959-981
• majorFor its designated lead case, the browsing surface is a regression from a plain grid. Seven renders at `flex: 0 0 148px` in an `overflow-x: auto` strip (lines 74-87) total about 1,092px, so a 700-900px card shows four or five at a time; selecting one expands it to 292px and the code then auto-scrolls to recentre it after a 210ms timeout (line 825), so the neighbours you were comparing physically move out from under you. The brief names the problem as 'How does someone choose a look?' — and 292x236px is the largest any render ever gets, with no lightbox or full view. Judging whether Sumi-e Tech Scroll or PCB Schematic Architecture will hold up in a client deck is not a decision you can make at 292px, and comparing them means scrolling back and forth. A 7-up grid would fit all seven at once at that same thumbnail size. — lines 74-95, 319-377, 821-827
• majorThe browsing gesture silently destroys the editing work. Clicking any preset cell calls c1Load(), which overwrites all six textareas, all three colour wells, and the whole chip list (lines 795-809) with no confirmation, no diff, no undo. This lands hardest precisely when the badge is showing 'edited · no longer verbatim' — the page is actively telling you that you have unsaved divergence from source, and a single click on a thumbnail you only wanted to look at wipes it. You also cannot preview style 5's render without discarding your edits to style 1, because expansion and loading are the same gesture. — c1Load lines 791-829; strip click handler lines 831-833
• majorCase 3's required upload is the one input the panel refuses to parameterise. The brief specifies 'Requires: an image model that accepts a reference photo · one clear photo of the subject', and this is the input the user must physically supply before anything else works. It appears as a grey chip, `<li><b>Requires</b>one clear photo of the subject</li>`, sitting third in a row of six identical chips alongside 'Technique' and 'Use case'. A direction whose thesis is 'every field becomes a labelled control' numbers nine text parameters 01 through 09 and gives the mandatory file input less prominence than 'Mood'. A field 00 for the reference photo would have cost one row. — line 480
• invented"1 instruction" — appears twice, at lines 609 and 615, as a footer stat under each Case 2 prompt. It is not in the brief, and it is arguably wrong on its face: the boat prompt contains three imperative sentences ("Create a visual metaphor...", "Show a large, unwieldy anchor...", "Keep the style illustrative..."). Presented in a stat slot next to a copy button, it reads as a measured property of the prompt.
• invented"8 of 9 parameters" — rendered by line 923 at rest on Case 3 while nothing has been edited and the adjacent badge reads "as captured". A false count displayed as fact, contradicted by the panel's own fields numbered 01 through 09.

What it does better

Three things it genuinely does better than a gallery would. (1) Rule compliance is the cleanest possible. I parsed the stylesheet: 76 selectors, every one prefixed with `.v-compare`, one `@media (max-width:700px)` whose inner selectors are all prefixed, and ZERO hardcoded colour values anywhere in the stylesheet — every background and text colour is a token. All 10 image tokens are used exactly once each with real alt text; no URL, no placeholder rectangle substituted for a real render. The project's own linter agrees: `compare 1058KB missing=[] leaks=[] unprefixed=0`. The 21 literal hex values it does carry come from the brief's own `Colors:` lines and are used ONLY as `background` on `.vc-sw b` / `.vc-bar i` / `.vc-dots i` and as `borderTopColor` — never as a text-on-background pair, so nothing goes invisible when the host flips theme. That is the correct reading of "you MAY introduce your own accent colours inline." (2) Case 3 is the strongest honesty work I can verify anywhere in this brief. I string-matched all nine parameter rows against the prompt: all nine are exact substrings ("vertical 9:16", "Canon EOS R5, 85mm f/1.2", "black wool coat, thick white scarf, hair tucked in, no hat"), the `<pre>` in the details block matches the brief byte-for-byte, and the only text the split drops is "cinematic composite in winter snow" plus punctuation glue. Its own claim — "Rows hold exact substrings of the prompt, cut at its own punctuation. Nothing is reworded." — is literally true. The marketing overlay is handled better than asked: the burned-in string is quoted verbatim in a `--warn` box ("Publisher's own marketing header, \"How to Do AI SNOW TREND\" burned in. A real capture, not a tested output, and not a clean before/after pair."), the image is capped at 190px as a thumbnail, and a separate "Honest gap" note reconciles the recorded `before/after` card variant against the fact that only one non-pair image exists. (3) It discloses its own inferences instead of hiding them. "Column labels are descriptive; the post names neither prompt" is exactly the right move under HARD REQUIREMENT 3. And the toolbar numbers are computed at runtime from the real text rather than asserted — I re-ran the diff engine in Python and the default pin set really does produce "9 of 9 fields differ · 14% of slot A's words are shared". The chip rail is also the single most useful control in the direction: seven thumbnails, each with its own three real hex dots, with pinned slots lettered A/B/C. That alone is a better style picker than a list.

Best for

The second half of the decision, not the first. Someone who has already narrowed to two or three styles from the thumbnails and now has to justify the pick — to a client, or to themselves before committing a brand look — gets real value from the aligned palette swatches, the column spine tinted with each style's own accent hex, and the nine fields lined up so Texture sits under Texture. That is a defensible piece of evidence to put in front of another person. It is the wrong tool for the first pass. Someone opening this cold with seven styles and no shortlist is served by the chip rail and then abandoned: the table below tells them "9 of 9 fields differ", greys out the conjunctions, and letterboxes the seven renders they actually need to look at into 58%-empty portrait boxes. For that person the direction is slower than a plain gallery of seven full-width landscape renders. Concretely: a designer choosing between "Engineering Blueprint Schematic" and "PCB Schematic Architecture" — two genuinely similar technical looks where the prose diff would earn its keep — is the exact user this is built for. That user exists, but they are a minority of the seven-way choice.

Problems found

• majorThe direction's central promise is "renders aligned in an equal-size box" — and the box is the wrong shape for every asset in the brief. I decoded assets.json: all seven Case 1 renders are 820x458, i.e. landscape 1.79:1. There is not a single portrait image in the entire brief (IMG_BOAT 640x633, IMG_PIE 640x518, IMG_WINTER 820x461 are all landscape or square). Putting a 1.79:1 image in a `3/4` box with `object-fit:contain` means the image draws at roughly 224x125 inside a 224x299 box: about 58% of every render cell is empty `--surface-2` letterbox, times three columns, in the one row the whole design exists to serve. Worse, the letterbox fill is the neutral theme grey, so a style declaring `Background #FFDD00` and one declaring `Background #050B26` are each surrounded by the same grey field — the frame visually normalises exactly the difference the swatches are shouting about, when the code already parses those hexes and could have filled the box with each style's own background. And the picker crops the other way: `aspect-ratio:1/1;object-fit:cover` on a 1.79:1 source throws away 44% of the width, so the thumbnail you click and the render you get are different crops of the same image. Case 2 got this right with `.vc-wide{aspect-ratio:1/1}` for a 1.01:1 boat; the lead case did not. — line 48 `.vc-render{aspect-ratio:3/4}` and line 21 `.vc-chip img{aspect-ratio:1/1;object-fit:cover}`
• majorThe marquee mechanic contributes signal on 2 of 9 rows, and both are redundant with something already on screen. I ran the engine: per-row shared-word ratios are Overall Tone 0.17, Colors 0.50, Image Style 0.00, Texture 0.00, Composition 0.00, Lighting 0.15, Typography Style 0.00, Categories 0.00, Instruction 0.75. Five rows dim literally nothing — they are three columns of prose with the diff machinery doing no work. Two rows (Overall Tone, Lighting) dim 15-25% of words, and because this is a word-SET test over natural-language prose, what gets greyed is "and", "with", "the" — the reader learns that two styles both use the word "and", while the sentence reads as a ransom note. Only Colors and Instruction cross the 0.4 highlight threshold. Colors highlights the hex values — already shown as swatches directly above in the same cell. Instruction highlights `["Retro-Comic, Action, Blueprint".]` — the style name, which is already printed in the `.vc-name` column header at 14px display bold, and again on the chip, and again in the ×-button aria-label. So the row the designer names as the payoff ("makes the Instruction row collapse to nothing but the style name") is the fourth restatement of a string the reader has already read. A diff whose own headline reads "9 of 9 fields differ" is a diff with no signal; word-level diffing is built for near-identical strings, and seven interchangeable style blocks share only the field names. — the diff engine, lines ~370-400 (`sharedRatio` / `tokenSpans`), against the default pins retro+blueprint+sumie
• majorClicking a fourth chip when three are pinned silently discards slot A with no rejection, no warning, and no undo — while the label directly above reads "3 of 3 slots used", which reads as "full". Every remaining column then slides one position left and is re-lettered (B becomes A, C becomes B), so the render alignment the user built is destroyed AND the "% of slot A's words are shared" statistic silently re-baselines to a different column. In a direction whose stated thesis is "choosing is the job", silently throwing away one of the three candidates the user is choosing between is the worst available failure mode. A disabled state, or evicting the least-recently-pinned with a visible cue, costs three lines. — line 581, `if (pinned.length >= 3) pinned.shift();`
• majorThe designer's summary says the cost is "a horizontal scroll inside the stage under 700px". The real threshold is about 920px: 170px gutter + three columns at minmax(250px,...) = 920px minimum, so the DEFAULT three-pinned state scrolls horizontally inside any container narrower than roughly 920px — which includes a normal centred article column on a desktop. Under the 700px breakpoint the gutter drops to 112px, so a 380px phone is dragging an 862px table left and right to see one column at a time, immediately below a separate horizontally-scrolling 7-chip rail (7x104 + gaps = 776px). Two stacked horizontal scrollers in one section on mobile. This is not a HARD REQUIREMENT 6 violation — `.vc-scroller` is a proper `overflow-x:auto` container and I found no page-level overflow — but the self-report understates the cost by roughly 220px of viewport. — line 34 `.vc-stage{grid-template-columns:var(--vc-gutter) minmax(250px,1fr) minmax(250px,1fr)}` with `--vc-gutter:170px`
• invented"output-only" applied as the card variant of the pie-chart column (lines 188 and 193) and "any image model · nothing to upload · no settings", "To bring something into existence", "Concept art and mood boards · Stock imagery without the licence" stamped `identical` across both Case 2 columns (lines 204-215). The brief records these for Case 2 as a whole, whose image token is {{IMG_BOAT}}; it never states them for the sibling pie-chart prompt. Disclosed in the note below the table, but asserted with a green `identical` badge inside it.

What it does better

Three things it does better than anything else could. (1) HONESTY, MECHANICALLY VERIFIED. I diffed all 10 prompt blocks against the brief programmatically: g1-s1 through g1-s7, g2-a, g2-b, g3-p all MATCH byte-for-byte, including the brief's own line-break artifact in the Neumorphic block ("Categories: Corporate Tech, Neumorphism, Data Visualization, Clean Minimalist,\n\nSymmetrical") and the closing "Reference extracted metadata for exact aesthetic and structural adherence." on every style. All 21 swatch hexes match their style's Colors line, all 35 category chips match, all seven style tokens map to the correct style name. Nothing invented. (2) IT PASSES THE CASE-3 TRAP CLEANLY, AND IT IS THE ONLY REQUIREMENT IT OVER-DELIVERS ON. The marketing image is captioned "Source capture, not a tested output. This is the publisher's own marketing header, with a 'How to Do AI SNOW TREND' overlay burned into the image. It is not a render of the prompt below and not a before/after pair." The alt text repeats it. It also silently drops the brief's "Card variant: before/after" label rather than honoring a label the asset can't support — a judgment call in the right direction. (3) THE PREREQUISITE GATE IS THE DIRECTION'S REAL IDEA AND IT WORKS. Run 1 step 1 sits above the copy button, not below it, and states the actual failure mode: "a notebook that has no sources in it has nothing to work from." Case 3's upload warning is belt-and-braces — a warn box ("Copying the prompt does not carry your photo... or the model has no face to work from and returns a stranger"), a button hint ("Text only — the photo is not included"), and correct operational order ("Attach the photo first", then "Paste the prompt into the same message"). No card-grid or comparison-table direction delivers ordering this reliably, because ordering is the one thing a rail is for. Also: the script is the best-guarded code here. IIFE wrapped in try/catch, every listener body wrapped again, `root = document.querySelector('.v-guided')` scoping, clipboard API with an execCommand fallback and a terminal "Select and copy" state, and `flash()` survives double-clicks by preferring the stored `data-label` over live `textContent`.

Best for

The person who has already decided. Specifically: someone on desktop with a NotebookLM notebook open and sources loaded, who knows they want the blueprint look, and needs the prompt on the clipboard without discovering a prerequisite at the wrong end. For that moment this is the strongest of the three framings, because ordering is the one thing a rail does that a grid cannot, and the "sources already loaded" gate genuinely prevents the failure. It is equally right for the case-3 user who would otherwise paste the paragraph into a fresh chat and get a stranger's face back. It is wrong for the person who has not decided. Someone browsing the catalog for a look meets a five-step wizard for a recipe they have not chosen, with the seven renders — the actual product — reduced to 132px crops behind step 2. Three stacked runs give the page one shape, so reaching the three-sentence boat prompt means scrolling past five steps of NotebookLM. It is also wrong for repeat use, which is the obvious behaviour for a seven-style set: run 1 step 5 says "come back to step 2 and copy again," which is a scroll-up in a linear rail — the flow conceding its own shape does not fit the thing it is describing.

Problems found

• majorStep 3's entire body is "Nothing to fill in." This is the exact padding the brief forbade, just relocated: the direction proves case 2 doesn't get inflated and then inflates case 1 to protect its own five-step template (have -> choose -> fill -> copy -> do). The one real fact in the step — that all eight fields swap, not just the instruction line — belongs beside the picker in step 2, where the swap actually happens. The mirror image is run 2's "This run stops at two steps because the recipe holds nothing else." That is the designer arguing with the reviewer inside the product; a person who came to copy a boat prompt does not need the page's step count justified to them. — Run 1 step 3 (lines 362-373), and the .flat box at line 610
• majorThe lead case is "how does someone choose a look?" and the only view of any of the seven renders is a 132px-tall `object-fit:cover; object-position:top center` thumbnail. I grepped every style token — one occurrence each. No lightbox, no larger view, nothing. Cover at roughly 140x132 on a portrait infographic renders the top two-thirds at about 14% scale, which puts typography style, callout composition, and texture — precisely the fields the styles differ on — below one pixel. What survives is background colour, and two of the seven are nearly the same colour: #050B26 (Thermal Insight Tech) against #0b1623 (Engineering Blueprint Schematic). Meanwhile the trivial case gets the honest treatment: `.pc img{width:100%;height:auto}` shows IMG_BOAT and IMG_PIE full and uncropped. The image budget is inverted — the hard case gets seven postage stamps, the easy case gets two full renders. — Run 1 step 2, .thumb img (line 130); each style token appears exactly once in the file
• majorThe brief calls case 3 "the parameterisation case." The nine-row table is correct in content and honest in framing ("Read them before you change anything, so you know what you are overwriting") — and then nothing is changeable. The `dl` is read-only, `<pre id="g3-p">` is static, and the copy button ships the untouched paragraph. Run 1 has a real substitution mechanism: pick a style, the prompt panel swaps. Run 3 surfaces nine knobs and provides none. Swapping "black wool coat, thick white scarf" or "Korean winter romance style" and getting the modified prompt on the clipboard is the only thing that would make a parameter table earn its space, and that is exactly where the direction stops. This is the brief's "decorate it" outcome. — Run 3 steps 2-3 (lines 649-675)
• major`repeat(auto-fit,minmax(258px,1fr))` inside a step body that is 222px wide at a 320px viewport (320 - 28 page padding - 2 run border - 28 steps padding - 28 node column - 12 gap). The 258px track min cannot shrink, so it overflows by 36px, and `.run{overflow:hidden}` (line 40) clips it. No page scroll — but the right edge of the case-2 cards, image and prompt lines both, is silently cut with no way to reach it. Fits from about 356px up, so it bites the 320px class of device specifically. — .v-guided .pair (line 193), not overridden in the @media (max-width:700px) block at lines 206-216

What it does better

Three things it does better than a card grid could. (1) Case 3 is genuinely solved, and it is the only case here that is. The nine parameters are broken out into a labelled table that is fully open at rest, sitting directly under the verbatim prompt — and I verified all nine values are true substrings of the prompt (`aspect | vertical 9:16`, `camera | Canon EOS R5, 85mm f/1.2`, `mood | emotional, calm, Korean winter romance style`, etc.). The header `parameters — excerpts from the prompt above, nothing added` is an accurate claim, not a decoration. Splitting `camera` out of the parenthetical inside the Lighting clause is a real editorial call that matches the brief's own enumeration. (2) The Case 3 image is handled better than the brief asked for. Five independent honest signals: the header chip `Image is a source capture from the publisher, not our tested output`, the row chip `source capture · text overlay burned in`, the alt text `Source capture: the publisher's marketing header for the article, with a How to Do AI SNOW TREND text overlay burned in`, the metadata line `before/after — no clean before/after asset captured.`, and the footer count `9 renders + 1 source capture`. The brief said "label it as a source capture, or use it only as a thumbnail" — this does both and names the burned-in overlay explicitly. (3) Rule discipline is close to flawless, and I checked it by parsing rather than reading. Zero non-prefixed selectors (I extracted every selector in the block, split on commas, including inside the `@media`). All 10 tokens present, all 10 in `src=`, no URL or placeholder box substituted. Zero hex literals anywhere in the `<style>` block — every background and text colour is a token, so it survives both themes. The only literal colours are the inline palette swatches, which are the data. `#FFFFFF` and `#000000` swatches would vanish against `--surface` in one theme or the other, and `.pal i` carries `border: 1px solid var(--rule)` that rescues them. All 10 prompts are byte-for-byte identical to the brief's fenced blocks (exact match, not stripped match). All counts check out: 7+2+1 = `10 of 10 prompts`, `7 styles`, `9 parameters`. Structurally, hoisting the shared `Shape` and `Shared tail` into the Case 1 header instead of repeating them seven times is the right instinct, and the palette swatches plus category chips are column-aligned in `.c-id`, so you genuinely can compare palettes down the column. That is the one comparative affordance that works, and it is exactly the one the brief hinted at.

Best for

The person who already owns this style set and is re-running it — someone who knows "Sumi-e Tech Scroll" by name, wants the exact schema string in front of them, and needs to confirm the eight field labels before pasting into NotebookLM. It is a good re-reference sheet and a good audit surface: a reviewer checking that the corpus stored these prompts verbatim, that the counts are right, and that the Case 3 asset is disclosed can do all of that from one screen without opening anything. That is genuine value, and it is value no card grid provides. It is not the surface for the moment the brief actually names. "How does someone choose a look?" is a first-encounter question, and this design's own tradeoff note concedes it "punishes first-time browsing." The circularity is the problem: it serves the person who already knows the seven styles, but knowing the seven styles is precisely what choosing among them requires. Case 1 arrives densified rather than answered. Where it lands cleanly is Case 2 and Case 3. Case 2 is solved by construction — a uniform row grid means a three-sentence recipe simply occupies less vertical space, so a minimal entry never reads as an empty card, and the designer added no invented controls to fill it. That is the correct answer to "what does a minimal recipe page look like without feeling empty," reached structurally rather than decoratively. Case 3's params table is the single best element in the direction and would be worth stealing into any other variant.

Problems found

• majorThe copy button ships a truncated prompt for all seven Case 1 styles. The brief states at line 179: "The full prompt ends with, for every style: Instruction: ... / Reference extracted metadata for exact aesthetic and structural adherence." That closing line appears exactly once in the entire document, inside the group header as `Shared tail`. `copy()` reads only `row.querySelector('.pt')`, so pressing `c` on row 1.1 yields text ending at `...visual DNA of "Retro-Comic Action Blueprint".` with the final instruction line absent. I confirmed the tail string occurs 1 time in the file and 0 times in any of the seven `<pre class="pt">` blocks. This breaks the direction's single core action — the stated persona "runs these weekly," which means copy and paste into NotebookLM — and it silently falsifies the footer's own promise, since these seven blocks are shortened yet labelled `prompt · verbatim` rather than marked as excerpts. The display choice to state the tail once is defensible and even smart; the copy payload is the defect. Fix: concatenate the group's shared tail in `copy()` for `[data-grp="c1"]` rows. — script copy() — `navigator.clipboard.writeText(pre.textContent)`; label `.plabel` reads "prompt · verbatim"; footer reads "prompt text is stored verbatim; excerpts are marked as excerpts"
• major"Expand in place" cannot produce a usefully large image on desktop. The row's two leading columns are 38px and 62px. `grid-area: thumb` places `.c-thumb` in column 2; adding `grid-column: span 2` drops it out of its named area into auto-placement, and the only free 2-column run is columns 1–2 on a new implicit row — 100px total. Under the most generous alternative reading it stays at 62px. Either way, clicking the render to enlarge it yields an image at most 100px wide. For seven infographic renders of a dense camera datasheet, that is not an enlargement, and it means the sheet offers no path at all to actually looking at a render. The mobile rule `grid-column: span 3` spans 38px + 62px + 1fr and does work — so the expand is strictly better on a phone than on the desktop layout the direction was designed for. — .v-dense .row.is-peek .c-thumb{ grid-column: span 2; } against grid-template-columns: 38px 62px minmax(200px,.95fr) minmax(330px,1.75fr)
• majorThe thumbnail column is close to redundant with the swatch row next to it, which guts the lead case. The brief's Case 1 question is "How does someone choose a look?" and it notes that what varies across the seven is Composition — `Bilateral symmetry divided by a central vertical line`, `hub-and-spoke layout`, `Centralized exploded artifact`, `Network-based layout ... via grid-aligned paths`. A 50px centre crop of a tall infographic conveys roughly one bit — dominant hue — and the adjacent `bg / text / accent` swatches already convey hue more accurately and more legibly. `object-fit: contain` would at least preserve the composition silhouette, which is the actual differentiator. One-word change, real payoff. — .v-dense .peek img{ object-fit: cover } at width:50px; height:50px, on the seven Case 1 rows
• majorIt is a list of prompts, not a comparison table — which is the one thing a table does that a list does not, for the case that needs it most. The seven Case 1 prompts are near-identical: the same eight field labels in the same order, differing only in their values. The design hoists the invariant schema into the header (good) but then still renders seven full copies of the fields, each in its own separately-scrolled 150px box at 12px mono. To compare `Composition` across the seven styles you must scroll seven independent boxes to seven different offsets. Aligning the eight field values as columns across seven rows is the move the brief was pointing at, and the layout's own grid was the tool for it. What ships is dense, but density is not comparison. — the seven `<pre class="pt">` blocks in [data-grp="c1"], each an independent max-height:150px scroll box
• invented"Boat and anchor metaphor" — row 2.1 `.rname`. The brief gives no name for this prompt. Permitted under rule 3 as a neutral label, and it is derived from the prompt's own words ("Create a visual metaphor", "a small, sturdy boat", "a large, unwieldy anchor"). Listed for completeness, not as a violation.
• invented"Resource allocation pie chart" — row 2.2 `.rname`. Same status: no name in the brief, derived directly from "Create a simple pie chart showing resource allocation across three departments". Neutral and defensible.
• invented"three sentences" — chip on row 2.1. Not invented and not false; it is lifted from the brief's UI-problem note ("the prompt is three sentences") rather than from the recipe content, so it presents designer-facing commentary as a recipe tag.