Now for the second installment in our “AI First” Series!

You can now build an elegant, fun, clickable user experience in minutes for your product without any specialized knowledge of design, using AI. In this article, we’ll show you how. We’ll share step-by-step instructions that leverage v0.dev to transform ideas into a working frontend 100 times faster than traditional coding. We’ll also create a design system and critical product management assets that will aid in maintaining a cohesive experience beyond our initial prompts. 

Zero to UI in Five Minutes

Before diving into a full project, let’s get something working quickly to feel the rush of rapid development. Visit v0.dev and try this simple prompt:

“You are a principal UX designer. Make a music player that changes its interface and playlist based on the user’s mood selection. Use a neomorphic design motif. Give one interface element a vibrant color to provide a visual focus. Make sure the color changes based on the selected mood.”

Just like that, you’ll see a working React component appear in the preview window, complete with Tailwind CSS styling and responsive design. While it might need refinement, you’ve just created a functional UI, using a very trendy design motif called “neomorphic” with some simple controls for creating an emotional connection with your user. All of this in seconds rather than days. Export the code, integrate it into your project, and congratulations—you’re already a design creator!

Now that we’ve gone through a warm-up, let’s hop into our main topic of using AI-first design principles to not only create a functional UI but accelerate the product & design scaling process.

Subscribe now

The Product Development Flow

We can jump straight into asking for what we want, but we urge a little patience up front. Instead of presupposing that our implementation will be best, let’s first brainstorm with the AI. For this post, we’re going to build a productivity tool called a Pomodoro timer and we’ll also give it some task management features to spice things up a bit. Instead of trying to enumerate everything ourselves, we can hand off the challenge to AI by asking it to specify a PRD (product requirements document) for our challenge:

Prompt: “Help me write a PRD: Pomodoro Timer with Task Management.” (Try ChatGPT, or if you’re really ambitious, try ChatPRD.)

Below is an extract from the full response, and it reveals several key user needs we might not have thought of. 

This systematic prompting approach helped specify a full set of features that could work in the wild. Now let’s set up our initial design system so that v0’s outputs remain consistent from iteration to iteration.

Systematizing the Design

While v0 generally creates consistent design with minimal direction, as the UI grows more complex and spans multiple screens, inconsistencies begin to pop up. Just like with human teams, having a design system in place can protect consistency as we scale our UX. Luckily, v0 can generate design systems from either an image or prompts. For this example, we created an image in Midjourney (you could also use ChatGPT and ask for an image) that keeps with the theme of time efficiency to align with our Pomodoro timer app. 

Midjourney prompt: A vibrant abstract art piece about time and efficiency

Here’s a quick prompt that should yield a design system. Make sure to upload the reference image above (or the one you create!) first.

Prompt: “You are a principal UX designer with deep knowledge and experience, especially with design systems. Using the image as inspiration, create a design system. Make sure to include items such as colors, font hierarchy, button states, and a grid system.”

Response

Now that we have a design system, let’s get to creating the first version of the Pomodoro timer using v0.

Share

Time Management with a Twist

App stores have dozens of Pomodoro timer applications, so let’s see if AI can make ours stand out a bit by making something a little unexpected for our initial build. Also, let’s make sure we put our job story document and design system to good use with the following prompt.

Prompt: “You are still a principal UX designer. Using the job stories document as a reference for what to make, and the design system for how it should look, make a Pomodoro timer with a task manager. Also, add in one unexpected and fun feature. Make sure the feature is on theme with time management, but it’s your choice to make it about helping with time management or make it harder.” (Make sure you included the documents if they are not already a part of your chat with v0)

Response

In response to that prompt, we get an okay-looking Pomodoro timer and task manager, along with a surprise feature called a “time warp.” v0 describes the time warp feature as:

• “When enabled, the Time Warp Mode adds an element of unpredictability to time management.

• It randomly alters the perceived passage of time by applying a random factor (between 0.5 and 2.5) to each second.

• This can make time feel like it’s moving faster or slower, adding a playful challenge to the user’s time management skills.

• The feature is toggled using a switch component, accompanied by a lightning bolt icon to represent its dynamic nature.”

However, there are a couple issues with the design, which could probably exhibit more sophistication, and this app feels like it should be for mobile instead of desktop. Here are a couple of prompts to refine the design:

Prompt: “It looks like the design system might be missing colors for background fills for items such as the home container, header, etc. Add those items to the design system, then apply them to the Pomodoro timer.”

Response

Prompt: “Redo the proportions so that the application mimics an iOS app on an iPhone 15 display size.”

Response

However, it still looks rather drab; let’s kick up the colors.

Prompt: “The design has a lot of gray in it. What can I do to liven it up?”

Response

It’s worth noting that, without prompting, v0 made the design decision to add a dark mode to the interface when transitioned to a mobile form factor. There are some little issues—such as the “Reset” button having a white label, so it looks like it disappeared—however, it’s not bad considering we didn’t ask for it. This exposes the level of agency and pattern recognition that v0 engages with to make design decisions.

Before we move on, let’s troubleshoot the reset button label. 

Prompt: “Why can’t I see the icon and label of the ‘reset’ button when the app is in dark mode? Fix it.”

Response

Well, that didn’t fix it. Sometimes you have to ask v0 several times to fix an interface issue before it succeeds. We tried three more times, and failed. However, we have a prompt chain that has fixed previously sticky bugs before that we’re going to share with you now. It’s a chain that’s designed to slow v0 and take comprehensive actions.

Prompt: “I still can’t see the “reset” button label and icon in dark mode while the button is in default mode. Conduct a mutually exclusive, collectively exhaustive (MECE) list analysis of why I cannot see the button content. Do not attempt to fix it. Just provide me with the list.”

Response (only partial response shown due to length)

Prompt: “You are a front- end developer. Check the reset button issue against the MECE list to determine if each item in the list could be a cause of the issue. Provide an answer of true or false for each MECE item, with ‘true’ meaning the item could be the cause of the issue and ‘false’ meaning that it is not a cause of the issue.”

Response (only partial response shown due to length)

Prompt: “Based on your MECE analysis, fix the reset button label and icon to make it visible in default state while in dark mode.”

Response

There we go. One MECE analysis later, and the label is fixed. While we haven’t conducted a rigorous study on the effectiveness of the MECE approach, we have used it repeatedly to debug UX when the AI gets stuck, and it works more often than not.

With the bug fixed and the visual refinements in place, we need to make sure that our design system stays up to date, enabling consistency across the UX as we build out new features. Let’s update the design system (notice that the colors not only updated but that v0 added the elements for the dark mode and new core components, such as cards):

Prompt: “Based on all the changes you just made, update the design system to match.”

Share Emergent - Product Newsletter and Podcast

Expanding the Feature Set

So far, we have two features on a single page—the Pomodoro timer and the task manager. Let’s see how we can use v0 to expand the app. One challenge that occurs in human teams when adding new features is what’s often called “franken-tech.” Franken-tech refers to when product teams tack on features over time that feel like they don’t go together, creating a less cohesive experience. We’ll use v0 to avoid the franken-tech effect by doing a quick two-prompt exercise of:

• Asking v0 to brainstorm 20 feature ideas that could go into the app with the Pomodoro timer

• Organizing those features into four or five subsets based on themes

Prompt: “The bottom of the design looks empty. I want to add a tab bar. What are some additional features we could add to the app to fill the tab bar? Brainstorm 20 ideas.”

Response (partial response shown due to length)

Prompt: “Organize the 20 ideas you gave into four to five feature sets that make sense to bundle together. Provide a rationale for why you’ve bundled them the way you have.”

Response (partial response shown due to length)

v0 grouped the 20 ideas into five bundles, two of which we show above. We’re big fans of personal development, so let’s select Group 4, “Growth & Learning.” As with the Pomodoro timer and task manager feature, we use v0 to create job story documents to build the UI from. Fast-forward a few prompts, and we have our user stories in place for future development. However, to give this UI a sense of completion, we’ll add a tab bar with icon buttons to access these future pages.

Prompt: “Let’s use number 4, growth and learning. Create a tab bar that contains icons and labels for the four features plus the timer feature.”

Response

While we won’t go through the development of these new features here, we can see how v0 can assist with very quickly getting to a cohesive feature set that makes this project feel more like a full app. Now, there’s still work to do to refine our UX. However, let’s take a shortcut by learning to prompt batch changes. 

Final Revisions

Here’s a quick method for making batch refinements of the UX so that you can save time while producing a crisp interface. First, we ask v0 to examine the interface and provide a list of potential changes that could make it more sophisticated, but to not itself make any changes to the interface. We’ll go over why in a moment.

Prompt: “What’s missing for the design to make it more sophisticated? Do not make any changes, only provide a list of recommendations.”

Response (partial response shown due to length)

In total, v0 provided 20 recommendations. Some of them are listed above. However, notice that item 4 recommends “custom illustrations or icons.” v0 cannot generate custom illustrations or icons. While the recommendation is valid, the feasibility of the recommendation is not valid and could cause v0 to throw errors. When brainstorming, v0 will often produce multiple ideas that it cannot fully implement, and if you do not tell it in your prompt to only provide ideas and not generate code, it will start coding, which will break your UX. Since we asked it not to make code changes, we can review the list ahead of time and choose which recommendations we want to batch implement.

We’ll select the following recommendations:

• Item 1. Implement a subtle background pattern or texture to add depth.

• Item 5. Add a blurred glass effect to the header and tab bar for a modern look.

• Item 6. Introduce subtle shadows and layering to create a sense of hierarchy.

• Item 11. Add subtle particle effects in the background during active Pomodoro sessions.

• Item 18. Introduce a more visually appealing way to display Pomodoro counts for tasks.

Pro tip: v0 can incorporate external fonts from Google to further brand your interface. Go to https://fonts.google.com/ and find a font you like. Now we’ll batch all of these changes for the interface.

Prompt: “Implement recommendations 1, 5, 6, 11, and 18. Also implement item 7 by importing Funnel Display from Google Fonts.”

Response

Lastly, we’ll give the app a bit more cohesion with some ambient graphics that match the cadence of the timer countdown. While not necessary, it gives the design intentionality and makes the functionality of the “time warp” feature more prominent. It also demonstrates one of the v0’s more powerful capabilities regarding animation.

Prompt: “Create an ambient background animation that only activates when the Pomodoro timer is counting down. Also, make the animation sync to the countdown.”

Response

Now check it out. v0 also committed the same updates to dark mode.

After one last update to our job stories document and design system, we can move on to expanding our feature set.

Leave a comment

In Closing

While it’s been a blast sharing our take on the Pomodoro timer app, what’s really important to emphasize is the workflow. v0 can work either okay with minimal effort or, with a little planning up front to develop lightweight product reference documentation and a design system, you can build some rather refined designs. Additionally, iteratively refining your design system as you mature your designs will result in a scalable asset that you can apply across multiple projects to create reliable UX with minimal time and effort as you continue your journey to becoming an AI-first product developer.

Link to a clickable full final design.

Share

I’m excited to introduce Ian Roughley as the co-author of this article. Ian is the VP of Engineering at TrueNorth, where he is taking an AI approach to disrupting the freight logistics industry. Ian and I have been collaborating on building product teams that use generative AI to write the majority of the code. With over two decades of experience, Ian has led engineering teams at high-growth companies like Behavox and ClimaCell, launching AI/ML-driven products and expanding platforms. He also mentors startups through Techstars. Connect with Ian on LinkedIn to benefit from his extensive expertise in both startups and enterprise settings.

AI podcast summary

New Opportunities, New Challenges

Writing code with generative AI doesn’t just break our models of engineering; it demands a fresh perspective on management of engineers too. Here’s a philosophy for success based on our experiences standing up one of the first “AI-first” product teams. 

Surprisingly, the most effective way to get great AI-generated code outputs for improving existing code bases is the opposite of what works for smart humans. When we don’t provide sufficient guidance on the details, AI code-generation tools produce outputs that fail in the following ways:

1. They rewrite working code for no reason

2. They introduce bugs that break one part of the system while improving another

3. They use common practices but not necessarily the ones that conform to the standards we’ve selected in our code base

4. They generate spaghetti code that’s hard even for the AI to find, improve, and maintain, and many other problems 

The solution is to micromanage your robots. 

Micromanaging them won’t hurt their feelings, and it will help you surgically get what you want. We don’t mean breaking every request into micro-tasks but, rather, providing a high level of detail about how we want the work done. To be clear, for new projects it does make sense to make broad statements if you want to start quickly and approach the challenge as a non-engineer. If you’re specifically looking for the AI to express its creativity via the code, that’s also a different situation.

The best prompting for existing code bases, however, comes when the prompt treats the AI as a team of junior engineers who require high-specificity instructions.

Share

The engineer orchestrating the AI still needs to understand how pieces come together and the architecture, or the results quickly become a mess. In this manner, it actually requires stronger, more intelligent, more architecturally minded engineers to thrive in this new world order. Code review is now the dominant skill required for success.

Let’s break down a few examples.

In each scenario in the diagram, we contrast an "Incorrect Prompt" with an "Improved Prompt". The improved prompts demonstrate the level of specificity we advocate for when working with AI. For instance, instead of a vague request to "Update the chatbot to handle custom parameters," the improved prompt provides clear technical context that specifies the libraries to use, the frameworks, and it adds more detail about what can be customized. Similarly, for internationalization, rather than simply asking to "Support multiple languages," and touching every UI file in our entire project, the improved prompt outlines a detailed implementation strategy using specific libraries and file structures that starts with a single translation challenge and has identifiable results we can easily verify. We can expand from there if we get what we want. In the final example, we do not simply ask to connect to the X API, but we also specify the manner in which we want to connect. By providing this level of detail, we harness the AI's capabilities while ensuring the output integrates seamlessly with our existing systems.

Hopefully you’re noticing that we don’t sound like an influencer on X bragging about how they built a new game in five lines of prompting in one pass. You won’t see those individuals committing massive changes to multimillion-line production code bases with AI and no quality process. Instead, to make real progress, we want to sound like an experienced senior engineer giving guidance and coaching to a junior engineer, except that the junior engineer is an AI agent. 

Hi! If you enjoyed these insights, please subscribe, and if you are interested in product coaching, fractional product support, or an AI First Team for your venture, please visit our website at First Principles, where we help the most ambitious founders make a difference.

We’ll need a lot of glue because the technology is at an alpha maturity level, and many products we want to talk to each other don’t do that yet; nonetheless, we can create powerful experiences for customers if we take a careful, methodical approach. Perhaps by the time this series is complete, it won’t be needed anymore, as that is the pace of advancement in this field!

0-to-Production in 20 seconds

Before we get into the theory and instructions, let’s just build something with a single sentence to get a sense of the thrill.

Visit the Claude website, and type the following prompt:

Build me a clean app for dropping in text and seeing how many words and characters there are in that text. Make it dynamic so that updating and editing the text changes the counts.

You should receive a bunch of code and a result in the preview window that looks like this. Don’t be alarmed if it’s not exactly the same. Generative AI is built to sample possible solutions probabilistically, so outputs will rarely match—this is what gives the AI its “personality” and “creativity.”

If you love it, hit publish in the bottom right corner, share the link, and congratulations, you’ve built your first end-to-end capability with about 20 seconds of work.

You can try our first version yourself. This works and is functional, but let’s spend 10 more seconds giving it a little pizzazz. Go back into the prompt and add this additional instruction:

Make the text area twice as large and give the user controls to resize it dynamically. Also add some color and pizzazz to this so it's a bit more fun and has a nice image or something fancy.

This is far superior! We’ve published this improved version as well. Now we have a text analytics applet that doesn’t mine our data, require log-in, or invade our privacy. I hope you can see how quickly minimal applets will be 100% commoditized and rebuilt in seconds. I did this process twice and pasted the second option below too, so you can see how the AI interprets the same instructions in subtly different ways on each run.

Now that we’ve seen the power on a simple example, let’s up the octane a little with a slightly more complex concept.

The Arc of the Build

Before we ask the AI to write code, let’s stand back and consider which portions of the product development process we actually can hand off to the machines. At the simplest level, in order to build a product, we must at a minimum perform the following steps:

1. We start with an idea of what we want to achieve.

2. Then we refine that concept into a clear problem statement, solution, and clear set of needs we want to solve for.

3. Next, we design the experience users will encounter to move through that solution.

4. At this point, we can write the code to achieve that design and set of solutions.

5. Then we deploy that code so that others can access the solution.

6. Finally, once our product is in the wild, we need a way to continually improve and update it in response to feedback.

I’m presenting these steps in order, but the reality is that this is a messy process, many steps do and should overlap, and performing the six steps above won’t guarantee that people will adopt and pay for your product, so please do not mistake this for an end-to-end tutorial on what it means to be a great product person. This tutorial focuses on how to go from idea to working product in the market only. In our previous example, we handed off all of these steps except the idea to the AI, but in our next one we’ll be more actively involved—not because it’s strictly required but because we want to show you how to use AI to have even more control.

Start with Why

Let’s jump straight in. We need an idea. For this post we’ll use a concept that is simple to understand that I came up with in 2017 when I was trying to name my daughter. Once my wife and I had come up with some names we liked, we realized that we had a few problems:

1. It’s not obvious which of those names should be the first name vs. the middle name.

2. It’s not obvious how the first and middle names will sound together with the last name.

3. It’s not obvious which first and middle combinations work well with the last name, and whether we should use one last name or a hyphenated last name.

4. We did not want the baby’s initials to spell something awkward or inappropriate.

I spent a few hours that night building the following lightweight product using HTML and JavaScript:

You can see that it works, even if it’s clearly basic, doesn’t live up to modern design standards, and leaves a lot to be desired—but it does in fact solve all of the problems mentioned above. We’re going to re-create this using generative AI, but better!

First we need to set up an account on Claude.ai and “Start a new chat.” I recommend a Pro account so that you can take advantage of “Projects,” which makes it easy to reference lots of artifacts and files over time. It’s currently $20/month.

Clarify the Solution

Let’s start by asking Claude to clean up these needs statements so that we can get the best possible output when we start asking for code.

Here are the four clarified Jobs to be Done by our AI:

Further, we received a few extras that are interesting, specifically the idea of automatically understanding the names’ level of popularity and uniqueness.

In terms of solution suggestions, the AI gave us a lot of information. We received a purely backend algorithmic solution option for ranking and scoring names to something more like the user-friendly interface we built by hand previously, to a fascinating solution that suggests making the naming process social and collaborative. Here’s the relevant forward-leaning snippet on collaboration:

This is great. We won’t invite family members to vote in this post just so that we can keep things simple, but we’ll add complexity like that in future lessons.

Design the Interface

To keep the simplicity low for our first post, we will not generate the design files in a separate tool (this will come later!). Instead we’ll ask Claude to first describe possible user journeys and interfaces. The story references below are the four stories that emerged from our initial needs, plus one extra one for gauging the baby name popularity.

We receive some pretty wild results, from the more mundane to a creative idea where every name gets a musical tone associated with it and the whole UI has a music theme. Here’s the more straightforward response:

While we could critique this, it seems like it’s close enough to what we want, so let’s move into building something we can touch and see how it comes out.

Be Careful What You Ask For

I’m not going to stress over how intelligent the next prompt is—let’s just create something already!

Claude wrote us a whole bunch of code…

…but the Preview window says it contains unsupported libraries, and so we aren’t seeing our app. We need to re-prompt and get it to fix the issue. I like to just paste the error into a new prompt and ask Claude to deal with it.

Here is how I did that with a simple copy and paste, and also the response.

Great, now we have something we can test out! Note: You may not have anything that even resembles this at this point, so it’s up to you to ask Claude to adjust its output to your needs.

So let’s give it a shot, now entering some actual names.

The result is pretty intriguing. Let’s critique it:

• The design is modern, albeit bare-bones. It could use a bit more color and flow.

• It’s cool that we got a built-in popularity score, and that whichever option we select gives us a name analysis. However, we don’t know how these scores are derived, especially for multi-name combinations.

Refine and Understand

Let’s walk through a round of revisions to remediate some of these issues. We could easily tackle them all at once in a larger prompt, but let’s do it one at a time so the flow is clearer.

Can you please make my app more colorful and modern? Let’s also feature a relevant graphic. Also, change the title of the app from “Baby Name Combinator” to something more friendly and clear.

Here is our result, and it feels a lot better.

This is pretty strong, but it introduced some small issues:

1. There is no spacing between the blue “Magical Name Combinations” header and the list.

2. The last name for the name popularity gets cut off.

3. We can’t see which name is selected to show popularity on the initial run.

Subscribe now

Let’s ask for adjustments:

Great, now let’s add spacing between “Magical Name Combinations” in blue and the list itself. Right now the top name touches the header. Let’s also add some padding around the selected name in the “Name Popularity Magic” area so that the name is not touching the pink header. Further, the select name is not showing the whole name, and the last name is only showing the initial. It should show the full name selected. Finally, make sure that even on the initial run, the top name in the list should get selected and show the selected state so we know which one is selected.

Now this is looking much better!

Let’s try to understand what is going on with popularity scoring.

Please explain how you are calculating the popularity rank. Is it for just one name? The first, middle, and last? What source of information are these scores derived from?

Turns out the app doesn’t calculate popularity at all! It’s using a mock function, which is developer-speak for “It’s not calculating the real answer. It’s just putting in a random number.”

Let’s ask it to do better:

Are there any publicly available datasets you could use to create a proper popularity score?

The good news is that the Social Security Administration releases this information dating back to 1880. However, upon rebuilding the app, the AI made a mistake. It used more placeholders and it introduced an error. In a later lesson we’ll talk about how to connect to live external data sources, but for now, let’s simply add the Social Security Administration’s list as an artifact into our project.

Upon visiting the baby names site hosted by the Social Security Administration, there is a tool at the bottom for requesting the top 1,000 names. We’ve gone ahead and done this, and then we’ve made a PDF out of the list.

Let’s add the PDF into our Claude project as a source of rankings. We will also need to describe our intentions for the scoring when we attach the file.

Unfortunately, Claude made a mock scoring list again. We’ll correct that behind the scenes for the sake of the flow of Part 1. Below is the prompt we started with.

To summarize, Claude is not happy with the size of the list, a problem we will deal with in later posts, so for now we’ve asked Claude to capture only the top 100 boy names and girl names and everything below the top 100 gets the same score. Here’s how it looks. We can see that Liam Mateo gets a higher composite score because Liam is the #1 name and Mateo is the #6, as compared to Liam paired with Sven, which is not in the top 1,000. We even get trend lines for the name popularity.

Now that we have a solution that covers our needs well enough, we can publish the artifacts to the web using Claude’s built-in deployment function.

Here is the final link based on the work we have done in this post. Please note that we did not mobile-optimize this site, so it might look rough on a mobile device. Clearly we could make many more modifications to improve our initial product, but I hope what you’ve learned is that it is possible to get this far for a simple app without any coding experience at all, and quite quickly at that. Stay tuned for the next post in the series, where we design from a drawing and also tackle connectivity to third-party services!