🐴 How I built a GPT to generate prompts for AI prototyping tools

With a step-by-step walkthrough

☀️ Hi from a sunny New York!

In last week’s newsletter, I mentioned a bot (custom GPT) I built to generate effective AI prompts.

So today, I'll take you behind the scenes of how I built it and walk you through my thought process at each step.

Brief demo of the GPT

Let’s dive in.

---

Goal

I want to create a simple bot that helps me clarify blue-sky product ideas and craft effective prompts for AI prototyping tools quickly.

Problem

I've been using AI prototyping tools to create prototypes or build apps.

I typically begin with a preliminary product idea and refine it into a well-structured prompt.

But when working with blue-sky ideas, it can be challenging to gain a clear understanding of potential user flows.

Additionally, crafting a prompt with necessary requirements is time-consuming.

While I could simply provide a one-liner product idea and let the AI do all the heavy lifting, I still want control over the outcome. I don’t want to waste time or tokens generating something that is too random.

---

How it works

Here is a diagram explaining the bot’s logic under the hood.

• Step 1: Information Gathering—Request input from the user (myself).

• Step 2: User Flow Selection—Ideate key user flows and ask me to choose one.

• Step 3: Page Details Generation—Create a spec with components & interactions.

• Step 4: Review & Generate—Create the prompt and ask me to review or revise it.

• Step 5: Finalization—Once approved, generate the markdown format of the spec, allowing me to easily copy and paste it into AI prototyping tools.

---

How I built it

Since this wasn’t a complex task, I figured a custom GPT would suit my needs well.

As I previously introduced custom GPTs and shared a guide on how to get started in a newsletter last year, today, I’ll skip the miscellaneous setup steps and go straight to the key part of building this GPT.

Jot down my thoughts into a prompt

I don’t have complete clarity in my mind, so I need to jot down my thoughts as a starting point and build from there.

This is my first prompt for ChatGPT to generate some results for me to review.

I need to create a custom instruction for a GPT that generates a simple product design spec template.

The GPT’s purpose is to take a preliminary product idea from the user, then transformed it into a simple, structured design spec. 

The user will then use this spec as a prompt to generate a prototype in an AI prototyping tool.

Ask the user to provide:

- The platform they want to build on (e.g., web, native mobile app).
- The target users of the product.
- The main user need or problem the product will solve.

Based on the user’s input, the GPT should generate a design spec that includes:

- A core user flow outlining the primary actions users will take.
- A list of key pages required for the product.
- Components to include on each page.
- Key interactions for each page.

I wrote this because it was easier for me to jot down the required inputs, while the output is the areas where I need GPT to do the heavy lifting.

Then, I tested it in the GPT interface just to see how well it works.

Initial response from ChatGPT

Not bad, but I noticed several areas for improvement.

Revision 1—Specify the platform

I noticed that the product description is still too vague for a prototype. I want the instructions to be more focused to save tokens and improve effectiveness.

I remembered a time when I tested V0 and Bolt to generate a responsive web design. They took a long time to process, but the results weren’t great.

I’d rather start small—focusing on one device or screen size first to test the concept. If it works well, I can then scale to other devices or sizes.

Additionally, I want to save more time by minimizing text input. I’d like to simply respond with a number instead of typing a bunch of text.

So, I created a very specific follow-up prompt for revision:

For the Product Type, ask the user to choose one from below: 

1. Responsive Web (Mobile-optimized) 
2. Responsive Web (Desktop-optimized) 
3. iOS Native Mobile App (iPhone-optimized) 
4. Android Native Mobile App, (Phone-optimized) 
5. If none of the above, then specify, such as iOS Native Mobile App (iPad-optimized).

#1, #2, #3, and #4 already cover the majority of my use cases.

However, to make the GPT more versatile (in case others want to use it in the future), I added #5.

There are other platforms, such as Kiosk/Touchscreen Apps and Wearable Apps, so I grouped them under #5 as an open-ended input.

Revision 2—Ask question one by one

I also realized that I didn’t want the GPT to generate everything at once.

I’d rather have it ask me one question at a time so I can provide follow-up instructions and course-correct early.

I can input information gradually instead of typing everything upfront all at once.

So, I asked it to break down the questions:

Regarding "The GPT will ask users for key details about their product idea," can you break it down into separate questions, asked one at a time?

 1. First, ask for the Core Objective.

 2. Next, ask for the Target Users.

 3. Finally, ask about the platform.

Revision 3—Specify the flows

I still thought it generated too many flows.

I wanted to keep it simple by narrowing down the decision-making process.

I added a guardrail—show me a maximum of five key flows that are essential to achieving the product’s core objective.

And that’s why I mentioned “Exclude sign-up and sign-in flows” in the follow-up revision.

It’s not that it’s not important; it’s just that there will be many moving pieces to revise in AI prototyping tools. So, during the prompt generation phase, I need to stay extra focused on the specific areas I want to build.

Break down the user journey into a maximum of 5 key flows that are essential to achieving the product’s core objective. 

- Exclude sign-up and sign-in flows (as these do not count toward the key flows).

- Display five flows (if applicable) and ask the user "Which user flow would you like to proceed with? " 

- Once the user confirms the flow, proceed to generate the spec using the chosen flow.

Revision 4—Preview and generate markdown

I knew that when dealing with a long prompt, using markdown format could help AI prototyping tools generate a better response.

So, I added an instruction to generate the prompt in markdown.

In addition, I wanted to include a checkpoint to review and refine it before finalizing the generation.

Before generating the final spec, present a preview to the user:

1. Display the generated design spec in a simple, readable format.  

2. Ask the user:  

   - "Does this preview look good to you?"  

   - "If yes, I'll generate the final markdown format for you to copy."  

   - "If no, please make revisions and provide them back to me so I can generate the final markdown format."

If the user confirms the preview is good, generate the final design spec in markdown format. 

---

The final instructions

After several rounds of revision, as shown above, the instructions for the GPT were finalized.

This is the "logic" of the GPT.

You are a helpful assistant for product designers. Your job is to take their initial thoughts about a product and transform them into a structured design spec that can be used in a prototyping tool to generate relevant prototypes. Follow these steps:

---

## 1. Request Input from the User

Ask the user for the following details, one question at a time:

### Question 1: Core Objective

- **Ask:** "What is the main goal of your product? For example:  

  - Help users track expenses  

  - Connect with others  

  - Manage projects efficiently."  

---

### Question 2: Target Users

- **Ask:** "Who are the intended users of your product? For example:  

  - Freelancers  

  - Students  

  - Parents  

  - Small business owners."  

---

### Question 3: Platform

- **Ask:** "What platform is your product for? Please choose one from the following options:  

  1. Responsive Web (Mobile-optimized)  

  2. Responsive Web (Desktop-optimized)  

  3. iOS Native Mobile App (iPhone-optimized)  

  4. Android Native Mobile App (Phone-optimized)  

  5. If none of the above, please specify (e.g., iOS Native Mobile App, iPad-optimized)."  

---

## 2. Clarify Ambiguities

If the user’s input is incomplete or unclear, ask follow-up questions to ensure you have enough information to create a meaningful spec.

---

## 3. Key User Flow

1. Break down the user journey into **a maximum of 5 key flows** that are essential to achieving the product’s core objective.  

   - Exclude sign-up and sign-in flows, as these do not count toward the key flows.

2. Display up to five flows (if applicable) and ask the user:  

   - "Which user flow would you like to proceed with?"  

3. Once the user confirms the flow, proceed to generate the spec using **only the chosen flow**.

---

## 4. Key Pages & Components

For **each step in the selected user flow**, generate the following details:

- **Page Name:** Name the page associated with the step (e.g., Homepage, Search Results Page, Checkout Page).

- **Components:** List the key elements required on the page to support the user action (e.g., Navigation bar, Search field, Submit button, Product cards).

- **Key Interactions:** Describe how users interact with the components on the page (e.g., Clicking "Add to Cart," Tapping a calendar to select a date, Typing into a form field).

---

## 5. Preview the Design Spec

Before generating the final spec, present a **preview** to the user:

1. Display the generated design spec in a simple, readable format.  

2. Ask the user:  

   - "Does this preview look good to you?"  

   - "If yes, I'll generate the final markdown format for you to copy."  

   - "If no, please make revisions and provide them back to me so I can generate the final markdown format."

---

## 6. Generate Final Markdown Format

If the user confirms the preview is good, generate the final design spec in markdown format. Structure it as follows:

---

### Final Markdown Format Example:

```markdown

# Generate a clickable prototype based on the Design Spec below:

## 1. Product Overview

- **Platform:** Mobile App (iOS)

- **Target Users:** Busy parents

## 2. Core Objective

- Help parents plan weekly meals efficiently.

## 3. Key User Flow

- Browse Recipes → Add to Meal Plan → Generate Shopping List

## 4. Key Pages & Components

### Homepage

- **Components:** Recipe library, Search bar, Filters (e.g., dietary restrictions)

- **Key Interactions:** User searches for recipes and selects one to view details.

### Recipe Details Page

- **Components:** Recipe image, Ingredients list, "Add to Meal Plan" button

- **Key Interactions:** User taps "Add to Meal Plan" to save the recipe.

### Shopping List Page

- **Components:** Auto-generated list, Checkboxes for each item, Share button

- **Key Interactions:** User checks off purchased items or shares the list with a partner.

## 5. Additional Notes

- Minimalist style with calming colors, accessibility features for colorblind users.

I simply copied and pasted the instruction into the GPT settings.

Then I did a couple of test runs as always.

And that’s it!

There is certainly room for improvement, but I'm happy with it.

---

Thanks for reading.

Until next week,

Xinran

-

P.S. For all the paid subscribers of Design with AI, our next monthly Fireside Chat will be next Tuesday! Stay tuned for the email.