Five Steps to Building a $10,000 Marketing Website with Claude Code
1. Preparing design standards and references
In the first two steps, you first set the design language and visual standards that Claude Code should follow.
- About 15 minutes are spent learning the design rules.
- Install Claude Code and prepare the project environment.
- Add the `frontend-design` and `UI UX Pro Max` skills to `.claude/skills/` to reduce the typical AI template style.
- About 20 minutes are spent collecting references.
- Choose 3 websites from Awwwards and Dribbble that are different from one another.
- Prepare about 9 screenshots centered on the main screens.
- Rather than copying the screens as they are, ask to refer to the principles of typography, spacing, color tone, and movement.
2. Making the first version with clear constraints
A good first result starts not with a long prompt, but with a prompt whose goals and selection criteria are clear.
- Spend about 5 minutes structuring five conditions.
- The target customer and the problem to solve
- A single CTA that runs through the entire page
- Reference images to use
- The technology stack such as Astro, Tailwind CSS, and Cloudflare Pages
- Expressions you want to avoid, such as purple gradients or Inter
- Let Claude Code implement the first version for about 6 minutes.
- Restrict it so it does not reproduce the layout of the references exactly.
- Make it combine the strengths of multiple references to fit the project’s purpose.
3. Refine the details in order
Rather than revising the first result all at once, it is more stable to request design elements separately.
- Carry out four rounds of improvement in sequence over 1 to 2 hours.
- Check the size, weight, and contrast of the typography
- Adjust the spacing between sections and the spacing between elements
- Add motion and animations with a clear purpose
- Correct the mobile layout based on a 375px screen
- Include only one improvement goal in each request.
- Move on to the next step after visually confirming the result of the change.
- Allocate more time to typography and spacing than to feature implementation.
4. Deploy with GitHub and Cloudflare Pages
In the final step, turn the completed static site into something that can be made public in about 15 minutes.
- Connect the project to a GitHub repository and deploy with Cloudflare Pages.
- You can reduce the cost of static site hosting.
- Once deployment is complete, connect your own domain.
- The time allocation for the entire process is also relatively clear.
- About 1 hour is needed for preparation, first-version creation, and deployment.
- Use an additional 1 to 2 hours for the detail improvements that determine the final quality.
