ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2024
- This video is a recording from a livestream hosted by Nick St Pierre who teaches a course on how to control Midjourney and integrate AI into your creative workflow - from beginner to advanced prompting. In this video we collaborate to build a website on Webflow using the Relume AI Site Builder in 1 hr. All assets on the site were created using Mid Journey.
Try Relume for free:
relume.io/?via=yt
LINKS
---
Nick’s course: maven.com/nick...
Nick’s Twitter: / nickfloats
Website (built in 1 hr): rebike-website...
ABOUT RELUME LIBRARY
---
Access the world’s largest library of Figma & Webflow components and build better websites in hours, not days.
FOLLOW RELUME
---
Twitter:
TikTok: / relume.io
LinkedIn: / relume
Figma: www.figma.com/...
Webflow: webflow.com/re...
Timestamps:
0:00:00 - Review: Collaboration on AI site build using Mid Journey.
0:03:06 - AI workflow collaboration for site building with Relume.
0:06:07 - Creating a website sitemap using AI for project scope.
0:08:58 - AI generates website sections based on prompts.
0:11:54 - Creating a sitemap with AI-generated ideas.
0:15:01 - Figma plugin exports auto-layout designs, AI generates components.
0:17:52 - Editing AI-generated copy for website sections.
0:20:50 - UI saves time, AI generates components, add product section.
0:23:58 - Editing W-Frame before exporting to Figma.
0:27:07 - Figma and Webflow guide for file setup and productivity.
0:30:17 - Webflow style guide and asset integration process explained.
0:33:24 - Web flow site fully mobile responsive, asset organization.
0:36:50 - Organizing content in threads for easy access.
0:40:03 - Tutorial on color remixing and morph remixing in AI.
0:43:11 - Color variations using image reference and background replacement tool.
0:46:23 - Creating product mockups with AI prompts and images.
0:49:46 - Product mapping and image selection for website design.
0:53:16 - Product image variation and editing process explained.
0:57:11 - Color adjustments and image selection for mountain product.
1:01:18 - Design updates and additions to website layout.
1:04:49 - Creating a style guide and designing icons.
1:09:00 - Adding image and icons to design in progress.
1:13:53 - Tutorial on using permutation prompting for image curation.
1:17:07 - Tutorial on using Vectorizer for vector images.
1:21:01 - Web design tutorial: adding icons and fixing position.
1:24:21 - Design process and website creation in one hour.
1:27:52 - Review: Tools for creating mockup landing pages, saves time.
I was hoping for a full process. Very happy you did this. And I love Nick, huge fan of his channel.
Excellent walkthrough and teamwork
This whole build was fantastic to watch! You guys killed it and I learned so much. I have already been using Relume components and now I want to dive into the full website builds like you did here. Awesome!
relume is very great, iam mexican and spanish language spoken, when i put all my description in the prompt jut hay put ´traducir al español´ and all sitemap was in spanish, thank you very much for create relume, and thanks to Nick for this master class
So if this website went live and clients click the Order Now button, what platform will serve as the backend? Webflow Ecommerce or Shopify? What do you prefer as a Webflow designer?
So good! Also, edit text in the wireframe - super keen for that and sounds like it's coming out soon 🏆
Applauding your work, it’s incredible!
Relume = Amazing product
This is sick! Love this
super helpful, thank you!
incredible.
What browser is Nick using? This looks rad!
Rather than have to edit another style guide again in webflow to start the project., are you able to use the figma to webflow plugin to copy and paste it across so it includes all the editing styles off the bat?
Another way to get a specific color in the subtle generations within Midjourny is atter the color 'Orange" try to add a value like ::10 (you can go from 0-1000) with a orange::10
Really cool!
Amazing ❤🙌
Can I use this to build shopify stores? Bigcommerce? Etc.
This is fire, I was able to use it to suggest a content structure for a re-design job. But one thing that I think push the value a lot more is if you can generate a figma file out of the generated content so designers can continue working on it as a baseline to build a hi-res visual design. and if you can generate with components, I would kill to use it as a standard design process.
Hey @sleepsailr7059, that is completely possible with your Relume Library Figma Plugin. It exports your designs to Figma in a fully editable format.
Is there a way to adjust the content width in Relume to fit different Grid Systems? Or do you have to import into Figma and adjust widths there?
This is incredible. I'm a old dog still stuck in 2010s web design with Wordpress themes. Any advice on where I can learn this new workflow?
I signed up twice, the first time nothing generated and was prompted to upgrade, the second time I generated then switched to wire frame and it is locked SMH. Is Relume able to generate a sitemap based around content generation? Update: Being speaking to Relume about this issue, the customer service person does not listen, comprehend or answer simple questions.
This is insane! So cool. Do you have plans to generate Webflow logic with AI? Is this even doable? Would be nice
please add timestamps and chapters
this, it would be really helpful
This is really cool, no doubt about it. But you know, I've been thinking - all these fancy A.I. tools we're getting, they're making things super 'professional,' right? But here's the catch: I worry we might end up more like robots than humans. We're not meant to be perfect, right? There's something special about seeing someone's work, knowing the ups and downs, the messy parts, and how they stuck with it till they nailed it. If everything's super polished and perfect, where's the human touch? We're supposed to learn from our mess-ups, improve bit by bit. With all this A.I. stuff, it's like we're aiming for this perfect world that's not real. We might be heading into a time where everyone thinks they're all that and a bag of chips, you know?
Word.
The code will likely look crappy
great stuff! keep it going, i see it opening up many opportunities and being used widely.
is it usable for rtl out-of-the-box? is it relatively easy css/dev work?
The only thing I do not like is that once we export to Figma. We cannot export back to Relume or "fetch" updates we do inside Figma. That means, we have to do the whole thing again, inside of Webflow. Wish we could do all that within Relume itself. Other than that it is amazing tool.
Amazing tools. I'm planning to start selling webpages. How's the final process going to look like when the webpage is ready? Like how i send the finished page over to client?
In the future, will I be able to export to Framer?
Can you update the style guide after the fact and will it push over or no?
Is it familiar with the AIDA Copy writing formula, (attention, interest, desire, action) and if Yes will it write the copy or a sales page in the AIDA format.
Relume is made of magic. I don't know how else to put it.
Hey what software do you use to stream these live builds? looks awesome
Is there a chance that the AI builder will be available for wordpress?
I was looking forward to this until saw the demo link and there was no dynamic on scroll style like parallax and animations etc Just being honest as engaging on scroll style is first and foremost these days in my opinion.
I can not see style guide.... Have any idea? Thx.
wow this system...
Hi has anybody got this message everytime?I cant figure what I am doing wrong if anybody can help.
Something went wrong
Webflow’s run into a problem - but with your help, we can fix it.
We’ve added your session and error data to this form. Just press Send and we’ll address the issue as soon as possible.
Attach up to 5 files (max file size: 2MB each)
❤
is this only for front-end website or if not where to add backend?
You'd most likely have to export the front-end code and add the backend stuff within a text editor.
How can I join the cohort resources discord server
Man, there is not a better time than now to be in web design. People think this is going to take jobs, but in reality, it's going to make them.
ai is crazy
Is the tool also for German websites ?
Why is it so expensive? can you at least add the hosting to the package? basically it's not for hobby website designers and beginners.
Please pay us the commission
you do have to pay $40 a month to be able to do this
It has a big problem that there is no creative things in copy or wireframe. It looks like a template.in case you might forget to mention AI make everything look the same.
$700 to learn MidJourney? No thanks. He also increased the price by $200 because two weeks ago, his website said $500. There also isn't a payment plan.
How are you handling generic style guides that pop under relume. Or is this the humans job 😂
Lol
Relume company scammed my commission
@relume Where can I find the Shopify Background replacement app
Please pay us the commission
Relume company scammed my commission