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 Code: Context Management Over Prompt Engineering
A developer shares that after a year of using Claude Code, the key skill isn't prompt wording or model selection, but providing comprehensive project context upfront to get better results.
Claude Prompt for Visualizing Thinking Structure: Intent, Reality, Gap
A Reddit user shares a 100-word prompt for Claude that asks the AI to notice and reflect back the structural patterns in conversation—categorized as Intent (what you WANT), Reality (what IS), and Gap (what's UNRESOLVED)—rather than the content itself.
High CPU/RAM and Gateway Restarts in OpenClaw? Disable IPv6 for Telegram
Setting autoSelectFamily: false and dnsResultOrder: 'ipv4first' in Telegram bot config stops ENETUNREACH errors, fixing high CPU, event loop freezes, and gateway restarts.
Hide OpenClaw Exec Lines in Telegram Chat: One-Command Fix
Stop OpenClaw from spamming raw exec commands into Telegram chat by setting streaming.preview.toolProgress and streaming.progress.toolProgress to false. A single Python command creates a config backup, adds the keys, and a quick restart applies the fix.