Asking an LLM to build a simple web tool
The author used ChatGPT 4o to create a CSS box shadow tool, allowing users to adjust settings and copy CSS code. Despite minor issues, the tool's efficiency and accuracy show promise for quick prototyping.
Read original article
The article discusses the author's experiment of using a language model (LLM), specifically ChatGPT 4o, to build a web tool without any dependencies. Inspired by Simon Willison's blog post, the author aimed to create a tool for configuring box shadow settings in CSS. The resulting tool, deployed at https://eliben.org/box-shadow-tool/, allows users to adjust settings, preview the changes, and copy the CSS code. The author requested improvements to the tool's appearance, such as centering elements and adding a copy-paste button. Despite some initial issues with alignment and space, the author found the experience positive and efficient. The LLM's stability in output and ability to follow prompts accurately were highlighted, indicating potential for quick prototyping of simple tools. The author noted the need for manual tweaks for perfection but appreciated the LLM's performance in this coding task.
Related
LLMs on the Command Line
Simon Willison presented a Python command-line utility for accessing Large Language Models (LLMs) efficiently, supporting OpenAI models and plugins for various providers. The tool enables running prompts, managing conversations, accessing specific models like Claude 3, and logging interactions to a SQLite database. Willison highlighted using LLM for tasks like summarizing discussions and emphasized the importance of embeddings for semantic search, showcasing LLM's support for content similarity queries and extensibility through plugins and OpenAI API compatibility.
The Smart Principles: Designing Interfaces That LLMs Understand
Designing user interfaces for Large Language Models (LLMs) is crucial for application success. SMART principles like Simple Inputs, Meaningful Strings, and Transparent Descriptions enhance clarity and reliability. Implementing these principles improves user experience and functionality.
Markdown: An effective tool for LLM interaction
Introducing 'Mark', a Markdown CLI tool for seamless interaction with GPT-4o models. It enables in-document threaded conversations, image tags, link references, and extensibility through standard input. Mark enhances user experience by optimizing interactions with LLMs. Installation requires an OpenAI API key and Python 3.10+.
4 commentsCSS frameworks come in very useful for this, ask it to generate Bulma or Bootstrap valid markup.
Related
LLMs on the Command Line
Simon Willison presented a Python command-line utility for accessing Large Language Models (LLMs) efficiently, supporting OpenAI models and plugins for various providers. The tool enables running prompts, managing conversations, accessing specific models like Claude 3, and logging interactions to a SQLite database. Willison highlighted using LLM for tasks like summarizing discussions and emphasized the importance of embeddings for semantic search, showcasing LLM's support for content similarity queries and extensibility through plugins and OpenAI API compatibility.
The Smart Principles: Designing Interfaces That LLMs Understand
Designing user interfaces for Large Language Models (LLMs) is crucial for application success. SMART principles like Simple Inputs, Meaningful Strings, and Transparent Descriptions enhance clarity and reliability. Implementing these principles improves user experience and functionality.
Markdown: An effective tool for LLM interaction
Introducing 'Mark', a Markdown CLI tool for seamless interaction with GPT-4o models. It enables in-document threaded conversations, image tags, link references, and extensibility through standard input. Mark enhances user experience by optimizing interactions with LLMs. Installation requires an OpenAI API key and Python 3.10+.