This lesson is from my course Prototyping with Cursor. The course is on sale this week only! Make sure to sign up now if you want to learn to build with AI.

One of the most common questions I get is: How do I make AI-generated stuff look good? Learning the fundamentals of visual design and developing an eye for design is a journey. (I have a whole other course for that 😇.)

Let’s start with a crash course of concepts that might be useful for prompting:

Principles

Principles are high-level concepts you should keep in mind as you try to iterate on the visual design of any project.

1. Hierarchy

Creating hierarchy is when you make certain elements on the page appear more important than the others. Hierarchy is important when you’re trying to guide a user through an interface.

2. Contrast

Contrast is the difference between two elements on a page. The more contrasting two elements are, the more visual hierarchy there is.

3. Balance

Balance is the distribution of visual weight within a design. The goal is to create a sense of stability in your design. Most commonly, balance presents itself in layout.

4. Consistency

Consistency is about maintaining patterns across a design system or interface. Using a consistent visual language both helps users navigate interfaces easier and creates a more cohesive design. Using a design system is the most common way to enforce consistency.

Elements

The elements are the different axes of visual design that you can iterate on in order to accomplish the visual design principles above.

1. Shape refers to the silhouette or outline that provides structure and balance to any visual piece. For example, do you want your product’s buttons to have 0px border radius or be completely rounded with 1000px border radius?

   

2. Color goes beyond simply choosing the right hue; it's a design element that can evoke strong emotions and set the overall mood.

   

3. Typography involves manipulating text to ensure legibility and readability for viewers.

   

4. Image encompasses various visual elements, such as photos, illustrations, iconography, and graphics.

   

5. Layout & composition is how you put all the elements together.

When working with Cursor, it can be helpful to ask Agent to iterate on specific visual elements one at a time.

Taste

Finally, we have taste. Yes, good taste is subjective, but the design industry tends to have a shared understanding of what taste is. If you’re newer to developing your eye for design, I recommend a couple of tactics:

1. Analyze products of designer leaders in the industry. What do you notice about their design? Ask Agent to learn from their design decisions. You can even call out specific companies you like as inspiration.
2. Learn to edit. It’s easier to build with a smaller set of visual axes. Start by editing and removing elements from your designs. Do you need this drop shadow? How many colors do you really need in your product? Ask Agent to remove design elements and add them back in as you see fit.

---

Ok, now that you’ve gone through the visual design crash course, you can put your skills to the test. I designed a series of exercises to help you practice communicating visual design changes with Cursor. How do you tell Cursor to make something look better?

Set up

1. Get my repository

1. Visit my repository.

2. On the top right, click the green button that says “Use this template.” Choose Create a new repository.

   

3. Change your repository name to whatever you want it to be! I recommend something like prototyping-puzzles. Make your repository “Private.”

   

4. Click the button Create repository. You should see this:

   

5. Next, open Cursor.

   

6. Go back to your (not my!) GitHub repository page and click on <> Code. Copy the link you see under the HTTPS tab.

   

7. Open Cursor again and click Clone repo to make a copy of your repository on your computer. Paste the link into the search bar and press Return.

   

8. You will be prompted to select where you want your repository to go. I usually put my projects in a /projects folder for easy access. Do not put this in other prototyping repository.

   

9. Press Open to see your repository.

   

10. Yay! You’ve cloned the repository. You should see this now.

    

2. Run the project

There are two ways to run this project. You can either ask Agent (Cmd I) to do it for you by asking something like:

I need help running my project. Can you help me get it started step by step?

Or, you can do it manually with the Cursor Terminal (Cmd J).

• Run npm install to install dependencies.
• Run npm run dev to start the server.

Now, visit localhost in any browser (Chrome, Arc, Safari, etc.) and you should see this:

---

The puzzles

For each of these puzzles, your goal is to prompt your way into a design that would be considered good by industry standard. Think about companies that you consider as industry design leaders. You want to create something that:

1. Follows visual design principles.
2. Guides a user experience.
3. Uses a modern style.

Puzzle #1: Finance dashboard

I used a very simple prompt to create the original design:

Make a dashboard for personal finances. The dashboard should be powered by some sort of fake data. Show me how much I spend across different categories.

Show graphs too.

The visual design output is pretty typical of an AI. There are a couple of ways you can approach improving the visual design.

1. Ask Agent to update specific visual design elements to fulfill certain design principles.
2. Feed Agent sources of inspiration to improve upon the design.

For your first prompt, make sure to specify which prototype you want to edit:

I want to edit the design of the finance dashboard prototype. [Your prompt here]

Here are some of the prompts I used that were pretty effective. Let’s start with making the design feel more modern. I explicitly asked Agent to remove the drop shadows, but you can also ask it to simply “make it more modern.”

Remove all drop shadows and make the components look more modern. The style should look like Robinhood, Cash App, and Stripe.

Next, I’m trying to teach Agent “good taste” by providing a reference point. My goal is to improve the quality of the visual design.

Can you improve the layout to make it look like something a top designer at Apple would approve of?

Going off of the visual design principle of “consistency,” I asked Agent to simplify the number of colors on the page:

Simplify the colors on the page. Let's use fewer colors, consolidate them.

Agent works well with references! Edward Tufte is a pioneer in the field of data visualization.

For the visualizations be inspired by Edward Tufte's work.

And finally, if you have a specific visual design style in mind, you can ask it to explicitly mirror that design style.

Make it look more similar to an iOS native app.

Elizabeth’s version

Here’s my process! I recommend exploring prompts that are most interesting to you.

Puzzle #2: Hummingbird

Next, we’ll be iterating on this Twitter knock-off.

With this one, try to keep some of the old Mac OS sources of inspiration. Here are the prompts I used.

I want to iterate on the "Hummingbird" prototype. I want the design to feel more minimal and visually consistent.

Agent decided to restart all the CSS, so I had to prompt it to bring it back.

Can you add back some of the vintage OS style, but in a more subtle way? I want it to look like something the Apple design team would have shipped in early 90s.

If you get stuck, try asking Agent! I can’t guarantee that it will have good ideas, but it might spark something new for you to try.

What ideas do you have for making this design better from a visual design standpoint?

Agent is pretty good at referencing popular design systems. For example, shadcn is probably the most popular component library framework right now. Consider asking Agent to pull inspiration from that library:

Use shadcn spacing for the entire page.

If things are getting out of hand (or maybe a little ugly 🤡), ask Agent to make something “10x more subtle.”

Make everything 10x more subtle, but keep the vintage OS inspiration.

Elizabeth’s version

Here is my full process.

Puzzle #3: Todo list app

Finally, we’ll be playing with a simple todo list app. This one really looks like it’s using default components from a dated design library.

Try to use the fewest number of prompts to make it visually better. Instead of feeding my prompt to Cursor first, I asked Claude to make it better:

Improve this prompt I'm giving Cursor. I am trying to make my prototype visually better. Let's work on the tasks prototype. I want to update the visual design to be:

Modern and minimal: I like Apple's design ethos.
Trendy: It should feel like an app that young people want to use.
Consider using a typeface like Instrument Serif in combination with a monospace like IBM Plex Mono. I also want some subtle gradients inspired by design leaders in the industry.

Make sure the final design from both a visual and interaction design standpoint is something all the design directors in Silicon Valley would approve of. 

We also want to make sure the design is pushing design boundaries forward. What are top graphic designers? How can we bring in what they do into interface design.

And, this is what Claude gave me in return:

Redesign the tasks prototype to balance minimalism with personality through:

1. **Primary Design Principles:**
    - **Refined Minimalism:** Follow Apple's principle of removing the unnecessary while preserving purposeful negative space
    - **Contemporary Appeal:** Incorporate subtle design trends that appeal to Gen Z and Millennial users without feeling trendy-ephemeral
2. **Typography System:** These are all Google fonts.
    - Primary: Instrument Serif for headings (consider variable weight options)
    - Secondary: IBM Plex Mono for task items and interactive elements
    - Tertiary: SF Pro or Inter for supporting text (optional)
3. **Color Direction:**
    - Base: Monochromatic neutral palette (soft whites, charcoals)
    - Accent: Subtle gradients inspired by:
        - Linear's muted purples and blues
        - Stripe's gentle pastels
        - Notion's subdued color system

**Visual Refinement**

- Use micro-interactions that feel tactile but unobtrusive
- Implement a card-based task design with slight drop shadows (2-4px, low opacity)
- Consider variable blur effects for depth while maintaining a clean aesthetic
- Explore Swiss/International style grid systems for layout structure

**Innovative Elements**

- Draw inspiration from contemporary graphic designers like:
    - Malika Favre's bold simplicity and negative space
    - Stefan Sagmeister's thoughtful typography treatments
    - Jessica Walsh's strategic use of color psychology
- Translate print design principles like:
    - Intentional typographic hierarchy
    - Considered compositional balance
    - Strategic use of white space as content

**Success Metrics**

The final design should:

- Feel timeless rather than trendy
- Maintain perfect visual hierarchy for quick task comprehension
- Balance aesthetic appeal with functional clarity
- Evoke the quality of a design system rather than a one-off interface

Provide both light and dark mode variations that maintain design integrity across contexts.

If you like the output, you can try:

Continue down this train of thought and help me improve the visual design of the app.

If the results are too strong, you can try:

Make the animations 10x more subtle.

Elizabeth’s version

Here’s the full version of me doing the exercise.

---

⭐ Sign up for Prototyping with Cursor

This lesson is from my course Prototyping with Cursor. The course is on sale this week only! Make sure to sign up now if you want to learn to build with AI.