Denis Bauer
@denisbauer.com
CTO at NEOintralogistics, passionate about business, tech and leadership. Previously Microsoft, Joblift and audibene.
Interests: LLMs, RecSys, conversational AI
Location: Berlin
Interests: LLMs, RecSys, conversational AI
Location: Berlin
Here is a YouTube video that inspired my to give this approach a shot: www.youtube.com/watch?v=v1ah...
Relume's mind-blowing AI Site Builder: Crash Course
YouTube video by Flux Academy
www.youtube.com
December 28, 2024 at 11:55 PM
Here is a YouTube video that inspired my to give this approach a shot: www.youtube.com/watch?v=v1ah...
🚀 Overall, this workflow works very well to quickly build landing pages and static websites.
Relume.io AI features efficiently generate a site skeleton, while the components allows fast assembling of pages. Once understood, the separate style guide made it easy to have a consistent page design.
Relume.io AI features efficiently generate a site skeleton, while the components allows fast assembling of pages. Once understood, the separate style guide made it easy to have a consistent page design.
Relume — Websites designed & built faster with AI | AI website builder
Use AI as your design ally, not as a replacement. Effortlessly generate sitemaps and wireframes for marketing websites in minutes with Relume’s AI website builder.
Relume.io
December 28, 2024 at 11:55 PM
🚀 Overall, this workflow works very well to quickly build landing pages and static websites.
Relume.io AI features efficiently generate a site skeleton, while the components allows fast assembling of pages. Once understood, the separate style guide made it easy to have a consistent page design.
Relume.io AI features efficiently generate a site skeleton, while the components allows fast assembling of pages. Once understood, the separate style guide made it easy to have a consistent page design.
In the last step, I manually built the Webflow page by using the Relume components via copy&paste from relume.io/free-compone....
That was pretty easy after designing everything in Figma using the same components.
Unfortunately, the free version only supports a small subset of components.
That was pretty easy after designing everything in Figma using the same components.
Unfortunately, the free version only supports a small subset of components.
Free Components | Webflow Library
Sign up to our Free plan to access these free Webflow components.
relume.io
December 28, 2024 at 11:55 PM
In the last step, I manually built the Webflow page by using the Relume components via copy&paste from relume.io/free-compone....
That was pretty easy after designing everything in Figma using the same components.
Unfortunately, the free version only supports a small subset of components.
That was pretty easy after designing everything in Figma using the same components.
Unfortunately, the free version only supports a small subset of components.
Next step was tuning various components on the "Styleguide" page for a bit of custom branding:
December 28, 2024 at 11:55 PM
Next step was tuning various components on the "Styleguide" page for a bit of custom branding:
As the next step, I adapted the global color variables to match my custom color palette, defined using the excellent uicolors.app tool.
The Client-First style guide distinguishes between primary colors (the palette) and semantic colors (what they are used for):
The Client-First style guide distinguishes between primary colors (the palette) and semantic colors (what they are used for):
December 28, 2024 at 11:55 PM
As the next step, I adapted the global color variables to match my custom color palette, defined using the excellent uicolors.app tool.
The Client-First style guide distinguishes between primary colors (the palette) and semantic colors (what they are used for):
The Client-First style guide distinguishes between primary colors (the palette) and semantic colors (what they are used for):
The paid version allows you to automatically export everything into Webflow.
As this was not possible for me, I started by cloning the Relume Style Guide into a new Webflow site:
webflow.com/made-in-webf...
As this was not possible for me, I started by cloning the Relume Style Guide into a new Webflow site:
webflow.com/made-in-webf...
Relume Style Guide - Webflow
Client-First V2.1 • Last updated Sep 03, 2024
The Relume Style Guide is the official starter project for the Relume, the largest Webflow component library in the world.
This project contains a styl...
webflow.com
December 28, 2024 at 11:55 PM
The paid version allows you to automatically export everything into Webflow.
As this was not possible for me, I started by cloning the Relume Style Guide into a new Webflow site:
webflow.com/made-in-webf...
As this was not possible for me, I started by cloning the Relume Style Guide into a new Webflow site:
webflow.com/made-in-webf...
Next, you can export the wireframes to Figma.
The tool auto-generates a style guide, making it easy to define a custom color palette and fine-tune the component library.
It is based on the well-documented "Client-First" library: finsweet.com/client-first...
The tool auto-generates a style guide, making it easy to define a custom color palette and fine-tune the component library.
It is based on the well-documented "Client-First" library: finsweet.com/client-first...
December 28, 2024 at 11:55 PM
Next, you can export the wireframes to Figma.
The tool auto-generates a style guide, making it easy to define a custom color palette and fine-tune the component library.
It is based on the well-documented "Client-First" library: finsweet.com/client-first...
The tool auto-generates a style guide, making it easy to define a custom color palette and fine-tune the component library.
It is based on the well-documented "Client-First" library: finsweet.com/client-first...
That worked surprisingly well!
Once satisfied, you can let it auto-generate wireframes for the various pages. Using the free version, I could only generate the main page:
Once satisfied, you can let it auto-generate wireframes for the various pages. Using the free version, I could only generate the main page:
December 28, 2024 at 11:55 PM
That worked surprisingly well!
Once satisfied, you can let it auto-generate wireframes for the various pages. Using the free version, I could only generate the main page:
Once satisfied, you can let it auto-generate wireframes for the various pages. Using the free version, I could only generate the main page:
Since we used Figma and Webflow in my previous company, I checked those out first. While searching for a reusable component library, I came across relume.io, which amongst being a component library als lets you create a sitemap from a prompt:
December 28, 2024 at 11:55 PM
Since we used Figma and Webflow in my previous company, I checked those out first. While searching for a reusable component library, I came across relume.io, which amongst being a component library als lets you create a sitemap from a prompt: