TRANSKRYPCJA VIDEO
AI LABS
3 Ways to Build Beautiful Websites Using Cursor AI
Opis wygenerowany przez Skrybot
The content discusses three proven methods to enhance website design using AI tools effectively. The first method involves cloning an existing design by extracting a design profile and replicating it using AI-generated JSON files. The second method focuses on creating original designs using a website like TweakCN to customize layouts, colors, and typography. The third method emphasizes using premium React components to elevate web apps, with a focus on animations and fonts to enhance the overall design. Additionally, the importance of being specific with AI instructions for layouts and design elements is highlighted to achieve professional results.
Transkrypcja wygenerowana przez Skrybot
Let's be honest, your AI-generated websites look terrible, and I know exactly why. You're going into Cursor or Claude and just typing, make it beautiful or make it look professional, then wondering why you end up with the same boring generic designs that look like every other AI-built site out there. The problem isn't the AI, it's how you're using it. Today, I'm going to show you three proven methods and some game-changing tricks that will completely elevate your websites and make them look absolutely stunning. So jumping right into it. The first method is to take a design that's already been made and clone it perfectly. Here's how it works. You need to extract a proper design profile from whatever you want to replicate. For example, I grab this random design.
If I want to make a website, web app, or mobile app that looks exactly like this, I can ask any AI, cloud, chat GPT, whatever, to create a JSON design system that extracts all the visual data from what I've provided. Then I give this JSON output to cursor and boom. consistent styling. The output should include the style, structure, and I'll give the AI some autonomy to decide anything else that helps replicate this design perfectly, and here we have it. Our design system JSON file with all the data we need to replicate this design. Now, let's actually test it out and see if it works. So here's what we did. We gave it a prompt to build a comprehensive educational dashboard with all the features we needed.
Notice we we didn't mention anything about design in the prompt itself. We just told it we needed the app in HTML, CSS, and JavaScript, and to follow the design. json file. This is that file. I pasted the JSON that Claude generated and told Cursor to follow it. And look at what it created. This beautiful looking app that clearly matches our target design. We've got these clean notifications, an attractive layout that matches exactly what we were going for, and even this sleek navigation bar. The result? It cloned the design almost perfectly. This is the power of giving AI a proper design system instead of just saying make it pretty. So method one was perfect when you had a design to copy.
But what if you want to create something completely original? Well for that I have this amazing website called TweakCN. Basically it lets you create your own perfect shad cnui setup from scratch. If you don't know what shad cnui is or you're not familiar with components don't worry I'll show examples that'll make the concept clear. When you visit this website and start customizing you'll see this preview interface they've given us. On the left, you have options for customizing it however you want. For example, I'm in the colors tab right now, and we can change the color to anything we want. You can see the color changing as I drag the slider, and that's just the primary color.
We can also change the accent colors, base colors, and even the card colors, so everything is completely customizable. And not only colors, but typography as well. We can change the fonts too. If we go into others, there are more options. One of them is shadow. which adjusts the shadow of the components. It completely gives you the ability to customize however you want. Let me show you. If you just shuffle these, you'll see the different types of customizations and themes you can create. And if these are just the default options, imagine what you could design yourself. And this is just the cards tab. If we go to dashboard or mail tabs, there are more previews as well.
It gives you everything, including dark mode and light mode, so you know how your app looks in both themes. If you like what you've created, go to the code tab, copy the code, paste it into an index. css file in your directory, just like method 1. Then ask Cursor to build your project from this file. Now methods 1 and 2 were great for getting the overall design and styling right. But here's method 3. And this one's all about taking your apps to the next level with premium components. So another way to make your websites or apps look really really good, especially if you're making web apps with React, is by using React components, which honestly look amazing.
For example, we have this library right here called React Bits, which gives you animated React components. I'm going to show you these components in a bit, and they look pretty awesome. But this isn't the only library. There are actually a lot of other component libraries out there, and many people find Assetternity UI pretty good as well. Some of these libraries are paid, but even in those, you'll find free components that are really worth using, as opposed to just going ahead and telling AI to generate everything by itself. So let's go ahead and actually use some components. components from this react bits library in our app and let me show you how the process works as well Let's take this landing page as our example.
It's just a standard landing page. Nothing impressive about it I came into cursor told it to install a next. js app and create a landing page with six sections I could customize later cursor set everything up and created the whole thing now I want to upgrade this with custom components. You can see in our powerful features section. We have these basic cards What if I want to make these cards look absolutely amazing. Here in ReactBits there's this component called tinted card. Look at this effect. It makes the card 3D and as you move around it, it tilts. This is exactly what I want to add. Another amazing thing is you can customize the component before copying it into your app.
You can install it directly or just get the code which is what I'm going to do. First I'm copying the entire component code. Notice it has a prerequisite framer motion which needs to be installed for the component to work correctly. Now, Heading back into cursor, I'm going to tell it exactly what I want. Name the section where this should be implemented, tell it to use the component I'm providing as the card for that specific section, and make sure it installs the framer motion dependency. Here's the component code I copied, and I'm giving this whole thing as a prompt to cursor right now. Cursor is done generating the code. It took its time. But now let me show you how these component cards turned out.
This is the features section we had before. And now watch this. If I hover over the cards and move the cursor around, it has that exact same rotation effect we saw in the component library and it works perfectly on all the cards. Now, I'll be honest. I did run into some errors during integration. Sometimes when components are more complex, you might hit a few bumps. For example, The tinted card component I used had a background image in the original code. Cursor automatically added a stock placeholder image when it saw that. I had to ask it to remove the background image, which it did without any issues. And here's our final result. Smooth 3D tilting cards that look absolutely professional compared to the basic ones we started with.
Oh, and if you're enjoying the content we're making, I'd really appreciate it if you hit that subscribe button. We're also testing out channel memberships. Launched the first tier as a test and 50 people jumped in immediately. The support's been incredible so we're thinking about launching additional tiers. Right now members get priority replies to your comments. Perfect if you need feedback or have questions. Now those three methods will give you the foundation for amazing looking apps. But there are some essential techniques beyond that. Crucial details that separate amateur projects from professional ones. Let's talk about animation. If you want to add animations to your websites or apps, here's the golden rule. Don't overdo it. Ask it to animate everything and your site will look unprofessional and distracting.
So how do you do this right? For any 3D effect you want, just ask ChatGPT or Claude to tell you exactly how to prompt Cursor to add that specific effect to whatever section you want. But if you want smooth animations and micro interactions that actually elevate your website, focus on these types of effects. subtle movements that every professional site needs. Just mention the exact effect you want and AI will implement it perfectly. The key is being specific about the animation you want, not just saying make it animated. Another crucial element that instantly elevates your design is the fonts you choose. Using fonts that actually match your project's vibe can take it from amateur to professional in seconds. Take our landing page here.
If I want to change the main text in the hero section, where do I find the right fonts? How do I explore options that actually work? Google Fonts is your best resource. They have an extensive library with different artistic styles and amazing filters to help you find exactly what you're looking for. For example, I found this font that's perfect for my hero section. I'll open it up and hit the get font button. Here's the get embedded code option. This gives you the code to embed in your project, making the font instantly available. Now I'm heading back into cursor. I'll give it the embedded code so it can import the font. and tell it to apply this to the main heading in the hero section.
Back to the website and look at that. The font is applied and it honestly makes the website look dramatically better. It's amazing how much difference the right typography makes. Now I know you've heard that you need to be specific with AI, but many people miss this point every single day. A perfect example is designing layouts. You can't just say make an app or make a site responsive. It'll get the job done, but it won't be perfect and there will still be bugs. Instead, specify the exact layout you want. Like here, I told it to create a bento layout that becomes a single column on mobile.
I purposely specified how the layout should function and I put this into a file so I could show you the results. Look at this bento layout. We have these cards arranged perfectly. Now if I switch this to mobile view, you can see the cards seamlessly transition into a single column, creating a much better user experience. And here are some examples of other layouts you can specify. and implement in your own applications. I'll also leave some links to other resources you can use to make your websites and apps even more beautiful. Definitely go ahead and check them out. Most importantly, try at least one of these methods and implement it in your own app. You'll be amazed at the difference it makes.
That brings us to the end of this video. If you found these methods helpful and want to support the channel, you can use the super thanks button below. It really helps us keep making tutorials like this. Thanks for watching and I'll see you in the next one. .
S K R Y B O T
Skrybot. 2023, Transkrypcje video z YouTube
Informujemy, że odwiedzając lub korzystając z naszego serwisu, wyrażasz zgodę aby nasz serwis lub serwisy naszych partnerów używały plików cookies do przechowywania informacji w celu dostarczenie lepszych, szybszych i bezpieczniejszych usług oraz w celach marketingowych.