Hey Warrior,

Imagine you can click one button and clone an entire software application…

Ok, we're not quite there yet, but we're close to this future.

Today, I'll show you my workflow for the currently fastest way to clone an application.

If you prefer watching over reading, check out this video here:

Here's what we’ll cover:

1. Screenshot an app or a design

2. Generate your prompt in CopyCoder

3. Build your app’s front page in Cursor

4. Generate your page structure

5. Build your full app

Read time: 6 minutes

💡 Screenshot an App or a Design

Let's start by getting a screenshot of the app you want to clone.

Maybe you want to clone an app and iterate from there, or you just like the design and layout of a specific app.

Don't have an app in mind? No problem.

You can also go to a site like Dribbble to find various app designs.

For example, on Dribbble, you can type in "dashboard" and see a bunch of different SaaS dashboard designs.

Simply choose one that you like and take a screenshot of it.

Let’s use the first one on this page for our example:

🔧 Generate Your Prompt in CopyCoder

Next, we'll head into this new tool called CopyCoder, which we just built and released.

It's a tool that analyzes screenshots and images very precisely and uses that to generate a prompt to recreate that design.

Let's paste in our screenshot.

Then, click "Generate."

CopyCoder will now generate an initial prompt for us.

This prompt was created based on your image and is optimized to be really good at recreating the app in your image.

(You'll also see that there's a step 2, but we'll get to that later.)

Now let's take that initially generated prompt and head into Cursor.

🗒️ Build Your App in Cursor

Open up an empty project in Cursor.

First, set up a Next.js + Shadcn skeleton using these commands in your Terminal.

This sets up a framework for our project, and allows us to use shadcn components, which are beautiful UI elements that this project can use.

Now, open up the Composer (CMD/CTRL + I) and paste in the huge prompt we got from CopyCoder.

Hit enter.

The composer will get to work and start building the initial page of your application by injecting that into your existing Next.js skeleton.

Depending on how complex the initial page is, it might do that over several prompts.

If it asks you if it should continue, just type "yes."

Once it completes the initial page, it will say something like: "This completes the interface."

Now, we can check it out.

Type npm run dev into your terminal, which runs a local server on your machine to view the app you just created.

And BOOM! Just like that you can see the app live in your browser. And it looks pretty similar to our initial design.

(Should you encounter any errors, just screenshot the error and paste it back into the composer. The prompt is optimized to reduce build errors, but there might still be one or two errors sometimes. However, this is already a huge improvement compared to if you didn't have the prompt.)

But as you can maybe tell, it’s not a full application yet. We only see the intial page and all the other pages in the app don’t work yet.

So let's fix that next.

🤖 Generate Your Page Structure

We're going to head back into CopyCoder and go to step 2.

In step 2, you can generate the entire page structure.

This means that it will analyze the image and generate a prompt to recreate all the other pages in this application.

In our screenshot, it would be a:

• Projects page

• Analytics page

• Reports page

• Extensions page

• Companies page

• People page

Copy that prompt and let's take it back into Cursor!

🎬 Build Your Full App

Back in Cursor, simply paste that prompt into the composer again.

Now, the composer will have a lot of work to do in creating all the pages. It will take several prompts.

Just keep saying "yes" if it asks if it should continue, and it will build the full application for you with all the pages.

Keep going until the end, when the composer says something like, "This completes the full build."

Now, go back to your browser; the application should still be running.

(Again, if you see any errors, just take a screenshot and paste it back into the composer. It shouldn't be more than 1 or 2.)

And now you can click through the entire application with a pretty much fully functional front-end.

Building a front-end like that used to take days of work for a front-end developer.

But we just did this in less than 10 minutes. Pretty crazy!

And that's not all. With CopyCoder, we're already working on the prompt that will generate your backend as well…

Stay tuned!

Thanks for reading!

If you enjoyed this, consider forwarding this newsletter to a friend or colleague.

What would you like me to write about in the next post? Reply to this email and let me know.

Moritz

P.S. We now also have a Prompt Warrior community, where we hang out and build software with AI together.

Every week we do live events where we build software with AI LIVE.

Come join 1000+ other AI builders: