Heidelberg AICurriculum

Build AMAZING Websites Using Claude Code! (Full Guide)

AI Foundations ·2026-08-04 ·2 min read

Summary written by us from the video's transcript. The video, and everything in it, is AI Foundations's work.

Learn how to build and launch a website using Claude Code and Hostinger, from brand definition through design system creation to deployment and admin dashboard setup.

Takeaways

  • Claude acts as both designer and developer, letting you iterate with plain‑English prompts.
  • The entire workflow—from brand brief to live site—can be completed in about 30 minutes for a modest monthly cost.
  • You retain full control of files and hosting; Hostinger hosts the site while Claude handles code generation.
  • Design decisions are made by mixing AI‑generated style options, which you can refine via spoken or typed feedback.
  • A custom admin dashboard for lead capture can be added without writing any code yourself.

Tools and Pricing Overview

The workflow relies on two main tools: **Claude**, an AI assistant that handles brainstorming, design, and code generation, and **Hostinger**, which provides domain registration and hosting. Claude requires at least the $20‑per‑month plan to use Claude Code, while Hostinger can be as low as $3.79 / month with a free domain. Together the monthly cost can be under $24 when billed annually.

Defining Your Brand Essence

Start by filling out the brand essence prompt in Claude Desktop. Provide your business name, description, target audience, and any extra context (e.g., a human‑focused teaching approach). Answer five multiple‑choice questions about the site’s primary action, price positioning, differentiators, audience, and existing assets. Claude then generates a brand essence brief with scores that describe the desired tone (restrained vs. expressive, calm vs. energetic, etc.). Save this brief as a markdown file for later steps.

Creating Initial Design Directions in Claude Design

Upload the brand essence markdown to **Claude Design** and run the design prompt. Claude returns five distinct style concepts (e.g., warm paper study, clean workshop, evening desk dark). Review them, mix‑and‑match elements such as fonts, colors, or navigation styles, and give spoken or typed feedback to refine a preferred direction. You can also attach inspiration images from sites like 21st.dev or Pinterest to guide Claude’s output.

Building the Design System

Once you settle on a style (e.g., “Almanac refined light”), tell Claude to *build the design system*. Claude will interview you about required pages, key copy, numbers, free resources, refund policy, and assets like logos or photos. It then assembles a single source of truth for colors, typography, layout, navigation, button states, and other UI details that will be handed off to Claude Code.

Generating Code and Deploying with Claude Code

Switch to **Claude Code** (the coding harness) and feed it the completed design system. Claude translates the visual specifications into HTML/CSS/JS files, creates the necessary project structure, and prepares deployment scripts. Using the integrated prompt bar you can instruct Claude to push the site to Hostinger without leaving the interface—no manual FTP or server configuration is required.

Adding a Custom Admin Dashboard

After the site is live, use Claude Code again to create an admin dashboard for collecting leads, emails, or other data. Describe the fields you need (e.g., name, email) and any validation rules; Claude will generate the backend forms and storage logic, integrating it into your existing site.