How to Use Claude Code to Build $2,000 Client Websites: A 5-Hack Workflow
A designer's step-by-step method for using Claude Code to produce professional, branded websites that clients pay premium prices for, avoiding generic AI output.
Practical Summary
This workflow outlines five specific techniques for configuring and guiding Claude Code to create high-quality, client-ready websites. It focuses on controlling the AI's output through system prompts, specialized skills, a self-correction loop using screenshots, design cloning from references, and component-level customization, culminating in an automated deployment pipeline. The method is presented as a reproducible system for generating revenue from client projects.
Why It Matters
For freelancers or agencies, this workflow provides a blueprint for using an AI coding assistant not just for code generation, but as a integrated part of a quality-controlled, revenue-generating production line. It demonstrates how to move beyond basic prompts to a structured, repeatable process that addresses common pain points like generic AI design and lack of brand alignment.
Step 1: Set Up a System Prompt with CLAUDE.md
Create a file named CLAUDE.md in your project. This file acts as a system prompt that Claude reads before every task. Use it to define your rules: specify that it must always use your design skill, state where brand assets are stored, and define the deployment process. Keep the instructions clear and concise to guide all subsequent AI actions.
Step 2: Install the Front-End Design Skill
Install a front-end design skill for Claude (the specific skill name is implied to be available in its ecosystem). This is described as the key step to prevent generic, 'sloppy' AI-generated layouts. Once installed, instruct Claude to use this skill globally, which should result in more modern, professional designs with a single command.
Step 3: Implement a Screenshot Feedback Loop
Have Claude set up Puppeteer (a browser automation tool) to take screenshots of the website it builds. Then, configure the workflow so Claude can look at its own visual output and identify what's off. This creates a self-correction cycle where the AI iteratively fixes its own design and layout issues before presenting the result.
Step 4: Clone Designs from a Reference
To match a specific style, provide Claude with two inputs: a full-page screenshot of a website you like and its corresponding CSS file. The workflow has Claude build the site, then compare its output against this reference to match the design. After matching the structure, you can layer your client's brand elements on top.