Instead of describing a UI layout in words — "there's a sidebar on the left, a header across the top, three cards below…" — just show Claude the design.
Take a screenshot of your Figma design, a whiteboard sketch, or any reference UI, then paste it directly into Claude Code:
# macOS: copy a screen region to clipboard (no file saved)
Ctrl+Shift+Cmd+4 # drag to select, copies to clipboard
# Paste into Claude Code
Ctrl+V # in Ghostty; Cmd+V in most other terminals
Then give Claude a build instruction alongside the image:
Here's a mockup of the notification panel. Build this as a Vue 3
component using Tailwind. Match the layout as closely as possible.
Claude reads the visual structure, infers spacing and hierarchy, and generates a component that matches what you showed it — far faster than translating a design into a text description.
This works for:
- Figma or Sketch exports → generate the component
- Screenshots of competitor UIs → "build something similar to this"
- Hand-drawn wireframes → "implement this layout"
- Before/after design comparisons → "update the component to match the new design"
You can also paste two images at once — the current state and the target design — and ask Claude to identify the differences and apply them.
A picture is worth a thousand prompt tokens — show Claude the design and let it close the gap.
Log in to leave a comment.
The /security-review command scans your uncommitted changes for injection vectors, auth gaps, hardcoded secrets, and other common vulnerabilities.
The SessionStart hook fires when any session begins or resumes, making it ideal for loading environment variables and running one-time setup scripts.
Ask Claude to write property-based tests for your functions using fast-check — it identifies the mathematical invariants in your code and generates tests that cover inputs you'd never enumerate by hand.