Annotation-Driven UI: How to Design Templates in Figma and Let Claude Extract Coordinates

A developer building Zinecore, a zine-making app with a 90s/y2k aesthetic (hot pink, chunky outlines, chat bubbles, riot grrrl flyers, MySpace-style pages), found that the obvious approach—programmatically defining photo slots in code—constrained every template to a boring grid. The workaround: design templates in Figma (some AI-generated, then cleaned), export as flat PNGs, and draw colored rectangles on a separate layer. Red for photo slots, blue for text. Feed both the design and the annotation image to Claude.

Claude extracts the coordinates, generates editable area definitions, and wires up tap targets. The result: an afternoon of work for what would have been weeks building a custom layout engine. Adding a new template now requires only designing it and drawing boxes—no code change. The entire design-tool system is this annotation pipeline.

The Broader Pattern: Paper-First Design

The developer emphasizes a workflow shift:

• Do all design thinking on paper before Claude sees anything.
• Sketch screens by hand, pick the full color palette, decide type hierarchy.
• Screenshot apps you like and annotate specific things you want to steal from each.
• Hand Claude the constraints and ask for implementation.

Going the other way ("design me an app, make it look 90s") leads to three days of nudging toward something that still feels generic. Claude is strong at implementing a specific vision faithfully, but weak at having the vision for you. Once you treat design as your job and implementation as Claude's, output quality jumps.

The Unglamorous Details

• Describe visual problems in terms of weight, hierarchy, and rhythm instead of "this looks off, make it better."
• Paste hex codes from real reference photos instead of saying "warm pink."
• Be specific about which app's spacing you're trying to mimic—don't just name the vibe.

The app (Zinecore on the App Store) is the concrete result, but the paper-first annotation method is the transferable part.