Relume: Textual descriptions drive AI to build sitemaps and wireframe prototypes

General Introduction

Relume is an AI-powered website builder designed to help designers and developers quickly create beautiful, responsive websites. Using over 1,000 pre-built components, Relume enables users to easily generate sitemaps and wireframes in Figma and Webflow. The platform not only increases productivity, but also simplifies cross-team collaboration and project management.

Function List

• AI-generated sitemap: Quickly generate a complete sitemap by simply describing your company information.
• Wireframe Generation: Convert sitemaps to wireframes with real components and copy in one click.
• component library: Provides over 1,000 Figma and Webflow components with support for mobile variants.
• Cross-team collaboration: Supports project sharing and commenting, streamlining team communication and the design approval process.
• export function: Components and pages can be copied directly for use in Figma or Webflow.
• AI Copywriting: Automatically generate copy in wireframe diagrams, support multi-language translation.
• project management: Reduce project scope sprawl by managing sections of your site with smart labels and colors.

Using Help

utilization

1. Registration and LoginVisit the Relume website (https://www.relume.io/) and click on the "Start for free" button to sign up for a new account or log in to an existing account.
2. Create a projectAfter logging in, click the "Create New Project" button and enter the project name and basic information.
3. Generate a sitemap::
   • On the project page, click the "Generate Sitemap" button.
   • Enter a brief description of your company or project and AI will automatically generate a sitemap.
   • Sections can be dragged, added, edited or deleted until satisfied.
4. Generate wireframes::
   • On the Site Map page, click the "Generate Wireframes" button.
   • The AI will automatically convert the sitemap into a wireframe with real components and copy.
   • Editing and adjustments can be made using components from the component library.
5. Export to Figma or Webflow::
   • On the wireframe page, click the "Export" button.
   • Select Export to Figma or Webflow, copy the generated code and paste it into the appropriate tool.
6. Cross-team collaboration::
   • On the project page, click the "Share Project" button to generate a sharing link.
   • Team members can access the project through links to comment and collaborate.
7. project management::
   • Use smart tags and colors to manage all parts of the site to ensure that projects are in order.
   • Regularly update component libraries and style guides to keep projects consistent and up-to-date.

Detailed Operation Procedure

1. Creating and editing components::
   • Select the desired component in the component library and drag it to the wireframe diagram.
   • Double-click on a component to edit it, and you can modify the copy, style, and layout.
   • Automatically generate multilingual copy using AI copy generation.
2. Managing project scope::
   • Use smart tags to mark global sections or specific colors for easy management and identification.
   • Regularly review and update site maps and wireframes to ensure that the scope of the project does not spread.
3. Export and Integration::
   • Ensure that all components and pages have been edited and click the "Export" button.
   • Select the export format (Figma or Webflow), copy the generated code and paste it into the appropriate tool.
   • Make final adjustments and publish in Figma or Webflow.

With these steps, users can quickly get started using Relume to create high-quality website designs that improve productivity and teamwork.

The layman's guide to getting started with AI

Help you learn how to utilize AI tools at a low cost and from a zero base.AI, like office software, is an essential skill for everyone. Mastering AI will give you an edge in your job search and half the effort in your future work and studies.

View Details>