Xây dựng và xuất bản website với Claude Code Desktop

Tìm trên Dribbble một thiết kế website bạn thích

Mở Dribbble

https://dribbble.com

Chọn một hướng thiết kế

Chụp màn hình và lưu lại

Tạo hoặc thu thập hình ảnh cho website của bạn

Tạo hình ảnh riêng bằng Google Flow, tải nội dung có sẵn từ Pexels, hoặc dùng tài nguyên thật của doanh nghiệp.

Mở Google Flow

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

Mở Pexels

https://www.pexels.com

Tạo một ảnh cho website

Tạo một prompt ảnh Google Flow sẵn sàng dùng cho website.

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.

Mở Google Flow

Loại hình doanh nghiệp hoặc dự án

Chọn một tùy chọn

Loại ảnh

Chọn một tùy chọn

Phong cách hình ảnh

Chọn một tùy chọn

Màu thương hiệu

Chọn một tùy chọn

Tông cảm xúc

Chọn một tùy chọn

Tỷ lệ khung hình

Chọn một tùy chọn

Tạo video hero

Tạo một prompt video mang tính điện ảnh cho Google Flow.

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}}.

Mở Google Flow

Loại hình doanh nghiệp hoặc dự án

Chọn một tùy chọn

Chủ thể hoặc bối cảnh

ví dụ hơi nóng bốc lên từ ly cà phê mới pha trên mặt quầy gỗ

Chuyển động camera

Chọn một tùy chọn

Tông cảm xúc hình ảnh

Chọn một tùy chọn

Phong cách thương hiệu

Chọn một tùy chọn

Hướng video

Chọn một tùy chọn

Sắp xếp tài nguyên website của bạn

Đặt hình ảnh website và video hero vào thư mục assets. Giữ ảnh chụp màn hình tham khảo thiết kế ở bên ngoài thư mục đó.

Cài đặt và đăng nhập Claude Desktop

Tải Claude Desktop

https://claude.ai/download

Tạo thư mục cho dự án website

Thêm thư mục tài nguyên và ảnh chụp màn hình tham khảo

Mở dự án trong Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

Cài đặt Claude Skill frontend-design

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.

Tùy chỉnh prompt cho website

Xây dựng website

Tạo một prompt dựng website hoàn chỉnh từ thông tin doanh nghiệp và các tham chiếu hình ảnh đã chuẩn bị.

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.

Thông tin bổ sung không bắt buộc. Cứ để trống nếu bạn chưa chắc — Claude sẽ hỏi khi cần.

Tên doanh nghiệp

ví dụ Apex Auto Detail

Loại hình doanh nghiệp

Chọn một tùy chọn

Vị trí

ví dụ Lisbon, Bồ Đào Nha

Dịch vụ chính

Số điện thoại

Tùy chọn

Địa chỉ email

Tùy chọn

Địa chỉ

Tùy chọn

Thông tin liên hệ

Màu thương hiệu

Chọn một tùy chọn

Phong cách hình ảnh ưa thích

Chọn một tùy chọn

Các mục của website

Chọn một tùy chọn

Lời kêu gọi hành động chính

Chọn một tùy chọn

Điều gì khác về doanh nghiệp

Tùy chọn — giờ mở cửa, khu vực phục vụ, điều gì làm doanh nghiệp khác biệt…

Dựng và xem trước website

Dán prompt vào Claude Desktop, gửi đi, rồi mở bản xem trước đầu tiên khi quá trình dựng hoàn tất.

Xem lại và tinh chỉnh website

Kiểm tra bố cục trên máy tính và điện thoại, sau đó mô tả các thay đổi hoặc đính kèm ảnh chụp màn hình nếu cần.

Mở Hostinger

Mở Hostinger

Mở bảng điều khiển Hostinger của bạn để tải lên và xuất bản website.

https://www.hostg.xyz/SHJlq

Thiết lập việc chuyển website

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

Chọn tên miền

Chọn một tên miền tạm thời, nhận tên miền đi kèm, hoặc kết nối tên miền bạn đã sở hữu.

Tải lên tệp ZIP của website

Nén các tệp và thư mục bên trong thư mục dự án — không phải thư mục cha — để index.html nằm ở gốc của tệp ZIP.

Kiểm tra website đang chạy

Mở tên miền đã chọn và xác nhận website hoạt động đúng trên máy tính và điện thoại.