Direct answer
Give Claude Code a real design system, one explicit screen goal, reusable components, and browser review.
Connect design context
Claude Code can use MCP servers as tools during a coding task. Connect Better Design once, then ask Claude to load the relevant design system and principles before changing interface code.
claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"Define one screen job
State who uses the screen, what they need to complete, and what must remain unchanged. A narrow job produces clearer hierarchy than a request to make an entire app look better.
Improve the billing settings screen for a small-team admin. Keep the existing data flow and components. Make changing plans the primary task, preserve keyboard access, and verify the result at desktop and mobile widths.Require the implementation path
- Use the project's existing tokens and components first.
- Choose or extract one design system before styling.
- Load the UI principle for visual decisions and the UX principle for behavior.
- Keep one primary action and make supporting actions quieter.
- Run TypeScript, lint, and the relevant tests before visual review.
Review the rendered screen
Compilation proves that code is valid, not that the interface is usable. Open the affected screen, test keyboard focus and interactive states, inspect mobile overflow, and compare the result with the stated screen job.
Ask Claude to fix critical and serious findings before it reports completion. Keep subjective polish separate from measurable failures such as missing labels, weak contrast, or clipped controls.
Questions
Can Claude Code choose a design system automatically?
It can suggest suitable systems, but the user should choose the visual direction or explicitly request a custom one. That decision affects every component and should not be hidden inside implementation.
Should Claude Code rewrite existing components?
Usually no. It should compose the project's existing primitives first and change shared components only when the requested behavior cannot be achieved cleanly at the feature layer.
Is a screenshot enough to verify the UI?
A screenshot verifies appearance at one state and size. Interactive work also needs keyboard, focus, hover, pressed, error, loading, and responsive checks where those states apply.