Build and Publish a Website with Claude Code Desktop

Search Dribbble for a Website Design You Like

Open Dribbble

https://dribbble.com

Choose One Design Direction

Take a Screenshot and Save It

Create or Collect Your Website Visuals

Create custom visuals with Google Flow, download ready-made content from Pexels, or use real business assets.

Open Google Flow

https://labs.google/fx/tools/flow

Open Pexels

https://www.pexels.com

Generate a Website Image

Create one website-ready Google Flow image prompt.

Create one premium, photorealistic, website-ready image for {{BUSINESS_TYPE}}. The image should show {{IMAGE_TYPE}}, shot in a {{VISUAL_STYLE}} style. Aim for {{MOOD}}. For colors, use {{BRAND_COLORS}}. Make it realistic and high-end, like professional commercial photography: clean, well lit, and uncluttered, with natural depth, sharp detail, and calm empty space where website text can sit on top. Generate one single, final, website-ready image only, and set its aspect ratio to {{ASPECT_RATIO}}. Do not create multiple variations, a collage, an image grid, a contact sheet, a split-screen or multi-panel composition, or several images combined into one result — return exactly one image. Avoid text, logos, watermarks, distorted faces or hands, busy or distracting backgrounds, heavy filters, neon glow, and any obviously AI-generated look.

Open Google Flow

Business or Project Type

Choose an option

Image Type

Choose an option

Visual Style

Choose an option

Brand Colors

Choose an option

Mood

Choose an option

Aspect Ratio

Choose an option

Generate a Hero Video

Create a cinematic Google Flow video prompt.

Create a short, cinematic background video for the hero section of {{BUSINESS_TYPE}}. It should show {{VIDEO_SUBJECT}}, filmed using {{CAMERA_MOVEMENT}}. Aim for {{VISUAL_MOOD}}. The overall style should be {{BRAND_STYLE}}. Keep the clip short and easy to loop, around 5 to 10 seconds, with smooth, slow, steady motion. Make it premium and realistic, like a high-end commercial, and simple enough that a headline stays readable on top of it. Keep the lighting and color consistent with a professional website. Avoid text, logos, watermarks, fast cuts, shaky or jarring movement, distorted faces or hands, busy backgrounds, and any obviously AI-generated look. Deliver the video in {{VIDEO_ORIENTATION}}.

Open Google Flow

Business or Project Type

Choose an option

Subject or Scene

e.g. steam rising from fresh coffee on a wooden counter

Camera Movement

Choose an option

Visual Mood

Choose an option

Brand Style

Choose an option

Video Orientation

Choose an option

Organize Your Website Assets

Place the website images and hero video inside an assets folder. Keep the design inspiration screenshot outside it.

Install and Sign In to Claude Desktop

Download Claude Desktop

https://claude.ai/download

Create a Folder for the Website Project

Add the Assets Folder and Inspiration Screenshot

Open the Project in Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

Install the Frontend-Design Claude Skill

frontend-design

Install the frontend-design Claude Skill from https://github.com/anthropics/skills/tree/main/skills/frontend-design for my user account. Inspect the SKILL.md and LICENSE.txt files first, then copy the complete frontend-design folder to ~/.claude/skills/frontend-design while preserving its structure. Confirm when it is installed and ready to use.

Customize the Website Prompt

Build the Website

Create a complete website build prompt using your business details and prepared visual references.

Build a premium, visually impressive website for my business using the brief below. BUSINESS Business name: {{BUSINESS_NAME}} Business type: {{BUSINESS_TYPE}} Location: {{BUSINESS_LOCATION}} Main services: {{MAIN_SERVICES}} {{CONTACT_DETAILS}} Additional information: {{EXTRA_INFO}} DESIGN DIRECTION Brand colors: {{BRAND_COLORS}} Visual style: {{VISUAL_STYLE}} Main call to action: {{MAIN_CTA}} Sections: {{WEBSITE_SECTIONS}} Use the inspiration screenshot in this project folder as the visual direction. Match its layout feel, spacing, and quality level. Do not copy it exactly, and do not reuse its brand, logo, or text. ASSETS Use the images, logo, and video inside the assets folder in this project folder. Use the hero video wherever it makes the design stronger, and keep the headline readable on top of it. Do not use placeholder or stock images when a real file exists in the assets folder. WHAT TO BUILD Build a complete static website using only HTML, CSS, and JavaScript. If you ask me to choose a project type, use a multi-file static site. Name the main file index.html. Organize every required file clearly inside this project folder. Make the website: - premium, modern, and visually impressive - fully responsive on desktop, tablet, and mobile - built around a memorable, visually strong hero section - premium in its typography, with polished spacing and clear visual hierarchy - smooth, with tasteful animations and interactive details - easy to navigate, with clear navigation and obvious calls to action Avoid: - a generic AI-generated appearance - cluttered layouts, excessive gradients, or neon glow - placeholder text left in the final result - broken links or empty sections - React, Vite, npm, a build step, a backend, or a database Before you start building, ask me any essential questions if important information is missing. Do not invent contact details, prices, reviews, awards, or business claims. Use clearly editable placeholders instead.

Optional extra details. Leave them empty if you're not sure — Claude will ask if it needs them.

Business Name

e.g. Apex Auto Detail

Business Type

Choose an option

Location

e.g. Lisbon, Portugal

Main Services

Phone Number

Optional

Email Address

Optional

Address

Optional

Contact Details

Brand Colors

Choose an option

Preferred Visual Style

Choose an option

Website Sections

Choose an option

Main Call to Action

Choose an option

Anything Else About the Business

Optional — opening hours, service area, what makes the business different…

Build and Preview the Website

Paste the prompt into Claude Desktop, send it, and open the first preview when the build is ready.

Review and Refine the Website

Check the desktop and mobile layouts, then describe any changes or attach a screenshot if needed.

Open Hostinger

Open Hostinger

Open your Hostinger dashboard to upload and publish the website.

https://www.hostg.xyz/SHJlq

Set Up the Website Migration

Hostinger Add Website Migrate an Existing Website Upload Website or Backup Files

Choose a Domain

Select a temporary domain, claim an included domain, or connect one you already own.

Upload the Website ZIP

Compress the files and folders inside the project directory—not the parent project folder—so index.html remains at the root of the ZIP.

Test the Live Website

Open the selected domain and confirm the website works correctly on desktop and mobile.