image

Photo Frame and ID Card Generator for a Hackathon

A web tool where you drop in any photo and get back a branded event graphic — a profile picture frame, a personalized builder ID badge, or a group frame for up to four teammates — ready to download an

@NisargPatel5563

id-card-generator-eta-jet.vercel.appvisit ↗

watch the video↗

process.log7 fields

toolsClaude Code (Opus 5)Next.js 14HTML CanvasVercel Blobheic2any

iterationsA few tries

one build pass, then several rounds of visual correction against rendered output

time5 hr

%_ai50

me 50

ai 50

self-reported · generously rounded

# how_it_was_made

screenshots · 3tap to view

questions0

no questions yet

ask how it was made — the dead-ends are usually the good part

ask about the process…sign in

~/slopfolio··

This was built for a hackathon's open selection task, where entrants had to make a photo-frame generator for the event and post the result publicly. Rather than guess at the branding, the AI opened the event's own site and read its computed styles, pulling the exact green, cream, yellow and hot pink hex values plus both typefaces (a mono and a condensed display serif, both freely available), then downloaded the real wordmark. I decided to build all three output formats instead of the one the task required, including a group frame, because the task description asked entrants to get teammates into a combined frame. Everything renders in the browser on a canvas element with fonts and artwork preloaded, so switching formats or typing a name repaints instantly and nothing round-trips to a server. The AI wrote the drawing code, the photo intake (including converting iPhone HEIC files in-browser and downscaling large camera files), and the share flow; I made the calls on scope, format count, and what "on-brand" had to mean.

// best_dead_end

Two vector assets downloaded from the event site turned out to be lettering, not decoration — mirroring one for the opposite corner rendered the text backwards. They were replaced with a palm tree drawn procedurally in code, which also fixed a second problem: the first version's fronds were too short and straight, so it read as a clump of grass until droop was added at the tips.

# prompting_approach

I gave a rough spec up front — the full task brief plus a reference to the style of ticket card I wanted — and let the AI research the branding itself instead of describing it. After each render I looked at the actual output image and called out specific problems, one at a time: the curved text sat outside the circle that the social platform crops profile pictures to, the palms looked wrong, tap targets were too small on mobile. Correcting against rendered images rather than reading code caught things that would have shipped otherwise.