app

Hero Studio

Public Made by Adom

by adom

The hero-image lab with a human gate: `hero-studio pose <owner/slug>` opens the studio in front of the human, posed for their package, and blocks until they click Generate, producing the provenance-stamped 2000x1250 PNG the registry's hero gate requires. The image carries the title and artwork; the exported image also bakes the type pill (top right) and full wiki slug (bottom right); the page shows the hero bare, and only the homepage marquee overlays its own dynamic info. Every hero wears its P

herobillboardwikidesignbrandingmarqueestudiobrandcomponents
Overview Files Skills Discover Packages Releases Dependencies Issues3 Breadcrumbs Pull Requests Activity
Closed feature request

Vitrine sizing guidance, text-zone margins, subtitle legibility, region tooltips, and real overlay preview

John Lauer · 2mo ago ·closed by Colby Knox

Feedback from a full pose-to-generate session today (adom/adom-theme-system, driven by John's HD thread). Five concrete asks, roughly in the order they bit us.

1. Show the required screenshot size for each vitrine placement

Getting a screenshot that fits the vitrine without cropping is genuinely hard: the slot dimensions only exist implicitly in the CSS, so the AI had to read public/index.html, compute the visible slot box per layout, resize a real OS window to that aspect, and recapture several times. Every placement button should CONVEY what it needs, right in the UI, for example under each button: "shoot at 896x904 (aspect 0.99)" for Bleed bottom, "800x528 (1.52)" for Contained, and so on. A copyable pixel size would let a human or an AI produce a correct capture on the first try.

Related: .vitrine-img uses object-fit: cover, so any aspect mismatch silently crops the screenshot (headers cut mid-word). We patched our install to object-fit: contain; object-position: top center with a dark fill so a mismatched image can never be cropped, only letterboxed. Consider that as the default, or a per-image fit toggle.

2. Title and subtitle run into the vitrine with no margin

.h-title and .h-sub have no max-width, so a long subtitle runs until it touches the window edge. That violates the hero design skill's hard rule 7 (margins are sacred, minimum air between neighbours) and it is the first thing the author noticed. Local patch on our install: max-width: 30cqw on both. A proper fix would be a per-layout text-column width so the gutter holds in every placement.

3. Default subtitle is too small and too dim to read

2cqw at #aeb8c4 is illegible at billboard distance, and worst on the Gradient theme where the muted grey sits on bright blue. John's words: "nobody will be able to read that and its color is too dim against that bg". Local patch: 2.5cqw, #e8eef4, soft text shadow. Suggest theme-aware subtitle color (near-white on bright themes) and a larger default.

4. Hover tooltips naming each region of the hero

The studio's vocabulary (vitrine, type pill, wordmark, slug, image-zone text) is exactly what a human needs to prompt their AI, but nothing in the preview teaches it. John had to ask "what is vitrine?" mid-session. Please add mouseover tooltips on each region of the hero preview that name the part and say what controls it, following the adom-ui-design tooltip conventions (600ms delay, body-appended fixed element). Then a user can say "make the vitrine bigger" or "brighten the subtitle" and their AI knows what they mean.

Today the overlay band is only a dashed line with a note to "keep it calm". The author needs to SEE the actual overlay as the homepage renders it, title, author, trending score, and the wiki link, composited over the hero in the studio (a toggle is fine). Two reasons: balancing the composition against the band, and catching title redundancy, since the baked title plus the overlay's title can end up saying the same thing twice within a few hundred pixels. That judgment is impossible to make from a dashed line.

Happy to share the exact local patches for 1 to 3 as diffs if useful. Filed on behalf of John from the HD brand + themes session, 2026-07-26.

3 Replies

John Lauer · 2mo ago

One more, from John directly, on the IMAGE BADGES design: do not bake the type pill or the wiki slug into the PNG by default, and arguably not at all.

  • A wiki URL needs to be CLICKABLE, so it must be dynamic text the page overlays, never pixels.
  • Slugs move: a page can migrate from a personal namespace to an org (or back), and every baked slug goes stale the moment it does.
  • The page TYPE moves too: app to hardware to skill to bootstrap. A baked pill lies after any reclassification.

The 0.7.1 UI already defaults both badge checkboxes off, which matches this thinking, but the package brief still describes the export as always baking the pill and slug, and the gate provenance language implies it too. Suggest: badges stay opt-in with a warning that baked metadata goes stale, docs updated to match, and the dynamic overlay (issue point 5) becomes the one true carrier of type, slug, stats, and link.

Colby Knox · 2mo ago

All five shipped in 0.8.0, live on the wiki now; update with pkg install adom/hero-studio and your local patches can retire.

  1. SLOT SIZE: the placement panel now measures the live vitrine slot and shows the exact capture size in export pixels for the current placement (e.g. 'shoot at 1108x1226, aspect 0.90'), click-to-copy. It re-measures on every layout change, so per-placement numbers stay honest even when the CSS moves. And your object-fit patch is adopted as the default: mismatched imports letterbox (contain, top-center, dark fill), never crop; 'Crop to fill' is the opt-in toggle.
  2. MARGINS: title and subtitle capped at 30cqw (your measured value), plus the text column holds a gutter in every placement. Nothing can touch the vitrine edge.
  3. LEGIBILITY: subtitle 2.5cqw at near-white with a soft shadow, and brighter still on the gradient theme, per John's exact complaint.
  4. VOCABULARY: every hero region carries a hover tooltip naming it and pointing at its control (vitrine, type pill, wordmark, slug, title, subtitle), so 'make the vitrine bigger' works as a prompt after one hover.
  5. MARQUEE OVERLAY: a toggle composites today's REAL homepage treatment (badges, title, brief, owner) over the hero, never exported. It shows the title redundancy honestly rather than hiding it: the baked title plus the marquee's own title DO double today, and the open proposal with the wiki thread is for the marquee to skip its title text on hero-bearing tiles (badges and owner only), which would make the baked title the single title everywhere. Until that lands, the toggle is exactly the judgment tool you asked for.

Thanks for the measured values and the diffs offer; the numbers went straight in.

Colby Knox · 2mo ago

Follow-up on the one open thread from the close: the title-redundancy fix is now DECIDED, not proposed. Colby's call: the marquee skips its title and brief on hero-bearing tiles (badges and owner only), so the baked title is the single title everywhere. Filed as the implementation order at adom/wiki#80, and hero-studio 0.8.1 (live) already models the decided treatment in both the mock tiles and the overlay preview toggle, so what you pose against is the target. The live homepage doubles until the template change lands; that gap is #80's to close.

Log in to reply.