3 Ways to Build ACTUALLY Beautiful Websites Using Cursor AI-优快云博客

This article is only the simple record of the youtube video.
Please follow this video to learn the detail of this course.

First way

If you have some styles to copy.

Tell AI create a JSON profile design system that extracts visual data from these screenshots so that i can use the JSON output in Cursor to give it context on how to replicate such design systems in a consistent style.Avoid including the contents of the specific images.The output should include the design style,the structure and anything that’ll help an AI replicate such designs.

Second way

You want to create something origin

Please use some website to help you customize the style.
21st
tweakcn.com
Reactbits
magicUI
alignui
bentogrids
Grainient
When you finish the design ,click the button on the right corner that you can copy the code to your project.
If you want to choose a font style, i think the Google fonts is a good way for you.

Third way

Using the browser MCP in cursor.
1.Install the extension in the chrome.
2.Set up the MCP in the cursor.
3.Start automating

How to prompt to use it in cursor:

Use the MCP browser to explore @http://:monkeytype.com/.Break down the site’s core architecture,focusing on navigation flow,component structure,routing strategy,state management,styling methodology,and interactive behaviors.Pay close attention to technicial patterns and hierarchy with the goal of enabling an accurate and scalable clone.And then build the clone in a next.js app.

Install the stagewise plugin in the cursor and you can select the element on the website precisely and tell the cursor how to change it.