Crie e publique um site com o Claude Code Desktop

Procure no Dribbble um design de site de que goste

Abrir o Dribbble

https://dribbble.com

Escolha uma única direção de design

Tire uma captura de ecrã e guarde-a

Crie ou reúna os visuais do seu site

Crie visuais personalizados com o Google Flow, descarregue conteúdo pronto do Pexels ou use recursos reais do negócio.

Abrir o Google Flow

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

Abrir o Pexels

https://www.pexels.com

Gere uma imagem para o site

Crie um prompt de imagem do Google Flow pronto para o site.

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.

Abrir o Google Flow

Tipo de negócio ou projeto

Escolha uma opção

Tipo de imagem

Escolha uma opção

Estilo visual

Escolha uma opção

Cores da marca

Escolha uma opção

Atmosfera

Escolha uma opção

Proporção

Escolha uma opção

Gere um vídeo hero

Crie um prompt de vídeo cinematográfico do 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}}.

Abrir o Google Flow

Tipo de negócio ou projeto

Escolha uma opção

Assunto ou cena

ex.: vapor subindo de um café fresco sobre uma bancada de madeira

Movimento de câmera

Escolha uma opção

Atmosfera visual

Escolha uma opção

Estilo da marca

Escolha uma opção

Orientação do vídeo

Escolha uma opção

Organize os recursos do seu site

Coloque as imagens do site e o vídeo principal dentro de uma pasta assets. Mantenha a captura de inspiração fora dela.

Instale o Claude Desktop e inicie sessão

Baixar o Claude Desktop

https://claude.ai/download

Crie uma pasta para o projeto do site

Adicione a pasta de recursos e a captura de inspiração

Abra o projeto no Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

Instale a skill frontend-design do Claude

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.

Personalize o prompt do site

Construa o site

Crie um prompt completo de construção do site com os dados do seu negócio e as referências visuais preparadas.

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.

Detalhes adicionais opcionais. Deixe-os vazios se não tiver a certeza — o Claude pedirá se precisar.

Nome do negócio

ex.: Apex Auto Detail

Tipo de negócio

Escolha uma opção

Localização

ex.: Lisboa, Portugal

Serviços principais

Número de telefone

Opcional

Endereço de e-mail

Opcional

Endereço

Opcional

Dados de contato

Cores da marca

Escolha uma opção

Estilo visual preferido

Escolha uma opção

Seções do site

Escolha uma opção

Chamada para ação principal

Escolha uma opção

Qualquer outra coisa sobre o negócio

Opcional — horário de funcionamento, área de atendimento, o que torna o negócio diferente…

Construa e pré-visualize o site

Cole o prompt no Claude Desktop, envie-o e abra a primeira pré-visualização quando a compilação estiver pronta.

Reveja e aperfeiçoe o site

Verifique os layouts de computador e telemóvel e descreva as alterações ou anexe uma captura se for necessário.

Abrir a Hostinger

Abrir a Hostinger

Abra seu painel do Hostinger para enviar e publicar o site.

https://www.hostg.xyz/SHJlq

Configure a migração do site

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

Escolha um domínio

Selecione um domínio temporário, reclame um domínio incluído ou ligue um que já possua.

Carregue o ZIP do site

Comprima os ficheiros e pastas dentro do diretório do projeto — e não a pasta principal — para que index.html fique na raiz do ZIP.

Teste o site em direto

Abra o domínio escolhido e confirme que o site funciona corretamente em computador e telemóvel.