Vibing with Claude Code

Since the release of chatGPT and the rollout of other models like Gemini and Grok, I've been trying out various AI tools to see what they do and if they'd be useful to me. I've been impressed but unconvinced they'd bring me any value. What does surprise me though is hearing anecdotes from friends who work in fields like education and health who have been using GPT to plan lessons, summarise data and help them write reports.

I've been both excited and intimidated by the sudden surge in AI news and AI platforms. It feels like almost overnight, connections on LinkedIn have positioned themselves as AI experts whilst others are actively refusing to engage with it.

We're all probably experiencing similar emotions when it comes to AI but nobody becomes an expert in anything overnight and outright refusing to engage with something as exciting as AI seems daft.

Having an interest in science and innovation I've been aware of advances in AI and have read books on the subject but I never thought I'd be living in a world where in such a short space of time a mind boggling array of AI tools, training materials and the opportunities they bring are available to the masses.

What is Claude Code?

Claude code is a coding assistant. You essentially plan what you want to accomplish and through an ongoing dialogue get to a point where you implement the plan.

Once Claude starts building it provides feedback and context around whats it's doing now, what its doing next, fixing bugs and suggesting ways to improve.

Getting started with Claude Code

Developed by Anthropic you can learn about Claude code by visiting Anthropic Academy. The courses are excellent and I'd recommend the Claude Code in Action course which will get you up and running.

The course is around 2-3 hours long and covers installation, starting a project, GitHub integration and Claude's SDK.

Claude Code runs inside a terminal shell but Anthropic have recently updated the desktop app so you can use that if you prefer.

The task

I created this website with the Astro framework, Shadcn and wanted to integrate a Contentful CMS.

I was happy with the structure and look of the site but was struggling with Contentful. I was ready to throw in the towel when I noticed an uptick in social media posts raving about how good Claude Code is. As a subscriber of Claude AI I was curious to see if it could help me integrate Contentful.

Hooking up Contentful

I needed a blog for my website so I could start a portfolio of UX projects I'll be completing on my masters degree. I wanted a standard pattern, blog landing page with a grid of tiles linking to corresponding blog posts. The blog posts grid should populate itself with content referenced from a blog post and should also include a sort posts by category option.

Once I'd located the patterns I liked on Shadcn I asked Claude to install them. Claude got to work and immediately found an issue with my set up that was preventing me from installing the most recent components, so it guided me through the process of grabbing an API key from Shadcn which it then mapped for me.

After installing I explained to Claude I wanted to use Contentful to manage my blog and needed help with integration.

Claude knew exactly what to do and wrote a simple step-by-step plan on how we'd accomplish this. I'd already created a blog post content model which Claude liked, but as we refined the plan Claude suggested adapting it with new naming conventions for Field IDs, Field Types and an efficient way to manage category tags for filtering.

Once I'd refined the model, Claude started to update the blog posts and blog page code and asked me to create three blog posts with test content.

I watched in awe as Claude got to work creating files, updating code and guiding me through setting up web hooks in Netlify and Contentful. After an hour I was amazed to see everything I'd asked Claude to do was working and I'd also picked up some tips along the way!

We then set about updating the rest of the homepage components, creating new content models, integrating a form, testing for bugs and publishing.

Publish workflow

I'd already connected my Astro project to GitHub and use Netlify for hosting. Netlify has a nice feature where it connects to your GitHub repository and runs a build and deploy job when a commit to main is detected. I asked Claude to take over the Git commits, work on a Dev branch and ask me to review any changes before merging and committing to main. Claude handled this with ease.

Time spent on integration

I asked for an estimate of time spent working together on my website and this was the response.

I don't have precise time tracking across our sessions, but based on the work we've accomplished together, I can give you a rough estimate:

Major work completed:

Day 1: Navbar installation, Contentful setup (blog posts, categories, authors, hero, work items, companies, testimonials), contact form with validation, homepage integration

Day 2: Navigation system with Contentful, footer replacement and customization, smooth scroll implementation, button hover effects, About section with Contentful

Day 3: Theme installation, theme toggle component, heading hierarchy (h1/h2), Contentful section management system, blog page updates

If I had to estimate, we've probably spent somewhere around 6-10 hours of active work time across these sessions

That includes:

• Planning and discussing requirements

• Creating Contentful content models

• Writing/modifying components

• Debugging issues

• Testing and iterating on features

• Git commits and deployments

So after around 10 hours of prompting I (Claude) had integrated Contentful into my website.

Cost

A Claude Pro subscription costs £18 per month, this is the cheapest option and includes 200,000 tokens per day which equates to around a 5 hour session. This was more than enough to start off with, but I've now got other Claude's working on abandoned side projects so have temporarily upgraded to the next tier which is £90 per month. I know that seems a lot but the output is so good, it feels like a good investment.

Whats next

Now I've got a taste for working with Claude Code I'm keen to learn more about Skills and Model Context Protocol, but for now I'm focusing on how to make workflows more efficient by using agents to work on specific tasks such as accessibility checks and code reviews.