AI Rapid Prototyping

Why Create a Rapid Prototype?#

Rapid prototyping is something I've done in the past for potential clients to put together an example of a software application that can be used as a visual tool. This is helpful in multiple ways. The first way is that it may help drive conversation of things the client likes and features the client indicates may be needed. The second way is that helps show off a possible user interface look and feel as well as the user experience for multiple personas. The third way is that it can be helpful to build confidence in the type of solutions that can be delivered for the client. This article focuses on explaining the pattern that I rely on to complete rapid prototypes using AI in the work I do today.

What do I mean by "Prototype"?#

The concept of a prototype means different things to different people. I have found throughout my career that software engineers mostly consider prototypes as throw-away code. Meaning the code that is written for a prototype should never be the code that ends up in production or the final solution. In the case of stakeholders that are not software engineers, they don't typically share this same view. A lot of stakeholders look at prototypes as a starting point that can "easily" be updated to be production-ready.

When were talking about software application prototypes, the following things are usually true. The prototype is not deployed to any type of infrastructure; it only runs locally on a development machine. The prototype has zero automated tests. Things like validation, logging, error handling, defensive programming, clean code, documentation, and security are never usually baked into prototypes.

Because of how prototypes are developed, the idea of using prototypes as a starting point is normally a fools' errand because the application essentially starts out with a ton of tech debt from the beginning. In order to resolve the tech debt, it would require a ton of time upfront on the project to implement production-level features. However, stakeholders and clients are not usually super interested in waiting several weeks or possible months to start adding new features.

What typically happens when a team starts with a prototype is that they end up identifying the tech debt and pushing it off till later and focus more on delivering new features. This ends up becoming a problem because later never comes and that tech debt is never prioritized. This means the application has a brittle foundation and the team and client will almost always run into problems later on. I've seen this happen many times in my career. While I see a lot of value in creating rapid prototypes, I strongly recommend that they never become a starting point for any application.

Tip: If you don't actually plan to use the prototype as a starting point (which you shouldn't), then the tech stack doesn't really matter. Use this as an opportunity to build the prototype in whatever tech stack you want or whatever is easiest. Maybe even use a new tech stack you've never tried before.

How rapid are we talking?#

Creating a rapid prototype without AI is something that can be done quickly. However, when I say quickly, were talking less a week. It likely won't look very good and will have very limited functionality. My experience lately with using AI to build rapid prototypes has allowed me to create great looking prototypes in less than 6 hours. The steps that I'm going to walk through in this article are how I've completed this.

Let's Get Into It#

Step 1: Create a project plan in Claude#

I start with Claude to build out a document that outlines my project plan based on the idea for the project. This allows me to focus on the application as a whole application outside of it just being a prototype. It helps me consider the features of the application, the tech stack, the infrastructure needed for the application, and the data modeling. I also prefer Test-Driven Development as a practice and I use the project plan to think through automated tests that I could write with focus on the features. What I end up with is a project plan that is a good starting plan for developing the real application.

For this article, we're going to focus on creating a rapid prototype for a PTO Tracking application. The following is the prompt I gave Claude to develop a project plan.

I want to develop a project plan for web application the focuses on projecting out PTO.

I want it to have the following features:
* Authentication
* Setup
 * Current balance
 * Amount of PTO accrued and how often
 * Existing time off scheduled
* The ability to about whether I'll have enough PTO for time off for specific days of the year
* Indications of when I have very little PTO or will go negative

I want this put in a document format.

Claude produced the following project plan for me: PTO Tracker Project Plan

Step 2: Create an empty GitHub Repository#

I always intend to commit and push my prototype to a source control versioning system. In order to prepare for that and make things easier for me down the road, I will create new repository in GitHub for the prototype. In this case, I created the following repository: prototype-pto-tracker

After creating the repository, I clone the empty repository locally and then open up the empty project folder with my IDE of choice. In this case, I'm using Jetbrains Webstorm for my IDE.

Step 3: Start Claude Code#

At this point, I use Claude Code to generate the code for the prototype. Installing and setting up Claude Code is outside the scope of this article, but you can learn more here.

From a terminal inside my IDE, I start Claude Code by running the following command:

claude --dangerously-skip-permissions

The --dangerously-skip-permissions part is not as bad as it sounds, and it saves me quite a bit more time when getting the prototype code built up. You CAN just run claude to start up Claude Code like normal, but you'll find that creating the prototype will require more hand-holding and likely slow you down.

Step 4: Prompt Claude Code with specific instructions and the Project Plan#

Now we're ready to actually build something with AI. The following is the prompt I provided Claude Code to get started.

I want to create a prototype using the project plan information listed below. I don't want any automated tests. I want
a README file. I don't want any infrastructure created or CI/CD pipelines created. I don't want you to commit or push
anything without explicitly direction from me. I want to use docker containers for the application. I want to use the
latest version of PostgreSQL for the database. I want to ensure that every time I start up the application that my
database is fresh and no data is persisted. I want to ensure my code is self-documenting and free of comments. I want
to ensure all warnings and errors when starting up the application are resolved. I want to ensure linting is all
fixed. I want to ensure the README has clear instructions on how to start up the application. I also want to ensure
the application is modern looking and is mobile-friendly.

I also copied all the contents of the PTO Tracker Project Plan and pasted that immediately after the initial prompt so that Claude Code has all the information.

The response that I typically get from Claude Code looks similar to this:

At this point, I let Claude Code do its thing. In my experience, this takes about 30 - 40 minutes before Claude Code is done. I've typically walked away and let it run and checked on it an hour later. Do whatever you're comfortable with.

Step 5: Start up the Application#

When Claude Code finishes with my initial prompt, the following is what I typically see:

I immediately follow the instructions and attempt to start up the application. In this case, I ran npm run dev in a separate terminal from the root of the project and go to http://localhost:3000 in a browser.

I almost always have issues starting up the application. It rarely works the first time. Building this PTO Tracker application was no different. The first time I attempted to start it up, I got the following error: target frontend: failed to solve: process "/bin/sh -c npm ci" did not complete successfully: exit code: 1

Now I could review the code and try to resolve this myself, but I typically just let Claude Code figure it out for me. I went back to Claude Code gave it the following prompt:

When I attempt to start up the application, I'm getting the following error:
target frontend: failed to solve: process "/bin/sh -c npm ci" did not complete successfully: exit code: 1

I then let it run and let it fix the issue. I repeat this process for any startup errors that I see.

In some cases, Claude Code is not able to resolve the issue. This usually comes in the form of Claude Code telling me its fixed, and then I go to try it, and it is not fixed. If this happens more than two times, I take a closer look at the code and work to fix the issue myself.

In extreme circumstances where I am having trouble fixing this issue, or I don't understand the code because its in an unfamiliar tech stack, I will utilize acceptance tests as a tool. The prompt I would tell Claude Code is the following:

Use Playwright to create acceptance tests to ensure that the application starts up and I load the home page without
any errors. Ensure that all tests pass with 100% success rate.

This prompt forces Claude Code to continue until the tests pass. Claude Code doesn't give up until this happens. I always have success with this pattern for getting the application started up or just fixing any issues in general.

Here is what the PTO Tracker application looks like when I got it started up:

Step 6: Fine-tune the Prototype#

Once you get to the point where the application starts up without any issues or errors, this is an opportunity to manually test all the functionality in the application and fine-tune the application to your liking.

For example, you might find that the look and feel of the application isn't what you imagined. In that case, I like to provide Claude Code with a prompt such as the following:

I'm not a fan of the look and feel of the application. Use this website as inspiration for the look and feel:
https://[Insert Example Website URL]

You might also find errors and issues with other pages, interactions, and flows throughout the application. Utilize Claude Code to resolve those issues.

Tweak the application to a point where it represents a great prototype, but keep in mind that it is still meant to just be a prototype. It can be difficult to get caught up trying to make things work that aren't really super important for a prototype like validation for forms or tooltips.

Step 7: Clean up the code#

At the point I'm happy with the prototype, I then complete the following tasks.

I start by prompting Claude Code with the following:

I want to remove all automated tests including libraries or frameworks related to testing. I want to remove all
debugging and tracing log entries in the code. I want to ensure that the code is self-documenting. Remove all comments
in the code and refactor the code to reflect self-documentation. Remove any unnecessary or unneeded code, functions, or
files. Update the readme to reflect the current state of the tech stack, features, personas, and steps for running
the application. Remove any extra Markdown files and documents with the exception of the Readme file. For any secrets,
use an environmnet file for local development that is ignored from being committed. Create a local memory file that
includes a definition of what this project is and everything that we did for historical purposes. Ensure the local
memory file is ignored from source control.

I let Claude Code complete everything related to this prompt. I then manually review every file and associated code to ensure I'm happy with what is there.

Finally, I run the application again and test all the functionality manually. This is usually not a big deal since it's a prototype and doesn't have a lot to manually run through.

If I'm happy with everything, I commit and push all the files.

Rapid Prototype Completed!#

After all those steps, my rapid prototype is done and I have a great prototype to use for showing others and spurring conversation. It's also clean, starts up without any problems, and is easy to change if necessary.

All the code that was created for this prototype is here: prototype-pto-tracker