Some experiences using ChatGPT to develop CSS

You won't be surprised that ChatGPT knows quite a lot about CSS, too. At least much more than I do. You also won't be surprised that that has its limits, and though in practice I have already discovered some bugs for edge cases. Here you'll find some of my experiences, both when developing a larger application (as the ChatGPT integration into Composum Pages, which I'm currently doing), as well as when developing something small like my fun ChatGPT chats with itself app, where ChatGPT (well, ChatGPT-4) practically wrote the whole CSS itself, with me guiding it.

With a large application you have the obvious problem that the amount of CSS is way too large to fit into the 4k token message limit it is running with. Sometimes you can just describe the problem verbally and get some hints what to look for, which is worth something. But what often helps me is another little bookmarklet Grab Styles you can get from my Bookmarklet page, which allows you to select an element (just start the bookmarklet and hover over the page, you can also press h for help) which makes a HTML snippet that consists of only the element and its descendant elements and its parent elements, and goes through all CSS rules of the webpage and collects the rules that apply to any of those, and copies that into the clipboard so that you can paste into a ChatGPT chat to ask your question. In my case that is usually little enough. Of course, that has its limits. For instance, it cannot recommend you adding classes for which the rules aren't in that excerpt (except if you are working with a CSS framework like bootstrap, which it knows much about), and ChatGPT named more possible problems, though not all of them actually apply. But often it could give me a crucial hint that helped me find the fix.

Now, if you're doing a very small application like that ChatGPT chats with itself or my ChatGPT Bookmarklet (there is a functionless preview of it on the bottom, if you want to see what I'm talking about), you can come pretty far with it. The rest of this blog post contains some details about me trying that - you can skip this if you aren't interested in that. I currently tend to overdo it and do everything with ChatGPT where I suspect it could work. That sometimes takes more time than if I did it myself as I have to fiddle with the prompts and steps to do it, but I can see what works and what not and develop methods to do what I want, so it's often much quicker next time than if I did it by hand. And you get a library of prompts to use, combine, modify, which makes it much easier. Again and again my impression is that the limit here is your imagination.

I first had GPT-4 create a first a very raw version of the HTML that just got the alignments of the basic elements right, and contained some sample outputs. (I removed all Javascript for the styling process to make it smaller). What was nice is that ChatGPT could rewrite the HTML for me into something that was much more "bootstrappy" with a prompt like this:

Make a nice colorful but professionally looking styling for the following HTML using bootstrap. You can change the HTML structure as needed - you can insert additional div wrappers or remove them, change element types, add or change CSS classes, but leave the IDs as they are and the CSS classes msg and chat1 and chat2 - they will be needed for the functionality. The buttons in the div.buttonrow should be normally on one line if space permits. That applies also to the inputs in the div.buttonrow - they should be small and in one line to save space.

As a first step, please output only the changed HTML body, not the head or the styling, since we will otherwise hit your space constraints. Please insert the appropriate bootstrap constructs and containers etc. - I'd like the headline optically better, some kind of frame around the whole application and around the sysmsg1 fields and around the sysmsg2 fields.

That improved the app already considerably. I did have some fight on the form inputs that it just couldn't get right despite various retries and complaints, which I had to resolve by hand, but it still that was really fast. As the next step I tried coloring:

The HTML is now as follows. Please output additional styling rules for a nice colorful friendly playful and colorful but professional look. Don't repeat the .buttonrow width settings. As there are two guys chatting displayed here, I want their messages displayed in different colors ( div.chat1 and div.chat2 ) and the .sysmsg1 and .sysmsg2 should also give an indication through their color that they belong to .chat1 and .chat2 respectively, though the .sysmsg1 and .sysmsg2 are less important and should use less saturated colors. I've removed all coloring - please set appropriate colors for everything including the borders. Do use CSS variables for all collors, but set them at .theme1 since I want to support several themes. When coloring, please consider everything - the head, the background , the cards , the card headers, the buttons, the input labels, the chat1 and chat2 cards, all borders. Do only output the style tag contents.

Set the colors of the system prompt cards to a pale version of the corresponding chat1 / chat2 color. Set a background for the header, too. Refactor the style element in this to use CSS variables set at the .theme1 element , since I want to use several themes. Only output the style element if there aren't HTML changes necessary.

Here it got a bit complicated. I tried that at lest five times, mostly it looked like it would give you eye cancer, because ChatGPT currently doesn't have visual input, but in one of the attempts it got the grouping of the elements who have the same color sensibly, and then I could just have it generate a couple of CSS variable settings with different color combinations. You can see some as themes of that application. Well - an actual designer would probably shake his head, but I think that's likely better than I would have created it without some research. If you're curious: this is a part of the conversation I had with ChatGPT about this. Well, the end result isn't amazing, but I still think it's nice for an a couple of hours sparetime app.

What was also pretty amazing for me: for the ChatGPT Bookmarklet I couldn't use bootstrap for technical reasons. So I asked ChatGPT to make it look like it was done with bootstrap - and it did a pretty decent job at that, on the first try.

All in all: even though it currently has no visual input, it can still be a marvelous help.