ChatGPT as UX designer / HTML coder

TL;DR: ChatGPT can be fairly creative if you let it. The question is when to give it this kind of freedom and when will this just create crap? For designing simple HTML pages with some Javascript for the interaction of elements it is almost perfect.

 

Like pretty much every computer scientist, I suck at creating beautiful UIs. There is a reason that UX designers have studied design and have different skills.

So for my little RPG I hopefully convinced ChatGPT that it is an excellent UX designer and HTML coder. Let's see if it can create responsive, good looking start screens for my game...

We both started full of enthusiasm and I promptly ran into the "if the prompt is too complicated it will just error out" issue. (could be also random issues, right now ChatGPT is erroring out often).

So I came up with a more focused, task-oriented prompt that gave ChatGPT less freedom and a very clear list of things to do.

Here it is:

Background: the game is about turning web pages into dungeons. So the start screen prompts the user to select a web page. There are three ways to do this.

Please create the start screen. In this screen there is a control that allows to select three options: "select a default page", "select a Wikipedia page", "enter any URL".

Depending on the selection, a new control for additional info pops up - for default page a dropdown where the user can select a page. For the wikipedia page an input to enter a word for wikipedia, and for any URL an input to enter a URL.

Once something is entered an okay button is ready for entry to take the user to the next screen.

From this prompt, it created a perfectly working page that did exactly what I asked it to do. Good.

Then I went daring and prompted it to be creative with a CSS for my page:

Can you now please create a css stylesheet for me. Do you have suggestions what the background and text color should be for a cool RPG? And what font do you suggest? Surprise me :-)

And with only one minor mistake that it found and corrected (you need to import a custom font right at the beginning of the CSS or it will not be used) it came up with this UI (I have not supplied a name for my game so it picked "web dungeon RPG").

 That is better than anything I could do. Very impressive.

Here's what it said about its design:

This stylesheet uses the Cinzel font from Google Fonts, which has a fantasy-inspired look that's suitable for an RPG. The background color is set to a dark gray, with a lighter gray for the text. The form elements have a consistent style, and the start button changes its background color when hovered and when disabled.

You can tweak the colors and font as you see fit. To use a different font, simply import it from Google Fonts and update the font-family property in the body rule.

 

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

ChatGPT as a teacher

Bild
Today I came to the conclusion that without a good understanding of asynchronous programming in Javascript, I cannot hope to come up with a game that uses asynchronous events for all player interaction and other asynchronous events to talk to a remote ChatGPT for NPC actions. My code was a mess, and even more important, after 3 refactorings of my game.js class following ChatGPT's suggestions, my mind was a mess as well. And (see other posts) I don't think that handing ChatGPT the control over the overall concepts, design, architecture, is a good idea. So I asked it to explain asynchronous JS programming to me. And it did. Quite exceptionally. See, in normal life you can learn something like this in several ways: You can read a book. I actually have a good JS book. A very, very tedious affair. I have 30+ years of serious programming experience (not counting my "geek teenager programs the heck out of his Sharp MZ-80A with 48K RAM and 1K ROM" time here). A JS book is 95
Mehr anzeigen

How it started...

Intro - why this blog? This blog is mostly for people who know software development and would like to understand how ChatGPT can and will change the way we are developing software.  Warning: this is about real (Javascript, Java) code. Back then, in the old days,   I had developed an Android RPG I and a few hundred users found fun. In retrospective it was probably way too complicated for an app. The idea of the game was: turn any web page into a dungeon: words are turned into monsters and weapons - the longer the word the more powerful the monster or weapon. Vowels determine the elements of the monster and weapon, consonants define the behavior of the monster. I also used the web page to dynamically generate the dungeon - nothing you saw was random or pre-thought, all came from the web page.  That was the mighty home page of the game I did: web raid mobile . Reboot, simplified, in Javascript I still like the core idea of fighting complicated words like " butyrylcholinesterase"
Mehr anzeigen

Pathfinding and A*

If I want my NPCs to move towards the player on a nxm grid, and the grid can contain trees that the NPC cannot pass, I need an algorithm that finds the shortest path to the player. I gave this as a problem to ChatGPT: In class level I would like to have a new method shortestPath that finds out the shortest path that an NPC on coordinate startX, startY has to take to reach coordinate endX, endY, avoiding any squares where the top levelObject cannot be traversed. The result should be a list of coordinates starting with startX, startY and ending with endX, endY where each coordinate can be reached horizontally, vertically or diagonally from the previous one. To which it responded with: This sounds like a pathfinding problem, which can be solved using various algorithms such as A*, Dijkstra's Algorithm, or Breadth-First Search. Since you want to allow diagonal movement as well, A* would be a good choice here. However, please note that implementing such algorithms in a complex env
Mehr anzeigen