Today you can generate a site map, sitemaps, wireframes and even the main sections of a website in a few minutes using AI. Relume Promise just that. But does this tool really hold up for serious projects, on Webflow, Figma or another builder?

Relume: the ultimate AI tool for web design or just another simple builder?

Relume is an AI tool designed to speed up the creation of sites, pages and sections, without locking you into a closed builder. The idea is simple. You keep your Webflow, Figma, React or other stack. Relume connects to it to generate a sitemap, a map, wireframes, components and copy much faster than if you started from a blank page.

The tool does not seek to replace Webflow or Figma. It acts as a layer on top of your current process. You continue to master the design, the classes, the style guide, the code, and the final results. Relume simply saves you hours designing structures and sections.

Review in 2 minutes: what the AI tool generates for your sites

Before getting into the details, what an SME or other is really interested in is simple. What exactly does Relume generate for your web project and your customer pages.

Relume Site Builder, the AI brick at the center of the workflow

The heart of Relume is the Site Builder. You describe your project in a prompt. You explain your activity, your audience, your offers, your positioning. The AI tool analyzes this information and generates a complete map of your site.

You get a structured sitemap with the key pages. Home page, service pages, pricing page, blog, resources, contact. For each page, Relume offers typical sections. Hero, social proof, benefits, features, content sections, FAQ. This plan is visual, easy to read and you can immediately see how the site will tell the story of your product.

Site Builder doesn't end with the plan. It also generates wireframes for each page. You see the blocks, the sections, and the order of the contents. Sounds like a low-fidelity mockup you could do By hand in Figma, except that you get it in a few minutes. Very quickly, you find yourself with a structured project.

Relume Library: web component library ready for Webflow, Figma, React

The second major building block is the Relume Library. It is a library of reusable components and sections. This bookstore covers a large part of the classic needs of a marketing site.

You will find hero sections, feature blocks, comparisons, comparisons, card grids, blog sections, forms, prices, FAQs, footers. The designs are designed for the modern web, with a clean style and well-structured classes.

You can use the library in Webflow thanks to a pre-built project base. You can also find these components in a Figma kit or in a React kit if your team is developing a custom front end. In this way, you create your pages by choosing existing sections rather than redrawing everything each time.

Relume goes further with “Your Library.” You can register your own components, your own style guide, your own sections. You keep your design standards, your classes, your visual vocabulary. The tool then becomes an accelerator aligned with your brand, and not just a generic catalog.

The Relume ecosystem: plugins, extensions, imports, exports

Relume is not an isolated tool. It integrates into your current web stack with several technical components.

You have a Figma plugin to import sitemaps, wireframes, pages, and sections generated in the Site Builder directly into Figma. You can then push the design, refine the designs, adjust the copy and finalize your kit.

You also have a Webflow Library ready to use. You can import components into your project, keep your class logic clean, and rely on a consistent guide style. The objective is clear. Limit code problems, duplicate classes and hacks that are often seen in Webflow projects made in a hurry.

The Relume Chrome extension complements all of this. It allows you to manage the import, the sync of classes and some settings directly in the Webflow constructor. You can thus keep the link between your library, your real site and the components you have chosen in the library or in “Your Library”.

Finally, Relume also offers export options to React or other front-end environments. So you can keep the same plan, the same sections and the same sitemaps even if you decide to leave Webflow on some projects.

Is Relume made for your web project?

You don't need Relume for every site. But in some cases, the tool can transform your creative process.

For what types of projects and sites Relume works best

Relume is very comfortable on marketing sites. You are thinking of a B2B SaaS, a startup, a tool, a tool, an agency, an e-commerce brand that wants a solid content site. The need is clear. You need several pages, a coherent plan, clean sitemaps, a readable structure.

For very simple showcase sites, with a single page, the tool provides less value. For a large, ultra-tailor-made project with a very advanced design system and very strong code constraints, it mainly serves as a starting point. You will then use sitemaps and wireframes as material for design work.

Profiles for which Relume provides the most value

Webflow designers who manage several projects at the same time save a lot of time with Relume. The AI builder generates the structure, the wireframes and part of the copy. They can focus on pure design, style guide, code quality, and animations.

Figma designers who often frame projects before passing them on to a dev team also have a lot to gain. Instead of drawing dozens of wireframes by hand, they use Site Builder results as a base. They then keep control of the Figma library, components, variants and kits.

For an SME founder or a marketing manager, Relume is mainly used to clarify the plan. You can prepare your sitemap, your pages, your sections even before choosing an agency. You arrive with a clear vision of your site. You then have this vision validated, corrected and enriched by designers and devs.

How Relume works: from the AI prompt to the site in Webflow or Figma

Now let's see how a typical project with Relume goes, from the first prompt to the import in Webflow or Figma.

Step 1: Generate a sitemap with Relume AI

It all starts with a prompt. You describe your project, your offers, your audience, your conversion goals. Relume sometimes asks you a few additional questions to clarify certain points. Then the AI generates a sitemap.

This sitemap looks like a very detailed site map. You see all the pages. You can see the menu structure. You see the relationships between pages, sites, sections. You can edit, rename, delete, or add pages. It's time to clarify your architecture before touching on the design.

This step is already a huge time-saver compared to an outline built in a spreadsheet or in a text doc. You have a clear, editable and shareable view with your client or team.

Step 2: Generate wireframes and sections for each page

Once the sitemap is validated, you start generating wireframes. Relume takes each page and proposes a succession of sections. For example, for a “Features” page, you can get a hero, a benefits section, a component grid, a social proof section, an FAQ.

Wireframes remain neutral in terms of style. The aim is to have a legible and effective structure, not yet a final design. You can reorder sections, delete sections, add sections. You can generate several variants of the same page if you want to compare several possible designs.

In this way you get a very concrete plan of the pages. You see how visitors will move from one section to the other. You can already check that the key arguments are well placed. You can also identify gaps and problems along the way.

Step 3: copy and style guide generated by the tool

Relume doesn't just generate gray rectangles. The tool also offers a first version of the copy. Each section contains titles, subtitles, text, and CTAs. It is not a definitive text, but it is a solid foundation.

You can edit this copy in the interface, adjust the tone, integrate your business vocabulary. You can also rely on other AI tools to go further in writing, but the structure comes from Relume.

At the same time, the tool sets up a guide style. You will find styles of titles, paragraphs, classes for buttons, recurring components. In Webflow, this guide style takes the form of a dedicated page with ready-to-use classes. In Figma, it is translated into a kit, a library of styles and components.

Step 4: import and sync in Figma, Webflow, React

When you are satisfied with the plan, the sitemaps, the wireframes and the copy, you move on to the import.

In Figma, you use the Relume plugin to import pages and sections into your file. Wireframes become Figma frames that you can rework, style, transform into high fidelity designs. You can connect these frames to your Figma design system, your own kit, and your component library.

In Webflow, you can use the Webflow Library, the Chrome extension, and the import app to inject sections and classes directly into your project. You find the style guide, the classes, the library and you can replace the basic blocks with more advanced components. Class sync allows you to maintain consistency between several projects and between “Your Library” and your various sites.

For a technical team that works in React or in a front-end framework, you can export the structures to a React kit. Sitemaps, sections, and components serve as the basis for the home builder. This ensures continuity between what you design in Relume and what you develop on the code side.

Relume vs your current stack: Webflow, Figma, other AI builders

Relume does not live in a vacuum. You need to compare it to your current process to find out if the AI builder is worth the investment.

Relume vs “I do everything by hand in Figma”

Without Relume, you start with a text doc or a workshop to create an outline. You then spend some time in Figma drawing wireframes for each page. This work is useful, but time consuming. It also depends a lot on the motivation of the moment.

With Relume, the generation of sitemaps and wireframes is largely automated. You keep control over copy, style, and designs. But you no longer spend days creating grids of sections that look the same from one project to another. You get this time back to work on the quality of the design and the coherence of the message.

Relume + Webflow vs Webflow alone

With Webflow alone, you can of course build a complete site. But you have to invent the structure of the pages, create the sections, name the classes, set up your guide style, section by section. If you manage several projects, the risk is to have projects with different class structures, variably organized pages, and maintenance problems.

By adding Relume, you get into the builder with a clear plan, wireframes, guide style, and proven components. You keep the freedom to modify, but you start from a solid base. Syncing classes and importing sections help keep code clean, better quality averages across your sites, and fewer problems when you return to a project a year later.

Relume vs other web design AI tools and builders

Other AI tools promise to “generate a complete site” from a simple prompt. The problem is often that you find yourself locked in their manufacturer. It is then difficult to export, to connect the site to your stack, or to control the code.

Relume has a different position. The AI builder focuses on the plan phase, sitemaps, wireframes, sections. He then leaves control to the designers on Figma, to the integrators on Webflow, to the devs on React. For an SME, a small business or an agency, this approach is often healthier. You stay in control while taking advantage of the speed of generation.

How much does Relume cost and how to choose the right plan

Prices are changing and plans are changing. Above all, it is important to understand the logic behind these plans.

Overview of plans and business model

Relume generally works on a subscription model. You pay for access to the Site Builder, the library, the plugins, the import and export functionalities. Plans vary depending on the number of projects, the number of team members, access to the library, “Your Library” and some premium kits.

For a small organization, the challenge is to check whether the time saved on creating sitemaps, wireframes, pages and sections more than compensates for the cost of the subscription. For an agency, you must also look at the impact on the average quality of each site and on the load of designers.

What plan for an SME, a freelancer, an agency

A freelancer or a small studio that manages a few sites per year will instead need an entry plan, with access to the Site Builder, the library and the Chrome extension. The aim is to save time on each project while maintaining control over the design.

An agency with several designers and several projects in parallel will benefit from a more advanced plan. Access to “Your Library”, team management, management of several projects, advanced import into Webflow, advanced sync. The gain is then played out on the industrialization of the process.

An SME that wants to keep Relume as an internal framing tool can be satisfied with a plan that covers the Site Builder and the generation of sitemaps. The marketing team prepares the plan, the pages, the sections and then transmits this work to an agency or a Webflow freelancer.

Relume and the suite for your web projects

Relume is not just another trend in AI. It is a real structural tool for your web projects. It does not replace Webflow, Figma, or your team. It slides into the center to generate sitemaps, pages, pages, sections, wireframes, and style guide faster and cleaner.

If you are the head of an SME, a small business or an agency, the question is not only “is Relume good”, but “what is the cost of continuing to do everything by hand”. The time you're still spending today inventing site maps, sections, and wireframes is time you could invest in positioning, conversion, design, and performance.

At Scroll, we use Relume, Webflow and Figma on a daily basis to build sites that generate results, not just pretty pages. If you want to see how Relume can be integrated into your own process, on your projects and your stack, We can talk about it and show you examples adapted to your context.