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
OpenClaw LLM Timeout Fix for Cold Model Loading
A Reddit user identified and fixed a specific timeout issue in OpenClaw where cold-loaded local LLMs would fail after about 60 seconds, even with higher general timeouts set. The solution involves adjusting the embedded-runner LLM idle timeout configuration.
Routing Agent Subtasks to Cheaper Models Dropped Cost from $18 to $4 on Same Refactor
A developer cut agent run costs from $18 to $4 by routing routine subtasks (lint, rename, config edits) to cheap models like DeepSeek V4 Pro and Tencent Hunyuan Hy3, reserving Opus 4.7 for complex reasoning.
OpenClaw Discord proxy fix for REST API timeout issues
A user reports fixing OpenClaw Discord connection issues where WebSocket connects but REST API calls fail with "fetch failed UND_ERR_CONNECT_TIMEOUT" errors. The solution involves creating a proxy-preload.cjs file and setting global undici proxy settings.
Five Common OpenClaw Setup Mistakes That Waste Money and Create Security Risks
Based on reviewing 50+ OpenClaw setups, the same five issues appear repeatedly: using Opus as the default model instead of Sonnet for most tasks, never starting fresh sessions, installing skills without reading source code, exposing the gateway to the network, and adding a second agent before fixing the first.