Generating design variations — the TJUG case study

The starting brief was intentionally loose. This is how designers talk to each other, and Claude Code handles it the same way any thoughtful collaborator would — it makes choices where you did not constrain it, and shows you the result.

Thirty minutes from prompt to five rendered variants on a private URL. That part worked. Now the uncomfortable part — four of the five had the same bug, and the designer spotted it immediately.

Meetup serves event posters at roughly 1:1. Claude assumed 16:9, or portrait, or just picked aspect ratios variant-by-variant based on the layout shape. The result: the top and bottom of every poster got clipped. The TAMPA JUG logo and the speaker name were invisible on most cards.

Claude’s read was almost correct. It identified that it had used aggressive cropping (object-cover) on 1:1 containers, switched to containing the image (object-contain) with a blurred backdrop copy to fill any letterbox, and applied the fix to all five variants in one pass. Then it reworked the visual direction on each, because the feedback was also about taste.

The second pass was a rework, not a touch-up. Claude threw away the first five and replaced them with directions it described as “genuinely different UX territories”: Luma-clean, Ambient Hero, Console Dashboard, Magazine, Glass Widget. The crop fix was universal. The first real keeper appeared:

Five variants is enough for a gut-check. Fifteen is enough to surface directions nobody asked for — the ones that surprise everyone and sometimes turn out to be the right answer. The next brief added a constraint the first round had been missing: stay on brand.

Two of the new variants in particular showed what brand-consistent variety can look like — one leaning into the signature radial gradient, another into a dramatic neon treatment that stays within the palette:

With fifteen variants on the table, the feedback shifts from vibe to detail. Some variants still had crop issues (Claude had applied the fix to some, not all). One was off-brand despite the brand audit. One was an idea that sounded clever but felt redundant next to the others.

Here is the counter-intuitive part. The five most visually ambitious variants — Neon, Ambient Hero, Split Gradient, Glass Widget, Magazine — were beautiful, but beautiful is not always the answer. What the site actually needed was a low-friction prompt above the top nav that tells returning visitors about the next meetup and lets them dismiss it. That is V8.

This is the moment the exercise stopped being exploration and started being production. Claude re-scoped the task automatically — made the root layout async so the server could check for an upcoming event, created a new EventAnnouncementBanner client component that hydrates from SSR and re-checks via the API, wrapped the banner and the header in a shared sticky container, and swapped overflow-x-hidden for overflow-x-clip because the old value silently breaks position: sticky inside it. That last detail is the kind of thing a junior developer misses. Claude did not.

The session, by the numbers

Five prompt patterns that earned their keep

If you replay the session from the outside, the prompts that moved things forward fall into five patterns. Copy and adapt — these are the shapes we now reach for by default.