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.
📖 Read the full source: r/ClaudeAI
👀 See Also
Claude User Preferences: A Redditor's Setup for Concise, Critical Responses
A Redditor shares their Claude User Preferences tweaks to get less corporate, more critical responses. Includes tips to avoid repetition, start with conclusions, and simplify punctuation.
How to Cut OpenClaw Agent Costs by 80% with Model Switching
A user tracked token usage for 14 days and found 67% of spend was on tasks where cheap Flash models matched Opus quality. Switching to Flash by default and using /model mid-session cut costs from ~$170 to ~$35/month.
Custom PostToolUse Hook for On-Demand CLAUDE.md Loading Outside Project Tree
A developer shares a custom PostToolUse hook solution that enables Claude Code to read CLAUDE.md files from directories outside the current project tree on-demand, addressing limitations in the built-in loading behavior.
Reddit user shares prompt structure to reduce Claude Code output drift in complex tasks
A Reddit user found that using a structured prompt layout for longer Claude Code tasks helps prevent output drift. The approach involves defining specific elements like task scope, required files, success criteria, and avoidance parameters before execution.