Turn a full Relume design into a working, responsive website by connecting Claude to the Relume Library MCP and your Figma export. This is one of the most effective workflows we've seen agencies and freelancers adopt.

What you'll need

A Relume account, Figma, and an AI tool that supports MCP connections (this guide uses Claude). Total build time once set up: around 10 to 15 minutes.

Step 1: Connect the Relume Library MCP

The Relume Library MCP gives your AI tool direct access to all 1,000+ Relume components, plus a consistent design system, in one click.

1. Copy the MCP URL: https://relume-library-mcp.relume.io/mcp
2. Add it as a connector in Claude (or your preferred AI tool)

Once connected, the AI references real Relume components when it builds, rather than generating layouts from scratch.

Step 2: Design your site in Relume

Start your project in Relume as normal. For this example we'll use Rebank, a digital bank.

1. Generate your sitemap
2. Generate wireframes
3. Apply your style guide
4. Complete the full design

Step 3: Export to Figma

Export your finished design from Relume into Figma. You'll now have the complete site design as a Figma file, ready to hand to Claude as the source of truth.

Step 4: Connect Figma to Claude

Add the Figma MCP to Claude so it can read your design file directly. With both connections in place, Claude can see the full design in Figma and pull the matching components from the Relume Library.

Step 5: Prompt Claude to build

In Claude, write a prompt that: