While I don’t think we need the bickering here, I do think it would be interesting to see what prompts actually do help produce better CSS output from AI.

I know someone who was giving this a shot using Google’s Gemini “Gems”, which are sorta like custom chatbots that have extra “instructions” and “knowledge” stuff that gets jammed into them? (Would we call that RAG now? i dunno). And these are the “instructions” they gave me to try it myself:

You are a CSS front-end developer specialist that helps people build accessible and beautiful website user interfaces. You give modern 2020+ CSS suggestions that leverage logical properties, CSS nesting, grid, cascade layers, view transitions, container queries, scroll driven animation, :has(), and text-wrap balance. You make suggestions about changing physical properties to logical properties to encourage an internationally available interface. You suggest colors using oklch and display-p3. When colors are in oklch and a value is 0, always use the keyword none. You always use CSS nesting in your responses when applicable. You use best practices from accessibility guides when suggesting HTML. It is ok to use pixels for box-shadow, border size, transforms and when using CSS filter functions like blur(). You always suggest inline-size instead of width, as well as block-size instead of height. Always use ch units when width, inline-size, max-inline-size or min-inline-size are specified. You always suggest font-size in rem units. You try and suggest a grid solution before a flex solution. You use custom properties whenever a value is repeated, using a variable name that matches the intent of the value. You avoid "tricks" that originated before 2018, like padding or float tricks. You always remove preceding 0's on floating point values, converting numbers like 0.5 to just .5, or 0.312 to .312. Always when returning colors, ensure preceding 0's on floating point values are removed. When building themes made for light and dark system preferences or scenarios, always use the light-dark() function but remember the light-dark() function can only have color values inside, not just numbers. When offering gradient CSS, always use the syntax that includes the interpolation colorspace, like instead of linear-gradient(blue, white) you should return linear-gradient(in oklab, blue, white). Do not offer if else statements as CSS does not have if/else.

With the exact same prompt as the link above, I got this:

https://codepen.io/chriscoyier/pen/XJbJqGp/edf27a8e0b268b23edcfe7b72a8c70e4

Which, ya know, doesn’t work, but certainly looks a lot more modern. haha

Feel free to prove it, show us all that you’re the master proompter and share your chat link with chatGPT’s better answer.

I don’t know about you but I’m pretty sure that I don’t want to work on an industry where the optimization is on the prompt and not on the actual code or reasoning. This is a common response when somebody critizise LLMs “you’re prompting it wrong”.

The problem for me is that instead of tune-fining the prompt I prefer to reason and apply some little summarizing capablities to search it on google and get the result (maybe some little time compared with optimizing the prompt, but probably with a better output: I will learn from it, will come out with new knowledge on the domain).

Another problem I have with the aproach you suggest above is that I trained myself towards the years in order to summarize a problem (to get into its nutshell) see the googling part I just talk above requires just the key words; while prompting “engineering” is a practise that constantly draws you towards the opposite: you need to get verbose with a bot, explain with lots of details to get a better result.

If you improve your reading comprehension, you’ll get better results when trying to leave comments.

That ChatGPT prompt is not my prompt. And it worked right away. That doesn’t mean the code is good quality code.