When using tools like ChatGPT or Claude in their typical web interface, we can ask help with code by:
It’s advisable to be very specific, and this helps focusing our attention to the plan rather than the implementation. As we will discuss in class, there are different scenarios based on the language and application, but a general and easy to deploy example is producing a web page (HTML), as this can be done by non coders that can then open the output in their browser.
We can start trying:
Generate HTML code for a CV for "Rosalind Franklin", based on her biography available on
wikipedia: https://en.wikipedia.org/wiki/Rosalind_Franklin
Use sans-serif fonts, with a responsive layout.
As colour palette use tamarillo red (#971313), silver (#c7c7c7) and black for the text.
The top of the page should contain a nicely laid out summary of Rosalind Franklin's life,
followed by sections with titles and subtitles.
See some outputs by
It’s interesting to note that when asked to “remake the page in the style of an Apple corp page”, ChatGPT retained the color scheme while other tools assumed that the style of Apple should apply to colors too. This is an example of the importance of specificity.
here we focus on the produced code under the assumption we will review the text. Not every agent can fetch data from the Internet and if not, hallucinations are more likely. Ollama runs locally and in my setup I don’t give access to webpages, and you will see the quality of the content is noticeably lower
An HTML page can contain JavaScript code and become somehow interactive.
Examples of Claude generated html applets:
try to write a specific prompt to generate similar applets and use a set of simple and verifiable input to check if the output is correct