Cracking code: How Claude is helping release my inner developer

One of the great tragedies of my life is that I'm not very clever. And that's got in the way of one of my longest held ambitions. Ever since my dad brought home a Dragon32 computer four decades ago, I've always wanted to code something myself. And every time I've tried it's been a disaster. Luckily over my time at the Guardian I've had the chance to work with brilliant, curious engineers who have put up with my 'creative urges', helped me improve ideas and turn them into working products and features. But ultimately I've concluded that my brain operates a bit like an LLM. It can work well but it's a bit imprecise for this particular task.

Recently, though, I've been more and more frustrated by my inability to communicate ideas to engineers and product teams. Paper and pens really don't help here. So the release of Artifacts in Claude in June set me on a little personal journey that's resulted in me taking a bigger step into creating code to run locally on my Mac. None of this is revolutionary. I'm not suddenly an engineer. These tools typically help someone with no expertise at all just get a foot on the ladder. So if you fall into that category this might be a useful post for you.

Artifacts: getting to working demos

Put simply, turning Artifacts on in Claude (a quick trip to the settings menu) enables a preview panel in which you can run certain types of code. This means you can communicate an idea you have in natural language and Claude can do the heavy lifting. In just a few paragraphs of conversation you can get to a simple interactive demo. Crucially you can also publish the Artifact and share it with others.

It's dazzlingly simple in practice but deeply effective. Purely as an example, I asked it to experiment with the idea of a live blog 'catchup' feature. My first prompt included a screen grab of an existing live blog and the following wordy explanation:

This is a screengrab from a Guardian live blog. I want to mock up a demo of a new feature. After the first live blog entry I want a button saying 'catch me up'. When the user clicks on the button I want a new live blog entry to expand. This will be generated in the real feature by an LLM but I will supply you with some sample text for this below. I also want a small note at the bottom saying something like 'this summary has been generated using AI' and a 'was this helpful option' with a thumbs up/down for the user to click. Sample text: [sample text]

It's not rocket science. But what Claude does with it is. The first iteration was ugly but absolutely nailed the basics. Including the screen grab is helpful for Claude to get more context but also time saving because it could simply lift the text from the image to get us started. The real magic here is how quickly seeing the interactive demo alerts you to what needs to be tweaked. I made three more small suggestions in quick succession:

Nearly brilliant. Can the catch me up button feel separate from the following entry? Perhaps by putting a line like you have on the above entries?

When the user clicks the thumbs up I want it to go green. If they click the thumbs down I want it to go red

Can we change the AI warning to: "This summary has been generated using AI, based on the live blog to this point"

But Claude is also capable of responding to much more general instructions. While I was happy with the mechanics at this point, the overall feel of the demo was pretty uninspiring. As a result I asked:

Looking back at the original screengrab, would you suggest rendering this feature in a different way (bear in mind mobile screens too)?

And then just for the hell of it:

Make it better

These open-ended instructions are obviously a crapshoot - it might end up going in really unhelpful directions. But because Claude explains its choices in the chat along with the code being generated it's a great way of challenging your assumptions and finding surprising alternatives. The final iteration of the mockup is a significant advance on the original take. And it took no more than 10 minutes in total.

There are downsides. With more complex ideas, this process will eat up tokens, especially on a free account. And the longer your iterating goes on, the more potential there is for the machine to lose track of crucial context. There's not too much room for exciting formatting or imagery. But the potential for democratising creativity in design workshops is huge and it's become a significant part of my working process.

The jump to code

While Artifacts felt like a huge step forward, I still hankered at times for the ability to make something that actually worked rather than demonstrating a broad idea. For most people, picking a language like Python and following an online course makes sense. But I've always struggled with that, and felt overwhelmed and confused by the detail. So I decided to see if I could use Claude initially just to get a simple idea up and running with the hope that it could give me a practical starting point for learning more.

I started with this:

I work on innovation but I don't code. I've loved using Artifacts to create demos but I'm really keen to try to complete a small coding project to get me started. I've worked with engineers for many years so I'm good on what's possible but useless at the detail. One of the things I regularly do is collate interesting innovation stories I've collected on Twitter and turn them into board reports. I often have to take a few stories with a similar theme and turn them into paragraphs with a unified narrative. I'll include an example of that at the bottom of this request. I wondered if you could help me build a little tool that takes three or four links, calls the Claude API and tries to construct paragraphs like this? I want to do it in the easiest way possible. I wondered about a Chrome extension but not sure. Can you help guide me through this process? Example paragraph: [sample text]

Claude came back with a clearer breakdown of the idea and recommended building a simple web application using Python for the backend (to handle API calls and text processing) and a basic HTML/JavaScript frontend. It then asked me to do the following:

• Install Python (if not already installed)
• Set up a virtual environment
• Install necessary libraries (Flask for the web server, requests for API calls)

At this point I needed to come clean with it and share the scale of my ignorance.

I barely even really know how to open Terminal on my Mac. I have no idea if I have Python installed. I find the terminal impenetrable. Can you talk me through every single detail step by step?

Sharing that with anyone reading is mortifying. But that's one of the reasons why using Claude for the job of tutoring is so empowering. It doesn't judge and it absolutely will not stop until you understand something (well, or until its context window runs out).

The next hour or so involved a back and forth conversation in which I repeatedly clarified instructions, fed back multiple errors and asked it to completely regenerate code rather than give me snippets to update because I wasn't clever enough to work out where they went. But by the end I had something that actually worked. It was ugly and the prompt was rubbish. The paragraphs were boring. But it worked. And while I had very little idea what the Python script was doing in detail I at least knew that it was achieving the broad aim.

By this point I was getting constant warnings about the length of the conversation. So I decided to stop the current chat and see whether I could take another pass at the same task more effectively using some of the building blocks from the first experience. This time I started by using Workbench to create the prompt for the paragraphs myself, figuring that I could do a better job, but also that a well structured prompt would give Claude a better idea of my aims. I also knew I needed to be more explicit about my lack of knowledge:

Hello! I want you to help me code up a small project from scratch. I know what I want to achieve and I have a prompt I want to use. But I'm terrible at coding and have never set up a proper project before. My aim is to build a little web based tool that takes three to four urls and summarises them for a board report, unified by an interesting narrative. I'll append my prompt at the bottom. I think a good way to do it might be using Python and Flask? But you'll need to step me through even downloading Python. The prompt I want to use in the tool is: [prompt]

This time the process was far easier. Claude could start me off at a point that chimed with my lack of expertise. There was still back and forth but my previous effort meant that I was more aware about how to explain what was going wrong or which error messages it needed to see. We got to a working tool much more quickly and the better defined prompt (which moved the LLM through the process in clear steps) meant that rather than just a paragraph that summarised each article in turn, I got something that looked much more like a conjoining narrative. Claude had also suggested that I use VS Code to edit my files and keep track of things. That made a huge difference. Everything felt a lot less cloudy.

Since then I've created a couple more successful projects. The process absolutely has its downsides. For anyone more au fait with coding it would probably be deeply inefficient, but considering my aim is to learn as much as to build things, it's been easily my most successful attempt to educate myself in this area. I've also been able to feed the Python script back into a new chat window to get Claude to talk me through in detail what each section does. With a clear understanding of what it achieves overall, this step is helping me get to grips with the detail.

I'm obviously not suddenly a coder. Getting over the hump of actually deploying these local experiments for a wider audience is yet another challenge to address. I absolutely couldn't start a project myself from scratch. But I can't tell you the sense of satisfaction I've gained from going through this process, the confidence I'm starting to develop and the renewed enthusiasm I have for the way in which these tools can genuinely change the way you work. If you want to dive in, there's never been a better time.