Your Component Needs a Bigger Change: Step Back Into Claude Design Before Touching Code

When an existing component needs more than a style tweak — a layout shift, a structural rework — run /design with the current code as context to explore directions before any file changes are committed.

The default Claude Design flow is linear: sketch → implement. The reverse loop — code → design — is what you reach for when a component already exists and the problem isn't a CSS property but a structural one.

The workflow:

1. In your Claude Code session, run /design explore directions for [component name] and paste the component's current JSX or reference its file path. Claude Code reads your DESIGN.md and existing design system context, then drafts 2–3 artboard directions in the /design preview. It already knows your tokens, components, and layout conventions from earlier file reads.

2. Review the directions in the artboard. You can click elements to adjust colors, spacing, or text directly before committing — this is where you catch "this feels wrong" before code changes are in flight.

3. Pick the direction and tell Claude to implement it. It writes to the actual component file starting from the artboard structure, not as an incremental patch on the old layout.

When to use this vs. just editing: Use the design loop when the fix requires rethinking where elements sit — layout, hierarchy, visual weight. If the fix is "change this color to match the token" or "fix the margin", just edit. The fork is worth the extra step only when you genuinely don't know which direction is right.

The limit: the artboard preview renders a static snapshot — it doesn't pull live component state (loading skeletons, error states, empty states). If those matter for your redesign, spec them explicitly in your /design prompt or in DESIGN.md before you implement. Edge states you don't name tend to come out as empty-div placeholders that pass a quick visual check and break in production.

Sources: Claude Code /design — What's New Week 34, code.claude.com · Claude Design + Claude Code Workflow 2026 — vanbeaumond.nl · Claude Design to Claude Code: AI Design Handoff — claudefa.st