Home

  • Just let them cook

    I recently talked about Neptune, an AI driven app I built that takes a design in Figma and outputs a standards based WordPress block theme.

    Still testing viable alternatives, I gave an AI the HTML output from claude.ai/design along with this prompt:

    You’re in a folder for a WordPress website, the site URL is {URL}, you have full access to the theme I’m building in /{dir}. That theme should become a duplicate of the HTML design output in /design. in /design/index.html and /design/single.html you can load these into a browser and view them directly for the desired output. In the design folder you’ll also find example WordPress Blog theme files like theme.json and others for how the designer envisioned this translation to a WordPress theme might take place. Also see HANDOFF in the same folder. You have full access to the site itself through the studio mcp and you’re allowed to edit any content on the site you wish to acheive this goal. Work methodically. Section by section building, and stop to verify a section and refine it by checking browser screenshots before moving onto the next section. Work in modern block theme standards.

    That’s it, not even a good prompt, and the humbling part is, the output is better than Neptune. It doesn’t follow standards as well, uses to many custom classNames and style.css directly rather than theme.json, but the output is much better.

    I think the failings can be improved with a better prompt.

    I should have just let them cook.

  • The “eyebrow” text style is the em dash of AI led design

    AI writing uses Em dashes too much.

    AI design uses an eyebrow heading far too often.

    I wonder what other AI tells we’ll pick up?

  • Neptune, or; how I learned to stop worrying and trust the agents

    As part of Automattic’s Radical Speed Month I’ve been working on a system to automatically (heavy asterisk here) convert a Figma design into a usable WordPress Block theme. What came of that was Neptune, a terminal app which provides a series of functions to poll through a Figma design, gather context and artefacts, and then page-by-page pass all that information to agents to build and refine content, templates, and theme.json

    The Neptune terminal app surface.

    Neptune, in its current form, is pretty capable. It works around a lot of quirks of the Figma MCP and produces reasonably clean artefacts to pass over to agents. Agents then work over theme.json generation, header and footer builds, and any theme files you’ve assigned to Figma designs (e.g Blog Design -> index.html), and then runs a refine pass over all of that.

    Typical output artefacts of Neptune working on a design, including page diffs, reasoning, and misc metadata.

    The output is reasonable, and represents, in my opinion, between 40% – 80% of a developers work hours on a project, depending on the design complexity and overall Figma structure.

    Figma
    Neptune output, single.html template + post_content

    The state of Neptune is currently somewhere around a closed alpha. Whilst I’ve opened up the Git repository for anyone in the public to inspect and contribute to (if you wished), you’re going to have a bad time with it as of this post. There’s around another week of tweaks needed before I can move this to a true open alpha that’s useable outside of my teams very specific use cases and scaffolding.

    Where I’m at now is basically a “watch this space”, there’s more to come here and I’m excited to see what we can do in terms of giving engineers yet another option to convert designs into usable themes.

  • KNPPLZ

    A game lost to time. A few of my friends used to play this in high school, another friend would never believe it exists. We told him it was like Space Invaders, but again, he would never believe us. Well I found it! KNPPLZ (ka-ni-pulls) is real and it was all along.

    Play on GitHub pages

  • Read: Three Body Problem

    I just wrote up three decent paragraphs about this, published, and then realised I have WordPress.com sandboxed and my DB write didn’t go through.

    TL:DR Book is good but a different pace to the show, I like that. I’m most of the way through the second book, but still excited for the second season of the show. The comparison between the show and the book reminds me of Silo (show) and Wool (book), both of which I enjoyed as interpretations of the same story.

  • Played: Cat Quest

    I’m going to play the second one as well, the puns are growing on me. No point writing a review about this and CQ2 also, I think I’ll do a review of the trilogy once I’ve finished.

  • Watched: Three Body Problem

    Enjoyed it so much I immediately ordered the trilogy of books.

  • Played: Cat Quest 3

    I’m going to try logging the games I play, books I read, shows I watch etc. This is mainly for my own personal memory of being able to look back through the year and capture my thoughts. Feel free to come along for the ride if you want.

    These logs will be tiny reviews, nothing substantial or probably even particularly cogent; but a review nonetheless.

    I’ve had all three Cat Quest games in my ever-growing Steam backlog. I don’t remember picking them up but I guess it has happened through various sales, giveaways etc. I’m currently in the middle of a sleep regression with our 3 month old and was looking for something simple to scratch a gaming itch, and Cat Quest finally caught my eye.

    I started with CQ3 (spoiler, I’m now playing the preceding two games) and immediately fell in love with the art style, simple Zelda-esque gameplay, and the overall charm of the game. Honestly, the puns might be a bit much, there’s definitely an upper limit I can tolerate.

    My overall takeaway was that the game was a touch short, lacked some challenge (sparing one boss, the Dragon Boar), but was full of charm. For a solid 8 hour gameplay experience that’s cute, simple, and addictive, I think you could do much worse.

    I would definitely recommend CQ3 to anyone who is in a similar boat to me currently: sleep deprived, lacking ability to focus on anything to deep, and looking for a game that makes you feel like you’re constantly doing the correct thing. It was a refreshing pat on the back that didn’t feel condescendingly easy, even if I was hoping for a little bit more difficulty later on.

    ,

  • We need a unified Agents document for codebases

    • Cursor uses .cursor/rules
    • OpenAI uses AGENTS.md
    • Claude uses CLAUDE.md
    • The list goes on…

    Whilst these text based instructions are fantastic for hosting in a repo, how can we account for multiple developers working in the same repo but using different AI tools?

    If I had to vote for an existing route, I think AGENTS.md is the most elegant.

    If I could offer my own implementation, I think .agents/rules.md would be better. That way we could establish a canonical folder that holds the likely-to-grow list of reference files and docs we’ll be providing to AI agents in the future.

    ,

  • Using a Gutenberg Block to run Snake

    TL:DR I made Snake in React and it runs in a Gutenberg editor block. Try it out in one click on WordPress Playground.

    The code is of course open source and available over at my Github. The actual Snake game is adapted from MaelDrapier’s React Simple Snake, and whilst that is even available on NPM, I wanted to Fork the code and make some tweaks so that it would run better in Gutenberg.

    The original React Simple Snake uses a recursive function to handle the main game loop, a timer that re-calls itself each time it completes. For my implementation instead I use a frame counter that increases each time the timer completes, and then useEffect() to monitor changes in that frame counter and re-call the timer function. It’s a small tweak but it forces a re-render of the block at the expected timing.

    I also migrated the high score system away from JS LocalStorage and instead moved it directly onto a block attribute. That means whenever your score exceeds a high score, the post editor becomes dirty and is ready to save your changes. Using attributes like this on the block also means I have a simple way of offering game options, like colours, text styling etc. really simply.

    The game needs work, the code needs work and linting, but this MVP is pretty fun. Add the block to your post editor whenever you want to play Snake, and if you save the post, don’t worry, nothing renders to the front-end!

    I did this mainly to test a few things:

    • Could WordPress Playground reasonably be used as a game distribution service?
    • Could Gutenberg blocks be used for gaming, or fun things in general.

    The answer to both is yes! This is something I’d like to keep pushing at, keep making WordPress weird and just generally fun.

    ,
    , , , ,