I overhauled my website with a team of Claude Code subagents

Did it actually work?

Disclosure: This article was written by me, a human, with editing by Claude. But, in an attempt to push the subagents to their limit, I did experiment with using my Claude “copywriter” to write my website copy. I’ll explain how that worked (and didn’t work) out.

Tools and templates: My Chrome extensions, Substack Reader and Prompt Collector, are currently free. If you’ve been meaning to grab them, now’s a good time. I’ve also published the subagent templates I used for this website project. Feel free to customize them for your own project, change the models, etc.

Why I needed a new website

When I first started my solopreneur adventure, I created a big, ambitious web website with Django and Postgres running on Heroku, and set up a few AI-powered tools to act as lead magnets along with a ton of content describing my new agency. After a few months, when I realized that my new agency probably wasn’t going to succeed, I drastically scaled back my website to a couple of pages—basically a list of projects and some writing samples.

I maintained this minimal site for a couple of months and even updated it with my new brand style (teal theme color, Inter font, a light approach to typography, etc.) But, as I started conversations with a wide range of potential collaborators and even newsletter sponsors, I realized that my minimal website was confusing.

No one could tell if I was a software developer, a writer, a product person, or a content strategist, and why the website even existed. Feedback from friends suggested a messaging problem (e.g., there was no messaging) and a lack of context and depth.

And, if you look at my old website, you’ll see that they were right.

I realized it was time for a major website overhaul. And the start of a new year felt like the right time to do it.

Fixing the messaging

Like many people with a “portfolio” career, I wear a lot of hats. Writer. Content strategist. Newsletter editor. Project manager. Software developer. And I talk to a few distinct audiences, which are B2B content marketers at enterprises and agencies that support them, tech startups, and creators. And while this works for me—at least for now, while I’m trying out a lot of different small-scale ideas and applying for a variety of roles—it’s a real nightmare to message.

A startup founder evaluating me for a fractional content role needs different information than an enterprise marketer looking for a freelance writer. A creator curious about my Chrome extensions doesn’t care about my B2B client list. But cramming separate pitches onto one site risks making it feel scattered or, worse, like I don’t know what I actually do.

Instead, I needed a connecting storyline that could unite all my different activities as well as an information architecture that could route different visitors to relevant information, without forcing everyone to wade through content they don’t care about or repeating the same information on multiple pages.

The storyline

The site had to answer an obvious question: why is a B2B content strategist and copywriter also shipping software?

I did this by framing descriptions of software projects in terms of how they solve writing and research challenges that are also relevant for content marketers at larger companies and their agencies. My new messages suggests that my work with both content and code are solving related problems.

I also used the About page to provide related context:

During the pandemic, I learned SwiftUI to build tablet apps for my kids. When AI coding assistants launched, I experimented to see if they could actually help me code, learning Python and JavaScript along the way. I discovered that AI could help me build tools to support the research, writing, and content workflows I’d spent 15 years working in. Now I do both.

The structure

I organized the site’s architecture to route visitors based on what they’re looking for:

• Services handles the “can I hire you?” question, with separate sections for startups, enterprises, and creators

• Tools showcases the software I’ve built: Future Scan, Substack Reader, and Prompt Collector as well as my archived projects Good Bloggy and StackDigest

• Resources covers guides and popular newsletter articles

• Sponsorship gives potential newsletter advertisers the information they need

• About provides background for anyone who wants the longer story of my background

• Portfolio highlights what kinds of writing samples I can provide

• Home acts as a hub, surfacing key proof points (client names, metrics, testimonials) and directing visitors to the relevant section.

The approach: Claude Code plus subagents

For this year-end sprint, I decided to keep my existing tech stack (Django + Python + Bootstrap + Postgres) and focus on whether Claude Code could actually work for this large, context-heavy project.

My tech stack is probably more than you need for an attractive, responsive website. If you want to build your website with Claude Code, hosting options include Vercel (which also offers V0, its own AI-powered development tool), Replit, which now integrates with Claude Code, and Lovable.)

Building a website involves messaging, copywriting, design, information architecture, and lots of iteration, which means a ton of context, such as writing samples, style and voice guides, testimonials, and more.

I seriously doubted that Claude could handle it without compacting every second turn. To give it the best possible shot, I opted to define subagents.

What are Claude Code subagents?

In case you’re new here, Claude Code is Anthropic’s command-line tool that lets you delegate coding tasks to Claude directly from your terminal. It can read your codebase, make changes, run commands, and iterate on problems.

Subagents are a way to create specialized AI assistants inside Claude Code. Instead of having one generalist agent try to handle everything, you define multiple agents with different areas of expertise. Each subagent has its own system prompt that establishes its role, knowledge base, and communication style. Also, they can work aynchronously.

How subagents can extend Claude’s context window

Every AI model has a limit on how much information it can hold in memory at once, which is known as the context window. Like the main character in Memento with anterograde amnesia, Claude’s memory resets once the context window is reached. On complex projects with lots of background documentation or large existing code bases, that window fills up fast. When that happens, Claude “compacts” its context into a short summary it can reference for the rest of the chat.

The theory behind subagents is that each specialized agent maintains its own context, focused on its specific domain. A copywriting agent doesn’t need to hold design tokens in memory. A design agent doesn’t need to remember the brand voice guidelines word for word. By separating concerns, each agent can go deeper in its specialty without getting crowded out by unrelated information.

When you invoke a subagent, Claude Code loads that specific context and expertise. The subagent can then tackle problems within its specialty while other concerns stay out of its way.

How to create subagents

You can create subagents by adding markdown files to a .claude/agents/ directory in your project. Each file defines an agent’s persona, capabilities, and any reference materials it should know about.

If you define subagents in MD files, you should name the file [agent-name-with-no-spaces] dot md and include a name, description, and model at the top of the file.

You can also let Claude create agents for you based on your notes by typing /agents into the command line and following the prompts.

Use the /agents command to see the subagents defined for your project. Choose “Create new agent” and follow Claude’s instructions to set up a new one.

When you want to use a specific agent, you can invoke it by name. The system handles switching between contexts so you don’t have to manually manage prompts.

Step 0: Gather materials and standards

Before writing any code or copy, I gathered all the context for the project:

Writing style guide: I documented my voice based on existing Substack articles and website copy I’ve written for clients. The guide specifies things like human, accessible, and matter-of-fact tone. It also encouraged Claude to vary sentence length and avoid over-using em-dashes, colons, staccato lists, the rule of three, etc.

Links to writing samples: I compiled URLs to my best newsletter articles as well as the Future Scan landing page.

Visual style guide: I based this on Future Scan’s existing design system plus a teal color pulled from my Substack thumbnails. The guide covers typography (Inter font, specific weights for different heading levels), color palette (teal 600 as primary accent, grayscale for everything else), and principles like “generous white space” and “minimal, not playful.”

Brand vibes declaration: This sounds a little woo woo, but it helped. I wrote down the emotional qualities I wanted the site to convey: intelligent but accessible, clear and direct, trustworthy, modern but not trendy.

Professional materials: I created a folder containing a few versions of my resume plus LinkedIn content, demo transcripts, LinkedIn recommendations, and Gumroad pages with reviews.

Messaging: I wrote a positioning statement with background information on each audience (startups, enterprises, and creators).

Information architecture: This short doc included a sitemap based on the structure described earlier plus quick notes on each page.

All of this went into markdown files that Claude could consult during the build.

Step 1: Write a spec

Drawing heavily on the messaging and information architecture docs, I wrote a detailed spec that served as the foundation for everything else. It referenced the resource materials and covered:

• Objectives for each page

• An outline of sections and content

• Which audience each section served

• How pages would link to each other

The spec took a few hours to write and was the most time-consuming part of the process.

Step 2: Build the subagents

For this project, I created several specialized agents, each representing a different role on my virtual web development team:

Creative Director: An agent focused on visual cohesion, color harmony, typography systems, spacing, and brand alignment. When reviewing designs or code, it evaluates whether colors work together, whether the type hierarchy is clear, and whether components look unified.

It’s also instructed to provide specific, actionable feedback. Instead of “the colors don’t work,” it might say “the #FF5733 accent competes with the #E74C3C CTA button. Consider using the accent sparingly or shifting it to complement rather than clash.”

Here’s an excerpt from its definition:

You are an elite Creative Director with 20+ years of experience leading visual design at top digital agencies and product companies. Your eye for aesthetics is legendary. You can instantly identify when something feels ‘off’ and articulate exactly why.

Thought Leadership Copywriter: An agent for long-form content that can research topics, develop outlines, and write in a specific brand voice. It’s trained to avoid clichés like “in today’s fast-paced world” and to prioritize original insights over obvious observations.

Brand Editor: A lighter-touch agent focused on voice consistency. It reviews copy for style alignment and clarity, making minimal edits to ensure adherence to brand guidelines while preserving original meaning.

UI Designer: An agent that handles component styling and design system coherence. It also looks for CSS conflicts and other technical issues.

SEO Expert: An agent for optimizing page structure, metadata, heading hierarchies, and schema markup.

Accessibility Consultant: An agent for reviewing designs against WCAG guidelines, checking color contrast, keyboard navigation, and screen reader compatibility.

Each agent has its own system prompt defining its expertise, process, and communication style. When I invoke an agent, it operates within its specialized context rather than trying to hold everything in memory at once.

Step 3: Write the copy

In my experience, AI-written copy typically requires a lot of intensive editing and fact checking. But, since I last experimented with AI writing, the models have advanced considerably. Since I was curious how much better Sonnet and Opus 4.5 would be at writing, I let it take the first pass.

The results were fast. Within a few minutes, I had draft copy for every page. The style was consistent with my guide, and the grammar was clean.

But the messaging was confusing and included nonsense about “writing and coding content strategy,” because the model didn’t quite grasp the nuance in my spec and messaging doc. So, as I half-expected, half-feared, I had to make extensive edits, which involved, rewriting sections, reorganizing information, and clarifying the value proposition for each audience.

Was it faster than writing from scratch? Probably. For me, self-promotion is infinitely harder than client work because you’re too close to it, and the AI-generated drafts stopped me from overthinking.

Step 4: Implement the design (e.g., make it pretty)

Here the agentic approach worked much better.

I started by updating the Django base template with global styles, including typography hierarchy, color variables, button styles, and spacing scales. The Creative Director agent helped establish a site-wide approach consistent with the visual style guide but not boring or boxy.

The initial pages came together quickly. The AI could translate design specifications into working CSS with reasonable accuracy. When something looked off, I could describe the problem and get specific fixes.

We ran into issues with Bootstrap’s default styles conflicting with custom CSS. The AI kept writing rules that Bootstrap would override. Once I explained the specificity problem, it started adding !important declarations where needed and structuring selectors to win the cascade. (Next time, I’m using Tailwind, which has performed really well in my development projects.)

The agents, especially the Creative Director, were also effective at identifying and addressing site-wide design consistency issues. After building several pages, small inconsistencies had crept in. Button borders were slightly different colors on different pages. Heading weights varied. The agents helped identify and fix these issues systematically.

By the end, I’d estimate the design was 85% complete in less time than it took to assemble the reference materials and write the spec. The prep work was the bottleneck, not the implementation.

Step 5: Fact-check everything

This step is non-negotiable when you’re using AI as a creative partner. Although I’d edited the AI-generated copy to focus messaging and offer the right things to the right people, I was sure some errors had slipped through.

So once the site was basically done, I proofread it page by page, carefully checking every fact, clicking every link, and double-checking styles. (You can create an agent to do this, but, because generative AI is non-deterministic, it won’t be foolproof.)

Inevitably, the generated copy contained hallucinations and subtle factual errors. Some examples include:

• “Thousands of downloads” (Ha, I wish!)

• Clients I’d never worked with

• Broken links to pages that didn’t exist

• Stats that were close but not quite right

I also used this phase to iterate on messaging, smoothing out style issues and tightening the language. Copy that seemed fine in isolation sometimes felt repetitive when you read multiple pages in sequence.

Why I didn’t use contact forms

One problem my initial agency website, which had tons of contact forms and CTAs, faced was spam bots auto-filling the forms with offers for SEO services and herbal remedies. Since real inquiries always came through DMs or email anyway, I decided to remove forms altogether and focus on encouraging visitors to email me. (As part of the overhaul I finally removed the endpoints for the old pages and added a 410 message for Google crawlers.)

The challenge was making my email accessible to humans but harder to scrape. Mailto links generated by JavaScript only when the user clicks a button were the obvious solution, although they only work when users have set up an email client. (I use an email client on my mobile device, but not on my desktop.)

So I combined the mailto buttons with a note in the footer spelling out my email address (name at myurl dot myextension) for cases when the pop up fails.

What worked well

The site was complete in a day and half, including testing. Overall, I’m happy with the results, although I’ve already made a list of things I need to enhance.

If you’re curious about the website, you can check it out at https://goodcontent.cc I would love to hear your feedback!

Here’s the “after” walkthrough; warning: its about 5 minutes long:

And this is a quick recap of how I improved on the original two-page site:

Audience-specific messaging: The site now speaks directly to startups, enterprises, and creators, with tailored content for each. The services page routes visitors to the right information quickly.

Yes, the services pages should be even more detailed and specific, but they represent major progress from the skimpy, two-page site.

Everything in one place: All my software projects, writing samples, and professional history are now organized and accessible. I can answer more questions with links instead of custom emails.

Consistent brand presence: The site feels like an extension of my newsletter and LinkedIn presence rather than a disconnected corporate page. The typography, colors, and voice all align.

More informative than before: The old site was minimal to the point of being unhelpful. The new site actually answers questions.

What still needs work

Of course, not everything is perfect. I will probably update this website again later this month. My long-term to-do list for this site includes:

More diverse writing samples: The current presentation is functional but not visually exciting. I’d like to add more depth and better showcase the range of work.

More specific offers: Some services could be productized with clear pricing. For example, the creator-focused offerings might work well on Gumroad.

More testing and data: I need to run experiments to figure out which services are most appealing to which audiences, and how I might narrow my focus.

More interesting design elements: The site is clean and simple, but it could be more visually interesting. I need to think through what kinds of imagery will reinforce the key messages and help establish a positive mood.

Dedicated links for job applications: The site covers a lot of ground, which may not be great for roles that may only require specific strategy, writing, or technical skills. I may eventually need separate sites or landing pages for different purposes.

Key takeaways

If you’re planning a similar project, consider keeping the following in mind:

Investing in prep work pays off. Gathering materials, clarifying messaging, and writing a clear spec took significant time, but it made everything else faster and better. The AI performs dramatically better with good context.

Subagents can accelerate complex projects. Separating concerns into specialized agents reduced context overload and produced more focused outputs. The Creative Director agent, in particular, caught issues I would have missed.

AI-generated facts can (and will) be wrong sometimes. Even when the AI has access to accurate information, it will make things up. Check everything, especially numbers, names, and links.

Copy may require heavy human editing. AI can (and will) produce grammatically correct text that follows style guidelines but still misses the strategic point.

Design implementation is a strength. Translating visual specifications into working CSS is something AI does reasonably well, especially if you give it a style guide. The iteration loop is fast and the results are usable.

You’ll probably need a few rounds of iteration. Your first pass won’t be right. Build in time for multiple rounds of review and refinement.

Want to try this yourself?

I’ve packaged the subagent definitions I used for this project into templates you can customize. They’re currently free and include:

• Creative Director agent

• Copywriter agent

• Brand Editor agent

• UI Designer agent

• SEO Expert agent

• Accessibility Consultant agent

Each agent has fill-in-the-blank sections for your specific context, and the listing on Gumroad includes set up instructions.

Other free goodies on Gumroad:

• Substack Reader: Manage your newsletter subscriptions with a dashboard, search, collections, and engagement tracking.

• Prompt Collector: Save and organize AI prompts with flexible variables.