Why Your Claude Code UI Output Drifts and How a Structured Spec Fixes It
If you've been using Claude Code for UI work and fighting output drift — where repeated prompts return inconsistent layouts that never converge — the root cause probably isn't your prompt quality. According to a detailed post on r/ClaudeAI, the actual issue is format: Claude Code expects structured specs, not prose descriptions.
Prose vs. Structured Specs: What Changed
The author reports that describing UI in prose ('button on the left, slightly rounded corners, modern look') yields inconsistent results. Switching to a structured spec with exact hex codes, exact font weights, exact spacing, every screen state, and every transition collapsed the output from 'interpretive' to 'this is the thing.' When the model stops guessing, drift disappears.
Practical Workflow: Screen Recording → MCP Server
Manually writing a detailed spec is impractical. The author realized most developers already have the necessary source material: screen recordings (App Store demos, design walkthroughs, dev recordings). The missing piece was a way to convert those recordings into Claude's structured format. So they built and open-sourced an MCP server that does exactly that. Vision runs through your own Claude subscription, so there's no API key dance.
Key Takeaway
The tool is secondary to the workflow shift: stop describing layouts in prose. If you're doing UI work with Claude Code, provide a structured spec with concrete values. The post author asks: what's your current prompt-to-output workflow for UI work?
📖 Read the full source: r/ClaudeAI
👀 See Also
companion-capture: Tool saves Claude Code's ephemeral speech bubbles
companion-capture is an open-source tool that captures Claude Code's companion character speech bubbles before they vanish from the terminal. It saves messages to markdown files and SQLite for search, using VT100 screen buffer parsing to track cursor positions.
Claude Pulse Browser Extension Surfaces Token Counts, Cache Timers, and Rate Limits on Claude.ai
Claude Pulse is a client-side Chrome extension that adds a real-time dashboard to Claude.ai showing per-message token counts, total context usage, prompt cache expiry timer, and rate limit progress bar. Also includes chat export to Markdown.
Free macOS Menu Bar App Shows Real-Time Claude Usage Stats via SQLite Cookie Decryption
Claude Usage Tracker is a free macOS menu bar app that reads Claude desktop app encrypted SQLite cookies, decrypts them via Keychain, and displays session %, weekly limit, spend, and routine runs locally — no API key needed.
Claude Code Plugin Analyzes Token Waste and Anomalies Locally
A developer built a Claude Code plugin that diagnoses token waste by detecting six anomaly types from local session data. The tool analyzed 8,392 sessions and found 1,015 anomalies, with ExcessiveToolUse being the most common.