UX Project: Fully Functional Demo Website Coded by ChatGPT

Demo website created with ChatGPT; click image to view working demo.

I have never written a line of computer code in my life. I don’t know the first thing about the differences between HTML and Java, or any other software languages. But harnessing the power of ChatGPT today, I created the website pictured above in less than an hour. Mind you, this was not some drag and drop, customizable website template process like many website builders offer (Wix and WordPress, for example). I have used those without breaking a sweat before (this WordPress site you are reading is an example), but those are not coding efforts. What the free version of ChatGPT was able to create for me was functional HTML code generated completely from scratch (or rather, translated and generated from my written English language prompts). I then pasted the code into the free web “space” offered by W3Schools and voila! Operational website.

The UX class assignment I was working on gave me the option to create a mockup of a to-do list application/website (think basic non-operational image) or go a step further and play around with GenAI to see if I could create a working model. Despite my fascination with ChatGPT, and my frequent use and exploration of it over the past year as an educational tool, I was hesitant to use it for coding purposes. I was intimidated. A quick demo at the end our online class meeting changed my posture though (thanks Franco and Dr. Pullman!). 

Here is a summary of how I created my online to-do list website.

  1. Set up account at W3Schools (<5 minutes).
  2. Went to ChatGPT and prompted it as follows: “Please create a web page in html that includes a to-do list feature that allows the user to add items to one of three catagories, each of which has a column on the page. Name the three categories home, teaching, and scholarship. Provide me the html code.” (<5 minutes)  *I still have no clue what HTML code is or how it works. I only asked it to use HTML because I thought I heard someone say it is the easiest or most basic code to work with.
  3. Copy the code generated by ChatGPT, and then go back to W3Schools, create “New Root File” and paste the code into the the text box. (2 minutes) *This was the only tricky step for me, and it was the step I was scared of before seeing my classmate do it. The user interface of W3Schools might make sense to people who know a little bit about coding and web design, but to me, a complete coding novice, it was not intuitive.
  4. Click “Run.”
  5. Preview the newly born website.
  6. Go back to ChatGPT, ask it to make specific changes and rewrite the entire code. Then go to W3Schools, delete the root file and replace with the new code. (40 minutes) *I did this probably six or seven times, requesting one or two changes each time, and then testing it out. 

          Here is a link to the entire conversation I had with ChatGPT if you want to see all of the prompts I              gave it. Note: I do communicate with the machine as if it is a human assistant/tutor/student, so I              typically use pleases, thank yous, etc. I do this mostly because I don’t want to develop less polite                  communication habits, not because I think of the machine as a person–but I don’t claim to be                    completely immune to the ELIZA effect either.

Key Takeaway

When I found out last year that ChatGPT could write functional code when prompted by English text, I had a hunch that English (or any common spoken/written human language) had just become the new computer language. But I then read somewhere (wish I could remember where I saw it) that English could never really replace the learned skill of computer coding because the English language is too ambiguous, vague, and complex to work on the logic level of a computer. That sounded plausible, so I shelfed my hypothesis hunch and left it for another day. Well, today is that day. I am now convinced that the “skill” of learning, understanding, and writing computer code can be almost completely replaced by the combination of GenAI and effective English prompt engineering. I do understand that there are still critical reasons why some people need to understand and practice coding, but the number of those people will drop precipitously now as non-techies like me partner up with GenAI to do what most of us never dreamed we could do in a digital space–at least not without hours upon hours of instruction in a host of computer languages. The new computer language is indeed English: specifically, concise English delivered repeatedly and patiently to a non-human audience with superhuman coding abilities. Whoever said English wouldn’t replace coding languages because it is too ambiguous, vague, etc. failed to realize that users of English can be insightful, creative, and persistent enough to overcome those inherent problems with the language. They also failed to realize that generative AI is (often, but not always) incredibly competent at making sense out of human language inputs. 

UX Takeaways

ChatGPT and other GenAI make the designer’s job way easier, but only if that designer can communicate properly with the machine and/or have some patience and recognize that designing with AI as co-pilot is an iterative process.

A designer still needs a solid plan and then decent feedback to make appropriate improvements. AI can provide both if prompted correctly, but human feedback should always be sought to help the designer catch their own blind spots.

Leave a Reply

Your email address will not be published. Required fields are marked *