Enhancing CSS Editing with LLMs: Using Puppeteer for Visual Context

In this presentation, Ryan explores a practical approach to editing CSS with Large Language Models (LLMs), focusing on creating a virtuous cycle of design improvements. He highlights the challenges of working with CSS, particularly for developers familiar with older versions who may struggle with modern CSS syntax and styles. Ryan points out that CSS can be complex, with styles defined in multiple locations, making it difficult to track changes and understand their impact across large codebases that may contain thousands of lines of code spread across numerous files.

Ryan demonstrates an innovative solution using Puppeteer through an MCP (Model Control Protocol) server to take screenshots of local websites. This approach allows the LLM to see the visual representation of the site, providing crucial context for making informed CSS recommendations. Throughout the demonstration, Ryan shows how to set up and configure the MCP server, start a local PHP server to host the test site, and use Gemini 2.5 Pro to suggest and implement CSS changes. Despite some workflow challenges such as needing to approve screenshot captures manually, Ryan emphasizes the speed advantages of this approach, noting that the quick feedback cycle creates an efficient workflow that almost mimics real-time browser editing but with AI assistance. The demonstration concludes with a successful modification to the header styling, illustrating the potential of this visual-context approach to AI-assisted CSS editing.