Scribd
Upload
26 views52 pages

The Guide Design and Build Your App With GPT-4

Uploaded by

hoangpl95
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views52 pages

The Guide Design and Build Your App With GPT-4

Uploaded by

hoangpl95
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 52

Design

+ Build

Your APP

with GPT-4
in 10 minutes

Swipe
I’m Going to Cover:

1 Why build an app with GTP-4?

2 How I got started...

3 How to start (Setup, Tools, etc.)

4 Embed your freshly created app

5 Make things look good with GPT-4

6
To infinity & beyond:

Useful Prompts

Let’s get started --->


1. Why is that relevant?

To experiment

Reduce dev costs and focus on

what matters: USERS!

Create richer experiences (vs.

current prototyping tools)

Validate ideas faster and better!

A new way to learn to code!


2. How I got started:
Two weeks ago, I started with

I want to build a multiple-choice UX quiz game

Which got me this --->


A simple interactive quiz game!

This is what I did next --->


I then spent the next days and my
free time to use GPT-4 to:
create new feature
understand how a react app is
structured and J
setup a database on Firebas
deal with authentication and
subscription, etc ...
All of that with no coding experience!

And this is where I’m now --->


A simple functioning product that
validated my assumption that GPT-4
is viable for coding: quizdom.app
Question
I’m curious, how much time would a
junior/senior dev need to build
something similar?
3. How you can do it too:
You don’t need to create a whole
product. You can start as I did with a
simple interactive experience.
Which can be anything...
For the sake of this guide, we’re
going to create another educational
game --->
Setup and Tools

In ChatGPT, make sure you start a


new chat and select GPT-4
At the moment, there is an hourly

cap, so plan things in advance not to

waste these 25 messages:


The 2nd tool we need is JSfiddle.net

It’s a free web-based app where you


can paste and preview different
generated codes:

HTML CSS

JavaScript Preview

Repost
Let’s start simple:

I want to build an interactive Hangman game in Javascript.

We get 3 snippets of code:

1. HTML:

Repost
CSS (styling):
Javascript (all the programming

and logic):
Copy the exact HTML, CSS and JS
file to jsfiddle.net to the respective
tab and click Run!
Tip
If you struggle with the setup or
making it work, and GPT-4 couldn’t
help - just let me know in the
comments!
And here’s your game:
You can change the words, by

changing this line in your JS code:


Embed the app where

you want:

As things are dynamic, you can add

as many words as you want!

You can then create 3 separate files

(HTML, CSS, JS) and host them and

embed your script directly to your

website.

Or simply embed your JSFiddle code

(you need to sign up though) --->


Turn OFF JS, HTML and CSS tabs to
embed only the result
Try both embed methods (copy

paste the script or iframe) to find the

one that works with your website:


Beautify with GPT-4
I find the current design nostalgic,
but let’s explore other options with
GPT-4:
Styling of HTML files is usually done

through the CSS (Cascading Style

Sheets) file.

But to avoid dealing with 2 codes,

let’s simplify the process and use an

external styling library.

Tailwind

Tailwind provides a set of predefined

but customizable classes you can

simply apply to your HTML

components --->
Let’s see if we can style our HTML

file with simple instructions:


Style this page using Tailwind and give it a modern look:



<!DOCTYPE html>


<html lang="en">



<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width,

initial-scale=1.0">


<title>Hangman Game</title>


<link rel="stylesheet" href="styles.css">


</head>



<body>


<h1>Hangman Game</h1>


<p id="word"></p>


<p id="attempts">Attempts left: <span

id="attemptsCount">6</span></p>


<input type="text" id="letter" placeholder="Enter a

letter" maxlength="1">


<button id="submit">Submit</button>


<p id="message"></p>


<script src="hangman.js"></script>


</body>


Repost
Repost
Replace the HTML code with the

new one (as we’re using Tailwind,

you can even delete the CSS code)

And... Tada:
Let’s experiment a bit further:

Change it to dark mode


Result:
Question
Have you tried this approach with
more complex layouts?
Even further

I want you to take this and give me an edgy and unique UI


design, something out of this world! Very futuristic. Make it
2055! I believe in you!
It seems we made it go the extra

mile and it’s interesting to get its

“thought” process:
Result:
I want you to create it in the Neo-Brutalist style using flat
colors and thick dark borders. Import illustrations or
images using open-source libraries.
Nice! But the illustration link doesn’t

work... Though the domain (unDraw)

is correct:
Question
Have you ever received a working
asset URL from GPT-4?
Let’s add the Hangman illustration
instead with JS code:

Make sure you copy and paste the


JS code after your instruction and
before sending it.

Add a hangman figure that evolves based on the mistakes.


And the SVG Code.

Which is broken, mainly


because of its length
hitting GPT4 output
limits...

I had to type “continue


the SVG” multiple times,
but it forgot parts of
the code.
Result:
If you’re more specific with your

prompt you can more or less control

the style you get:

Style this using Tailwind classes and neo brutalist style,

using multiple flat colors and thick borders. Use serif font

for the titles and sans serif for the body.



<!DOCTYPE html>


<html lang="en">



...
To the infinity &
beyond: useful prompts
You can of course add more
features, change the logic and create
a whole product around it.
Use GPT-4 to plan things
accordingly:
What are some modern web app development
frameworks?

How can I load questions from an external source?


How should I structure my database to track words and
their corresponding top scores?

How can I make sure that each word is shown before any
word is repeated, to reduce redundancy?

What are some ways to make debugging code easier?

Where is the best place to add console logs in my code?

What is the best way to structure my code for easy


maintenance?

Convert my HTML code to React:



<!DOCTYPE html>...
Final thoughts

The whole copy / pasting of code is

kind of a broken experience.

But in a very near future we should

be able to create apps (if not highly

accurate prototypes) easily.

This will help us (UXers) create much

better and richer experience and

nearly finalized products. (vs. just

developers handoffs).
With development cost (of MVPs)

going down the focus will be on the

relevancy of the product and its

experience:

Insightful research

Faster validation process

Greater focus on users

Finally we should see the rise of

Million-dollar-one-man startups!
That’s a wrap!
All rights reserved.

The material may not be distributed,


in whole or in part, without our prior
written permission.

You might also like