Member-only story
Designing, developing, and deploying a web app entirely using AI
Take an idea and get it to production in three simple steps.
This is to demonstrate how the design to development toolchain is evolving as you read this article. Some exciting technological breakthroughs are happening and as a design leader and someone who likes to build things, these are exciting times.
Today we will talk about building a simple Math Game in 3 simple steps.
Btw. if you want to skip reading the article and prefer a Video version instead, then jump to the very bottom of the article to watch the video.
Step-1
Defining product requirements
You have an idea but don’t have all the product requirements figured out. So we will user ChatGPT to generate detailed product definition.
For this game, I gave this prompt to chatGPT:
I want to build a simple math game with the following functionality.
- Asks users to do simple multiplication, addition, and subtraction
- Has 3 levels of difficulty
- For each question, there is a timer that runs for 60 seconds
- User scores are defined by how many correct answers in 60 seconds
- Do not allow to proceed if wrong answer.
- There would be a leaderboard with users' scores along with the
top 10 scores overall.
- The design should be beautiful and modern. Something that appeals to GenZ
- User enters answers by clicking the numbers 0 to 9 displayed on the screen
and then pressing the Submit button. Users entered answer is displayed above
the number keys. Also, provide a "-" key to enter negative numbers.
Can you generate a prompt that I can feed to Cursor and Polymet to generate
the code and designs? Be as detailed as possible in your prompt design.chatGPT came up with a beautifully written detailed product requirements. It’s a long document so here is the link where you can read the entire output it generated.
This output will become an input as a prompt for the next tool we will use to design the UX of this game.
