Delegating Web Dev: Claude vs. Manual Tasks

The Problem with Delegating Taste

A common pitfall when starting with AI is to treat it like a creative director. You might give it a vague prompt like "build a beautiful landing page for my portfolio" and hope for magic. The result is often disappointing.

AI models like Claude are trained on vast amounts of data from the internet. When asked for something subjective like "a good design," they tend to regress to the mean, producing layouts and color schemes that are common, but not necessarily creative or distinctive.

The video "Stop Making Ugly Websites with Claude Code" by Ed Hill hilariously demonstrates this.

As the video shows, delegating core aesthetic decisions often leads to bland, repetitive designs. Your role is not just to prompt, but to provide the creative direction, the constraints, and the specific vision. Claude's role is to execute that vision with speed and precision.

A Decision Framework for Delegation

To make smart delegation choices on the fly, it's helpful to have a mental framework. Think of it as a quick checklist you run through before deciding whether to write the code yourself or ask Claude to do it.

The article "When to Delegate Development Tasks to AI" from SoftwareSeni provides an excellent structure for this. It suggests running every potential task through four filters.

Let's break down these four filters in the context of building your personal website:

1. Verifiability: Can you quickly and easily check if the result is correct?

   • High Verifiability (Delegate): "Change the background color to #F5F1E8." You can see this change instantly in the Claude Artifacts preview or your Live Server.
   • Low Verifiability (Code Manually or with high caution): "Implement a complex animation that depends on scroll position." Debugging the generated JavaScript might take longer than writing it yourself if you're not familiar with the concepts.

2. Stakes: What's the cost of an error?

   • Low Stakes (Delegate): "Generate three paragraphs of Lorem Ipsum placeholder text." If it's wrong, the consequences are zero.
   • High Stakes (Code Manually): "Process a contact form submission securely." For your static sites, this logic is handled by a third-party service like Netlify Forms or Formspree, but the principle holds. You don't want to delegate tasks where an error could compromise user data or break critical functionality.

3. Complexity: How well-defined is the task?

   • Low Complexity (Delegate): "Create an HTML <footer> with a copyright notice and links to social media." This is a self-contained, well-understood pattern.
   • High Complexity (Code Manually): "Decide the information architecture for my entire website." This requires strategic thinking about your goals and user journey—a task for you, the architect.

4. Familiarity: Do you understand the domain enough to supervise the output?

   • High Familiarity (Delegate): "Write the CSS for a three-column grid using Flexbox." Since you have some CSS knowledge, you can review the output and know if it's correct and maintainable.
   • Low Familiarity (Code Manually or use AI to learn): "Write a Webpack configuration from scratch." If you've never used Webpack, you won't be able to spot subtle errors in the AI's output. In these cases, it's better to do it manually to learn, or ask the AI to teach you first.

This last point is crucial for your goal of understanding the code. As a rule: Never delegate what you can't verify.

The Delegation Playbook: What to Hand Off and What to Own

Using this framework, we can build a practical playbook for AI-assisted web development.

Tasks to Delegate to Claude:

• Boilerplate and Scaffolding: Generating the initial index.html with all the necessary meta tags, creating CSS files, and setting up basic page structure (header, nav, main, footer).
• Repetitive and Tedious Code: If you need to create a gallery of six identical portfolio cards, create one yourself to get the structure right, then ask Claude to generate the other five.
• Implementing Well-Defined Components: This is Claude's superpower. If you provide a clear and specific description, it can generate the HTML and CSS for a component with high accuracy. The prompt in the image below is a great example of this, specifying colors, fonts, and layout details.

• Refactoring: Ask Claude to "Take this messy CSS and organize it using CSS Custom Properties" or "Convert this <div>-based layout to use semantic HTML5 tags."
• Generating Options: Use Claude for brainstorming. "Give me three different layout ideas for a hero section" or "Suggest five different call-to-action button texts." You make the final decision.
• Writing Small, Isolated JavaScript Snippets: "Write a JavaScript function that adds a scrolled class to the body when the user scrolls down more than 100 pixels."

Tasks to Perform Manually (Your Role):

• Project Strategy and Architecture: You decide the purpose of the site, the pages it needs, and the overall user experience. You are the architect.
• Core Design Decisions: You choose the branding, color palette, typography, and overall aesthetic. As the "Collaborating with Claude" article shows, the author drove the process, asking for specific fonts and layout changes to inject their personality.
• Content and Voice: The AI can help draft copy, but the final content—your story, your project descriptions—must come from you to be authentic.
• Starting the Project: As the "Most Developers Are Using AI Wrong" video suggests, it's often best to set up the initial project folder and a few core files yourself. This establishes your preferred structure and conventions, giving the AI a better reference point for future additions.

A Powerful Workflow: Assemble, Normalize, Fill

The "Stop Making Ugly Websites" video proposes a brilliant workflow that perfectly encapsulates this strategic delegation model. The presenter calls it the ANF Framework: Assemble, Normalize, Fill.

This workflow is the essence of efficient AI collaboration. You, the human, are responsible for the highest-value decisions: sourcing quality design patterns (Assemble) and providing the authentic content (Fill). You delegate the time-consuming, mechanical work of implementation and code unification (Normalize) to the AI.

Staying Smart: The Paradox of Supervision

Your goal is not just to build sites faster, but to become a better developer in the process. This brings up what the SoftwareSeni article calls the "paradox of supervision": you need expertise to verify AI output, but over-relying on AI can prevent you from building that expertise.

Here's how to navigate this paradox:

• Study the Output: When Claude generates code, don't just check if it looks right. Read the code. If you see a CSS property or a JavaScript function you don't recognize, make a note of it.
• Ask for Explanations: Your most powerful tool for learning is the AI itself. If you don't understand a piece of code, copy it back into the chat and ask, "Can you explain this line by line?" We will dedicate an entire lesson to this technique in the next module.
• Refactor and Re-implement: If a piece of generated code feels overly complex, try to rewrite it in a simpler way that you understand. This is an excellent way to solidify your mental model.

Conclusion

You are now equipped with a strategic framework for delegating tasks to Claude. This is the difference between being a "prompt engineer" who simply asks for things and an "AI-assisted developer" who orchestrates the entire building process.

Key Takeaways:

• You Are the Architect: Your primary role is to provide the vision, strategy, and design direction. Claude is your tireless, lightning-fast junior developer who executes your instructions.
• Delegate the Tedious, Own the Strategic: Hand off boilerplate, repetitive tasks, and well-defined component implementation. Keep control over core architecture, design choices, authentic content, and final quality assurance.
• Use the ANF Model (Assemble, Normalize, Fill): Leverage human-created design patterns for quality, use Claude for implementation and unification, and provide the final content yourself.
• Learn Actively: Never accept code you don't understand. Use Claude's output as a learning opportunity by studying it, asking for explanations, and refactoring it.

In our next module, "Effective Prompting for Website Code," we will dive deep into the art and science of communication with Claude. Now that you know when and what to delegate, you'll learn how to write prompts that get you exactly what you need, starting with crafting the perfect initial prompt for a new project.