Relume Site Builder: The AI generation tool for website design and wireframe creation for designers.

Blog

Alexandre Teillet
13/12/24
Written by
Alexandre Teillet - Fondateur de l'Agence Webflow Mekaa
Alexandre Teillet
Founder @mekaa
Summary
Share the article

AI tools are everywhere today. It is even difficult to do without it in today's world of work. Let's dive together into the discoveries of Relume and its site builder, which is revolutionizing web page creation. Learn how to create a website in seconds. Really?

What is relume and how does this innovative tool work?

Relume.io is an innovative tool that allows users to quickly create prototypes and models for a website. With an intuitive interface, it continuously learning and helps users learn to design and learn to create. By using AI to create wireframes directly, Relume makes it effortless to go from Figma to Webflow. This allows us developers to modify elements dynamically, which is a real time-saver for developers.

With the Relume Builder, each section is designed to meet the goals of the site, allowing you to customize every detail with a simple click. Relume resources include detailed documentation and plugins that make it easy to transition from Figma to Webflow.

What sets Relume apart from other website creation tools?

Relume site builder stands out from all web creation tools by its richness linked to its virgin Webflow component library, which allows artificial intelligence to be as relevant as possible. This UX component database is accessible in Figma or Webflow and thus leaves you free to choose the type of tool you need. Moreover, as Relume was formerly a Webflow agency, the founders Dan Anisse and Daniel James Slater are well aware of the problems encountered by agencies like Mekaa.

Automatic generation of sitemaps (site map)

The sitemap or site map is a very important element at the start of a project. It allows you to put the site tree structure on paper. Relume allows you to automatically generate this element in two different ways. The first by adding your own prompt. Here nothing complicated, just describe the type of site you want. Plus, you can choose the language of it. The second is by importing the sitemap of an existing site. This feature will scrape the various pages of your current site to put them back on your sitemap. It is important that the key elements are on your sitemap to facilitate Wireframe generation.

Génération de sitemap grâce à un prompt
Generating a sitemap using a prompt

{{banner}}

Site Builder: Creating Wireframes in a few seconds

Relume automatically generates your wireframes based on your sitemap. You will therefore have to be as relevant as possible in choosing your sections. Obviously you can easily change the type of section you want by pressing the magic “Generate” button. The more context you give to the AI, the better it will be able to understand the goals of the site.

Génération de Wireframe grâce à Relume
Automatic Generation of Wireframes

Exporting wireframes in Figma and Webflow

Once your sitemap is created and your prototype generated with copywriting, you will be able to export your site to figure in order to put a coat of paint on your structure. Once the design is done, you can easily import your freshly designed wireframes using the relume plugin in webflow. To not waste time, you can also use the Figma to Webflow plugin.

Import des Wireframe dans Figma
Importing Wireframes into Figma

Chatgpt in charge of copywriting

Chatgpt is integrated directly into Relume to automatically generate copywriting on your pages. A little extra for this functionality since with all the context given on the previous functionalities this copywriting is highly relevant. A feature clearly designed for our marketing friends and that will avoid the phrase “Do you have your copy?”

Generate an AI StyleGuide

In addition to wireframes and content, Relume offers the ability to generate a comprehensive style guide for your website using AI. This innovative feature makes it possible to define a coherent graphic charter in a few clicks, including colors, fonts, components and the main design rules to be respected.

The style guide generated by Relume is based on the latest web trends and best UX/UI practices to ensure a professional and harmonious look. It is fully customizable and can be refined according to your preferences and the visual identity of your brand.

Thanks to this feature, Relume saves designers precious time by automating the creation of this essential element for any web project. No need to start with a blank page or look for inspiration, the AI is in charge of offering a quality guide style to ensure the consistency of your site from end to end.

Style Guide Builder de Relume
Generation of the Style Guide thanks to this new BETA feature

How is Relume going to change the creative process for designers?

With its approach based on generative AI, Relume is profoundly changing the ways web designers work and freeing them from the most frequently and repetitive tasks. By automatically generating sitemaps, wireframes, content, and even style guides, Relume allows designers to focus on the most creative and high-value aspects.

No more hours spent creating each wireframe from scratch or maintaining consistency between different pages. With Relume, designers can get a solid foundation in a few clicks and then iterate and refine that first draft. This saves them valuable time every step of the way and can explore more creative options.

In addition, the extensive integration with essential tools such as Figma and Webflow streamlines the entire process, from prototyping to design and then development. Thanks to Relume, designers have a unified environment to collaborate effectively with their customers and developers, from defining the structure of the site to its final release online.

With its unique approach combining AI and human know-how, Relume is revolutionizing the experience of web designers and pushing the limits of their productivity and creativity. The perfect tool to meet the ever increasing number and demanding demands of the market!

A web design tool reserved for designers?

Although Relume is particularly appreciated for its advanced features, the tool is intended to be accessible to all professionals involved in creating websites. Thanks to its intuitive interface and its AI assistants, Relume can be used by:

  • Digital project managers to quickly prototype and visualize a new site
  • UX designers to generate wireframes and test different page structures
  • UI designers to obtain a basic UI kit and define the graphic identity of the site
  • Front-end developers to retrieve ready-to-integrate page templates
  • Editors and content managers to generate and organize page content

Relume is positioned as a transversal tool that promotes collaboration between all stakeholders in a web project. Everyone will find functionalities to optimize their work, from writing the brief to putting it online. A real 360° solution to unify your teams!

Even beginners and non-professionals can exploit the power of Relume to create their site independently. The numerous templates and the contextual help allow everyone to obtain a professional result without technical skills.

What are the features of Relume in a nutshell?

In summary, Relume is full of features designed to simplify and speed up web design. Here are the key points to remember:

  • Automatic generation of sitemaps from a brief or by importing an existing site
  • Creation of responsive wireframes and interactive prototypes for each page
  • Writing SEO-friendly content with the help of an AI assistant
  • Generating a Complete and Customizable Style Guide
  • Advanced integrations with Figma and Webflow for optimal workflow
  • Plugins and code export to facilitate the work of developers
  • Library of ready-to-use components, templates, and assets
  • Real-time feedback and collaboration tool for teams

With all these capabilities, the Relume suite is a must for all web professionals, from designers to project managers. An all-in-one solution to realize your site projects more quickly and peacefully.

{{banner}}

Is AI at the service of site builders?

Beyond a simple tool, Relume embodies a new vision of web design based on artificial intelligence. Each feature has been designed to make the most of the potential of generative AI technologies and put them at the service of site creators.

Where traditional site builders (Wix, Webflow, Squarespace...) have automated development, Relume pushes automation even further by addressing design, content structure, interactions... Anything that can be generated by AI, Relume takes care of it for you.

This unique approach not only saves a lot of time, but also allows you to explore new creative paths. With Relume, the machine becomes a true creative partner that feeds your inspiration and multiplies your abilities. Enough to consider the future of web creation from a constantly new angle!

How do you start with Relume and realize your first project?

Are you convinced by Relume's promises and want to test its potential on your next web project? Nothing could be simpler:

  1. Go to relume.io and create your free account
  2. Start a new project and let yourself be guided by the interface
  3. Fill in your project brief: objectives, targets, tone, key functionalities...
  4. Relume then generates a first sitemap, wireframes and a style guide
  5. Refine AI proposals according to your preferences
  6. Automatically Generate Content and Optimize It for SEO
  7. Export Your Designs to Figma to Refine Them If Necessary
  8. Use the Relume plugin for Webflow to integrate your pages
  9. Carry out specific developments and put your site online!

You can get a first, professional quality prototype in just a few minutes. Relume takes care of a large part of the work to allow you to realize your ideas at an ever-increasing speed. You only focus on tasks with the highest added value.

Do not hesitate any longer and start the Relume adventure now to revolutionize the way you build websites!

{{banner}}

What new features can we expect for Relume in 2024 - 2025?

The Relume team is full of ideas to further enrich its tool and push the limits of AI-assisted web design. Among the developments already envisaged for the coming months, we can mention:

  • An even greater customization of the graphic styles generated
  • A conversational AI assistant to refine briefs and better understand needs
  • Advanced accessibility features to generate inclusive sites
  • A marketplace to sell your own templates and components
  • A Tool for Generating Animated Models and Prototypes
  • More integrations with the most popular CMS and tools
  • Specialized models by sector of activity for ultra-relevant designs

The adventure has only just begun for Relume, which is already establishing itself as a reference in web creation powered by AI. A visionary and promising tool that deserves our full attention!

In summary, the best AI tools on the market?

At the end of this exploration of the possibilities of Relume, one conclusion is clear: this tool marks a real turning point in the democratization of web creation. With its global approach combining AI and human know-how, Relume gives everyone the means to create professional sites with ease.

From sitemaps to content to the design system, Relume automates an increasing number of key steps in the creative workflow. A considerable saving of time and energy for web teams, who can refocus on business issues and user experience.

Intuitive, powerful and surprisingly easy to learn, Relume is attracting an ever wider audience, from developers to project managers to designers. The promise of a unified and redesigned web creation experience to make the most of the potential of generative AI.

A true Swiss knife for new generation web design, Relume is constantly evolving and pushing the limits. The current features are just the start, and there are still plenty of surprises waiting for users in the coming months. One thing is certain: Relume has a bright future ahead of him and will permanently transform the way we imagine websites. A revolution that should not be missed under any circumstances!

So, convinced by Relume's vision? All you have to do is create your account on relume.io and let yourself be guided by artificial intelligence to bring your most ambitious projects to life. You will see, creating a website has never been so easy and intuitive. Welcome to the future of web creation!

{{banner}}

Share the article

To go further

What is Relume?

Relume is a platform designed to simplify and speed up the creation of websites on Webflow. It offers a comprehensive library of pre-built and customizable components, allowing users to quickly integrate sections like headers, footers, FAQs, and more into their projects. With Relume, Webflow developers and designers can save time, maintain visual consistency in their designs, and respect development best practices. This resource is ideal for freelancers, agencies, and creators looking to optimize their process while ensuring high-quality sites.

What is relume ai?

Relume AI is an innovative tool that integrates artificial intelligence to transform website design. It allows sitemaps and wireframes to be generated quickly from simple text descriptions, thus facilitating the initial design phase. With an extensive library of over 1,000 pre-built components for Figma and Webflow, users can create consistent, professional designs in a short amount of time. In addition, Relume AI offers direct export capabilities to Figma and Webflow, simplifying the development process and allowing real-time collaboration within teams. Â

How do I copy/paste a review section on Webflow?

To copy a section from the Relume library to Webflow, start by logging into your Relume account and accessing their component library. Browse through the available sections, select the one that fits your needs, and click on the “Copy to Webflow” option to copy the component. Then, open your Webflow project, navigate to the page where you want to embed the section, and paste it where you want using the keyboard shortcut Ctrl+V (Windows) or Cmd+V (Mac). Once the section is integrated, customize it directly in Webflow by modifying the colors, texts, images, or animations so that it fits your project perfectly. This quick and easy process allows you to take advantage of Relume's prebuilt components while maintaining great flexibility in your design.