Paste UI screenshots to pin down design intent
Drop a screenshot of the broken state (or the Figma frame) directly into the chat — agents are way better at vision-grounded UI work.
- Type: Prompt
- Tags: Coding Agent Hacks, Intermediate, Claude Code, Cursor
- Updated: 2026-10-01
Prompt
Drop a screenshot of the broken state (or the Figma frame) directly into the chat — agents are way better at vision-grounded UI work. Describing 'the button is slightly misaligned' wastes tokens and your time. Cmd+Shift+4 the region, paste it in, and the agent can see the exact pixel issue. Same for matching a Figma comp — paste the frame, ask for a faithful implementation, iterate on diffs of screenshots. Implementation example: # Workflow 1. Cmd+Shift+Ctrl+4 (macOS) — copy region to clipboard 2. Paste into Claude Code / Cursor chat 3. "Match this layout. Use existing Tailwind tokens. The dev server is running at :3000." 4. Agent edits, you screenshot the result, paste again "Closer — the gap above the title should be 24px not 16px"
More prompts
- Expense Report Automation System — Save More Time
- Meeting Scheduling Link Standardization — Save More Time
- Invoice Generation and Delivery Automation — Save More Time
- Document Template Automation Library — Save More Time
- Calendar Management Automation Rules — Save More Time
- File Organization and Naming System — Save More Time
- Recurring Payment Automation Setup — Save More Time
- Data Entry Elimination Framework — Save More Time