Generated Components Don't Know Your Breakpoints: A Three-Step Responsive Review Before Claude Code Handoff

Design tools generate components at the canvas size you give them. They don't know your Tailwind breakpoints. Here are three responsive failures to catch before the handoff bundle lands in Claude Code.

Sending a component straight to Claude Code with unresolved responsive issues means Claude Code tries to implement a layout that can't scale — and you spend the cleanup time you were hoping to skip.

Check 1: Fixed pixel widths where relative units belong.

Generated components commonly hard-code widths like width: 480px. In Claude Design, select each container element and look at the layout panel. Any explicit pixel width that should be fluid — a card, a content column, a grid cell — swap to %, fr, or a named token from your design system. The rule is simple: if the element should grow when the viewport grows, it needs a relative unit. If Claude Design locked it to pixels, it was working from what the canvas implied, not what your system requires.

Before handing off, every container that crosses a layout boundary should be relative. Fixed widths are fine for icons, avatars, and constrained inline elements.

Check 2: No mobile layout rule.

A horizontal card grid looks correct on a 1280px canvas. It has no rule for what happens below 640px — it just overflows. In Claude Design, duplicate the frame to a mobile viewport (375 × 812 is the standard reference size), apply the same component, and specify explicitly what changes:

• Grid collapses from three columns to one.
• Card image stacks above text.
• Font sizes drop one step in the type scale.
• The CTA button goes full-width.

Each breakpoint behavior you define in the canvas is a decision Claude Code doesn't have to guess. Whatever you don't specify, Claude Code invents — and it will invent something.

Check 3: Text overflow on real content.

Generated copy fills the design neatly because it was written to fit. Real content is longer. Before handing off, manually extend the text in two or three text nodes to 2× their current length and observe what breaks: truncation without ellipsis, overflow past the card boundary, a heading that wraps awkwardly. Add explicit handling in the canvas — line-clamp, overflow: hidden, or a min-height — for every case you find.

The handoff note that pays off.

When you pass the bundle to Claude Code, include a one-paragraph note alongside it:

"Grid collapses to 1 column below 640px (sm:grid-cols-1). All container widths use w-full or design-system max-w-* tokens — no hardcoded px widths. Text nodes use clamp() from the typography scale; long values clamp at two lines."

Claude Code reads this note and implements to your spec instead of reconstructing intent from the component structure alone. The note costs 30 seconds and saves a review cycle.

What this pass doesn't cover: accessibility (color contrast, ARIA roles, keyboard focus) — that's a separate checklist, covered in the August 18 post.

Sources: Get started with Claude Design — Anthropic Help · Set up your design system — Anthropic Help · Responsive design testing — Smashing Magazine