Fixing Generic AI Web Design with Relume and Claude

Lukas Margeriego watch the original →

the gist

Claude Design produces generic outputs due to a lack of a defined design system. By building a site architecture and style guide in Relume, then exporting that system into Claude Design, you can enforce consistent branding, typography, and component usage before handing off to Claude Code for development.

The Breakthrough

Generic AI-generated website aesthetics are caused by a lack of a formal design system, which can be bypassed by importing a structured design system from Relume into Claude Design before generating pages or exporting to Claude Code.

What Actually Worked

  • Architectural Planning: Use the Relume site map generator to define page structure and hierarchy before committing to any visual design.
  • Style Guide Foundation: Define custom typography, color palettes, and button styles within the Relume style guide canvas to override the default AI aesthetic.
  • Component Selection: Replace default hero and section components with specific, interactive elements from the Relume library to ensure visual variety.
  • Asset Integration: Generate custom logos and illustrations using ChatGPT (Image 2.0) and upload them directly into the Relume style guide to maintain brand consistency.
  • System Export: Use the native Relume-to-Claude Design export feature to import the entire design system as a zip file, which Claude then uses as a reference for all subsequent page generations.

Context

Building websites directly in Claude Design often results in inconsistent, generic-looking outputs because the model lacks a specific design language. By establishing a design system in Relume and importing it, the user provides the AI with a rigid set of constraints for fonts, spacing, and components. This ensures that when the project is handed off to Claude Code for implementation, the resulting site maintains a cohesive brand identity across all pages without requiring manual design drift corrections.

Content References

  • #tutorial
  • #ai
  • #dev-tooling

summary by google/gemini-3.1-flash-lite. probably wrong about something. check the source.