My AI coding prompt templates

Are you ideating, prototyping, and developing products using AI coding tools like Lovable, Replit, v0, or Cursor? After multiple rounds of developing products this way, I have landed on a few prompt templates that give me reliable results, which I will share below.

There’s two different paths I use:

1. Starting from nothing: ideating possible solutions, doing design explorations, building a first prototype

2. Starting from an existing prototype or product: exploring design and layout alternatives, updating the current solution

My go-to tool for these explorations is Lovable, because it’s particularly good at creating multiple design alternatives side by side (as you will see below). For building or updating the actual product I then use Cursor as it provides more flexibility.

Path 1: Starting from nothing

Use this when: you don’t have an existing product yet, and want to explore different types of solutions, designs, and layouts quickly.

Step 1: ideating possible solutions

Prompt template:

I want to ideate possible solutions and user experiences for a product as described below. Give me a few options, starting with the simplest first. Don’t code. Think as long as you need and ask me questions if you need more info.

[write a short answer below the following questions:]

Description: What is it?

Problem: What problem is this solving?

Audience: Who are we building for?

Ideating possible solutions for my previous article. Here I used Claude instead of Lovable, which works equally well but can’t do Step 2 below.

Step 2: design explorations

From step 1 you will get multiple possible solutions, as well as “Questions for you” or “Clarifying questions”. We now pick our favourite option, answer the questions, and ask it to generate four prototypes.

Prompt template:

I want to explore option [N] further, and consider possible user flows and experiences. Can you please create 4 options for inspiration?

Make these options as separate pages on the same website, with four buttons at the top to navigate between them.

To answer your clarifying questions:

[answers to relevant questions]

If you want to explore more options, use the below prompt. You can also add screenshots of other existing products for inspiration.

I want to explore the designs in option [N] further. Please modify the following and provide another four options: [things to modify]

An example of Lovable creating four options that you can toggle between

Step 3: exporting and building a first prototype

Once you have a design you like, you can “export” a description of it, and rebuild it in another tool like Cursor from scratch.

Prompt template for exporting (still in Lovable):

Please describe the user experience, design, and layout in option [N], so that an AI model could create a fully working product out of it. Please be very detailed and verbose in the steps involved in the user experience, and the designs and layouts.

A snippet of what the exporting description looks like

Prompt template for building a first prototype (in Cursor):

I want to build a fully functioning first version of a product that is described below. My target platform is XYZ [e.g. iOS and Android, or web]. Please use best coding practices.

[write a short answer below the following questions, or reuse from earlier:]

Description: What is it?

Problem: What problem is this solving?

Audience: Who are we building for?

What: What does this look like in the product?

[this is where the output from the exporting prompt goes]

Path 2: Starting from an existing prototype or product

Use this when: you want to improve an existing design, prototype, or product.

To get started, take some screenshots of what it looks like right now.

Step 1: exploring design and layout alternatives

Prompt template:

I have an application right now that does [description of problem & solution].

I would like to explore alternative layouts and colour schemas to the current design I’ve uploaded. Can you please create 4 alternatives for inspiration?

Make these options as separate pages on the same website, with four buttons at the top to navigate between them.

[include images of current design or first version]

If you want to explore more options, use this prompt template:

I want to explore the designs in option [N] further. Please modify the following and provide another four options: [things to modify]

Another Lovable design exploration with four generated options

Step 2: exporting and updating the existing solution

We can now export the new design schema and layout, and rebuild our solution (e.g. in Cursor, if that’s what you’re using to develop your solution). I would also take a screenshot of your favourite design in the previous step, and provide that to your AI coding tool.

Prompt template for exporting (still in Lovable):

Would you be able to describe the layout and styling in this option, so that an AI model could replicate it?

Prompt template for updating the existing solution (now using Cursor):

I would like to significantly redesign the [page in screenshot] page. You can find a screenshot of the design attached. A description of the layout and styling is below.

Please also update the [other pages you want to update] pages.

[include image of design]

[styling description from exporting prompt]

In my experience Cursor will easily update the styling of all your pages in one go, but may break some functionality along the way, so make sure to test that everything still works - and fix it if not.

Coda

I hope these prompt templates will help you as much as they helped me! The ability to quickly generate multiple designs and layouts is a great way to get a feel for which solutions work - and which ones don’t.

For further reading, these two articles helped inspire some parts of my templates:

• Peter Yang's "12 Rules to Vibe Code Without Frustration"

• Lenny Rachitsky's "A Three-Step Framework For Solving Problems"

---