We just launched our new website (this one). As we're an AI consultancy, we thought we should "eat our own dog food" and so this website was built by AI, overseen by a human (me). Every single line of code was created by AI. I tinkered with a few bits and pieces, but I couldn't point you at any code that I wrote. I did, however, have a major part to play in dictating the process, providing design and technology direction and originating ideas that made the result distinctive.

This is how I went about it and my experiences of AI becoming a member of my team.

First or all, to set the scene, I should explain that I'm primarily an engineer. Having said that, I'm also someone who's senstive to and interested in design. But I'm not a designer and I've never taken any design training. I'm simply someone who's aware of good design and knows what he likes when he sees it.

The main AI I used for this exercise was Anthropic's Claude (Sonnet 3.5). I also used OpenAI's o1 for complex technical challenges that Claude struggled with. Claude's personality is very inviting and it tends to be concise in its responses. o1 is a bit more clinical in style and has a habit of explaining everything in detail, which tends to mean you need to spend more time understanding what it's telling you to do. But o1 can solve problems that Claude cannot. So, a combination of the two is ideal. And, yes, that does mean I pay for two separate subscriptions.

To start things off, I had three assets that I used in my first prompt:

1. A description of who we are and what we do.
2. A description of our design assets - colours, fonts, etc.
3. A screen print of a website that I liked the structure of.

Getting started

My first prompt went like this:

"You are a world class web developer/designer. You're first class at taking vague user requirements and turning them into eye-catching and unique websites. Please take the following description of the Barnacle Labs company, the design language detailed below and use the attached image to inspire the creation of a new landing page."

This resulted in a pretty average first draft website if I'm honest, but it was a starting point and here it is, in all its glory.

I'm sure some people would think this was decent, but I wanted something more distinctive. Also, it amuses me that Claude dreamt up a new anchor logo for us, riffing off of the seafaring nature of barnacles. That wasn't really what I was looking for, but it made me chuckle!

To be clear, Claude wrote all the code and visualised it in its 'artifacts' section. I copied the code into my project, started my server and had the prototype up and running. Without the knowledge of how to get a new project up and running I'd probably not know what to do at this point, so I think it's important that the person driving things has technical skills.

Hero section

The first thing I wanted to improve was the hero section - I wanted it to have real impact and this first version was too wordy–a bit too much like one of those websites you review quickly and instantly forget what it was saying.

So, I "had a chat with Claude" and it came up with various options for a title:

• "AI with purpose"
• "AI that makes a difference"
• "Meaningful AI for meaningful change"
• "Building AI that counts"
• "Where AI meets impact"
• "Purposeful AI, powerful outcomes"
• "AI solutions with substance"
• "AI beyond the buzzwords"
• "AI that moves the needle"

Interestingly, it's also pretty opinionated:

My personal recommendation would be "AI with purpose" or "Where AI meets impact" as they:

- Maintain the emphasis on meaningful work
- Are concise and memorable
- Avoid cliché tech phrases
- Work well visually in your current design
- Align with your brand's direct, professional tone

At this point I went with "Where AI meets impact". In retrospect that wasn't a good option – too hypey for my liking. A bit later on I brainstormed a bit more with Claude and we arrived at "Things that Matter, Powered by AI."

But then I started to worry that wasn't clear enough and so I asked Claude "Things that matter, Powered by AI" or "We build things that matter, powered by AI"?

Claude was emphatic in its response:

"Things that matter, powered by AI" is stronger because:

- It's more concise and impactful
- The "We build" isn't necessary - it's implied and understood that you're the ones building
- Starting with "Things that matter" creates immediate intrigue
- Without "We build" it feels more like a powerful statement of purpose rather than a description of what you do
- It's more memorable and quotable

The shorter version allows each word to carry more weight

Plus, you have clear case studies below that show exactly how you build these things. The shorter version creates a stronger hook that draws people into those examples.

The addition of "We build" would make it feel more like a standard company description rather than a bold mission statement. The shorter version is more confident and distinctive.

OK, that was good for me, I was convinced! We don't want to sound "standard" – confident and distinctive is much more what we're aiming at.

Wondering about trust

I started to wonder if the "social proof" section should be part of the hero section, or if it should be "below the fold" so users would only see it when they scrolled. I wasn't sure of the answer – on the one hand, I liked the idea of a very "clean" above-the-fold hero section, but on the other hand maybe showing social proof above-the-fold might help capture users. So I asked Claude: "should the trust section be part of the above the fold or not do you think?"

Clause was again strongly opinionated in its response:

From a strategic web design perspective, I'd recommend keeping the trust section below the fold.
Here's why: Above the fold should focus on your primary value proposition and call to action - in this case "Things That Matter, Powered by AI" and the "Get Started" button.
This main message and action should be clear and uncluttered.
The trust bar works better as a supporting element that users discover as they begin to engage with the content.
As they scroll down, seeing trusted brands reinforces their initial interest.

Contrasting fonts

I had an idea – I'm a bit of a fan of contrastring different fonts to emphasise the message. So, I asked Claude: "The hero section of my website is very simple and has the statement "Things that Matter, Powered by AI". I'm wondering if to have it all in a big bold sans serif font, or if to have the "things that matter" bit in a serif font and "powered by ai" in sans. What do you think?"

Claude was enthusiastic (which was a nice ego boost to me):

For this hero message, using two different fonts could create an interesting visual hierarchy and conceptual contrast.
Having "Things that Matter" in a serif font could give it a more timeless, substantial feel - appropriate for emphasizing importance and permanence.
Then switching to sans-serif for "Powered by AI" would create a modern, technological tone that suits the AI reference.
The contrast between the fonts would also help visually separate these two concepts while maintaining their relationship, potentially making the message more impactful than if it were all in one font.
Would you like me to create a quick example implementation using React to show you how this might look? I could demonstrate it with some common font pairings that work well together.

Yes, yes, yes! Claude likes my ideas!

Some other human input

I showed the work-in-progress landing page to a colleague (who's famous for always wanting to pare things down) and he wondered if we really needed a subtitle – if a single statement might have more impact.

So, I asked Claude "should we have a title/subtitle in the hero section, or should we simplify even further to just a title?"

Claude was clear:

Looking at modern, impactful landing pages, I'd recommend simplifying to just a powerful title. Here's why:

- Single powerful statements tend to be more memorable
- It reduces cognitive load for visitors
- Many leading tech companies use this approach (Stripe, Linear, Vercel)
- It allows the rest of your page (case studies, testimonials) to tell the fuller story
- Your case studies already demonstrate the "things that matter" very concretely

So I'd suggest going with just: Things that Matter, Powered by AI

This title works well on its own because:

- It captures your mission clearly
- It's memorable and distinctive
- It balances human impact ("Things that Matter") with technical capability ("Powered by AI")
- It leaves room for visitors to be intrigued and scroll down to learn more
- The case studies below will naturally answer "what kinds of things?

OK, so Claude and my colleague had similar thoughts – let's roll with that.

A Bounce

I had an idea, so I chatted with Claude: "how about if the period falls from the top of the screen and bounces a few times when it lands in place?" Notice, Claude is good at refining my ideas, but I had to come up with them in the first place.

Claude was enthusiastic:

Great idea! We can create that effect using CSS animations with bounce easing. Let me create that for you...

The initial version that Claude created was a bit jerky and lacking in the quality I demand. We went back-and-forward as Claude tried to fix it, but I had the sense we were going about this the wrong way, so I asked Claude if we shouldn't use a library that included physics effects. Claude suggested we try a library called GSAP, which I checked out and thought it looked good.

Claude wrote the GSAP implementation code and that made a major improvement – finally, a nice smooth and natural bounce! But if I hadn't have known that such libraries existed and mentioned it, I fully expect we'd still be at it, on the 1,000'th iteration of a solution that was never going to work!

A final review

As we were getting towards the end, I thought it might be worth giving Claude a chance to review the whole langing page, so I started a new chat, took a screen print of the working prototype and asked Claude to "please review and critique this landing page."

Here's it's response:

I'll analyze this landing page for Barnacle Labs comprehensively:

1. Strong Visual Framework

- The page has a clear hierarchical structure with well-defined sections
- The technology framework diagram effectively illustrates the technical capabilities
- The 5-step process is clearly numbered and easy to follow
- Matrix-inspired "blue pill/red pill" concept adds a creative, memorable touch

2. Compelling Social Proof

- Impressive case studies from reputable organizations
- Each case study includes specific, tangible outcomes
- Clear demonstration of cross-industry expertise

3. Value Proposition

- Clear articulation of their AI expertise and experience
- Strong emphasis on practical application over theoretical exploration ("not creating a science project")
- Good balance between technical capability and business value

Not bad, even if I do say so myself – me and Claude are quite the team!

Claude went on to identify some typos and minor layout adjustments – some of which were valid, some of which it seemed to get a little confused about and so I ignored them.

Summary

I think you can see the nature of the collaboration between myself and the AI in this post – the end-result was genuinly an AI/Human collaboration, resulting in a solution that neither of us could have got to on our own. The AI implemented what I wanted it to, but I needed to know what I wanted. I needed to have an instinct for what was good or bad. I needed to have a sense of taste. I needed to recognise when the AI was tieing itself in knots technologically and when we needed to step back. A human with experience and opinions of both technology and design is needed to direct this process. If you don't have that, there's a grave danger the AI will drive you off a cliff edge.

The AI was a great sounding-board for ideas. Surprisingly, it did more than just do my bidding. It was opinionated about design choices and wasn't shy to tell me what was good or bad. This was unexpected, but useful.

But there's one other thing that might not be so obvious. Sitting at a computer is a lonely job and you don't get much postive reinforcement. In this new AI-Human collaboration, I did get the feedback I sometimes miss. When I came up with a good idea, Claude was enthusiastic. When my ideas weren't so great, Claude would very diplomatically warn me off, but still do what I asked if I persevered.

Working with AI is actually "fun" – or, more accurately, more fun than working on my own.

If, like me, you suffer ocassionally from imposter syndrome, AI has the capacity to boost your self esteem. When Claude said things like "Great idea!", I physically smiled. I know it's just a computer running a "fancy auto-complete algorithm", but it made me feel good about myself. Am I anthropomorphising? Maybe, just a little.

This impact of AI on a person's 'sense of self' is recognised but under-researched. Perhaps it's under-researched because it's only now that we're starting to experience 'real' AI, and so the implications of this are still novel. The act of anthropomorphising an AI often seems to be discussed with negative connotations, but my personal and recent experience is much more positive. Regardless, I am but a "sample size of one" and there's a definite need to look more deeply into this as AI starts to impact more domains of expertise. Our future is surely full of many more examples of Human/AI collaboration.

Was this experience quicker than working with humans? Yes, without a doubt. My past experiences of trying to tell others what we need our website to articulate has been painful. For me, this AI-Human conversation was much more direct and efficient. I could pick it up when I needed and stop for a coffee whenever I wanted. When Claude got the wrong end of the stick I could be very direct with it ("That looks terrible!") without fear of hurting its feelings, for it has none. It was defintely quicker (about a week elapsed time, weaved around other things) and cheaper ($40 subscription/month for Claude and ChatGPT). This feels like the future–whatever that means.