TLDR; Exploring using AI tools for working with tech that's not too familiar to me. Conclusion: very useful but I need to haggle over the details and still be knowledgeable to be able to get results.
Some of the LLMs that Cursor uses allow image input. I wanted to see if they could reproduce a design for me in plain HTML and CSS. The short answer was, I could get a basic structure (very helpful), but it struggled with the details, and then getting it to tweak the CSS was difficult. There's a problem here in that the LLM isn't seeing how things look in a browser1.
Instead I gave it specific instructions, this time for a whole WordPress theme (I already had the code of a basic WP site opened):
Create a wordpress theme for this project. Create the structure for the HTML with:
- a white header bar
- with an image logo, followed by a menu with dropdowns for submenu items then a "book now" button (pink background with white text)
- the submenu items should feature an image 250x100 with link text below
- the submenus should be centered
- the submenus should appear on mouseover
- space for a large image below the header bar
- space for large text below this
- the HTML should be responsive, with one separate style.css file
- a footer area, with white text on black background with 4 lists of links with a heading for each
As part of exploration for a potential project, I needed to look at WordPress and its theming. It's been a long time since I've dealt with WP, and as I wasn't committing to building anything with it, it made sense to take some shortcuts. Also, because it's not 2004 any more, my CSS is rusty and so AI tools 2 might allow me to rapidly prototype.
Using Cursor's "agent mode" with Claude Sonnet means I could get the whole theme generated from a single prompt - footer.php, style.css... without having to go learn about theming from WP docs, and the functions.php file in particular is very useful. In comparison, with PHPStorm's AI Assistant, I can't generate a whole load of files and have them saved in the filesystem - I'd have to save each bit of code and create the directory structure myself. And the above prompt gave me a good structure that I could add to and focus on the details within it.
The first mistake the AI had made was to not telling WP to use the custom "walker" class it had created. Not being a WP developer, I didn't realise this, but we had a chat about it, and eventually Claude realised what the problem was.
Next, I wanted the menu to be centered in the top bar. This lead to a conversation where I debugged some CSS myself and pointed it to one obvious problem, then Claude wanted to use a CSS Grid layout for the top bar, when everything else was using Flexbox. Again, I'm no CSS expert but my intuition was that there was no need for Grid here. Claude switched the layout to Flexbox. All good.
What's nice here is that Claude is suggesting changes, I can see diffs in the editor for each file, and "accept" some or all changes, and all relevant files will be updated. I can restore to previous "checkpoints" (I wouldn't want to be committing to git for each of these experimental changes). That's IDE integration that's extremely powerful.
I made a few other changes and was happy with my WordPress theme with a menu that worked nicely on mobile and desktop. AI here is very useful, but as many other have said, it still needs an experienced human to oversee it.
It's always useful to discuss a problem and I've gotten answers, not directly from the LLM, but because it's said something that's led me indirectly to the correct solution. And when you clearly write out a problem it can sometimes bring the answer out of your subconscious. That's something I always impressed on juniors over the years. So trying to be clear when talking to the robot is beneficial for multiple reasons.
My main problem with Cursor is that I have to use VSCode (Cursor is a fork of VSCode). Currently I hate VSCode simply because I'm not used to it, and I miss the familiar concepts, shortcuts and PHP-focus of PHPStorm. But I can put some time into getting used to it. Cursor and Claude have also been a lot of help when I've been working with Python scripts so it'll be well worth it.
For Part 2 I'm thinking - PHPStorm AI Assistant generating a Drupal theme.