Crea y publica un sitio web con Claude Code Desktop

Busca en Dribbble un diseño web que te guste

Abrir Dribbble

https://dribbble.com

Elige una única dirección de diseño

Haz una captura de pantalla y guárdala

Crea o reúne los recursos visuales de tu sitio web

Crea imágenes personalizadas con Google Flow, descarga contenido listo desde Pexels o usa recursos reales del negocio.

Abrir Google Flow

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

Abrir Pexels

https://www.pexels.com

Genera una imagen para el sitio web

Crea un prompt de imagen de Google Flow listo para el sitio web.

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 Google Flow

Tipo de negocio o proyecto

Elige una opción

Tipo de imagen

Elige una opción

Estilo visual

Elige una opción

Colores de marca

Elige una opción

Ambiente

Elige una opción

Relación de aspecto

Elige una opción

Genera un vídeo hero

Crea un prompt de vídeo cinematográfico de 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 Google Flow

Tipo de negocio o proyecto

Elige una opción

Sujeto o escena

p. ej. vapor subiendo de un café recién hecho sobre una encimera de madera

Movimiento de cámara

Elige una opción

Ambiente visual

Elige una opción

Estilo de marca

Elige una opción

Orientación del vídeo

Elige una opción

Organiza los recursos de tu sitio web

Coloca las imágenes del sitio y el vídeo principal dentro de una carpeta assets. Mantén fuera la captura de inspiración del diseño.

Instala Claude Desktop e inicia sesión

Descarga Claude Desktop

https://claude.ai/download

Crea una carpeta para el proyecto del sitio web

Añade la carpeta de recursos y la captura de inspiración

Abre el proyecto en Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

Instala la skill frontend-design de 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.

Personaliza el prompt del sitio web

Construye el sitio web

Crea un prompt completo de construcción del sitio con los datos de tu negocio y las referencias visuales 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.

Detalles adicionales opcionales. Déjalos vacíos si no estás seguro: Claude te los pedirá si los necesita.

Nombre del negocio

p. ej. Apex Auto Detail

Tipo de negocio

Elige una opción

Ubicación

p. ej. Lisboa, Portugal

Servicios principales

Número de teléfono

Opcional

Correo electrónico

Opcional

Dirección

Opcional

Datos de contacto

Colores de marca

Elige una opción

Estilo visual preferido

Elige una opción

Secciones del sitio web

Elige una opción

Llamada a la acción principal

Elige una opción

Cualquier otra cosa sobre el negocio

Opcional: horario de apertura, área de servicio, qué hace diferente al negocio…

Construye y previsualiza el sitio web

Pega el prompt en Claude Desktop, envíalo y abre la primera vista previa cuando la compilación esté lista.

Revisa y perfecciona el sitio web

Revisa los diseños de escritorio y móvil, y luego describe los cambios o adjunta una captura si es necesario.

Abrir Hostinger

Abrir Hostinger

Abre tu panel de Hostinger para subir y publicar el sitio web.

https://www.hostg.xyz/SHJlq

Configura la migración del sitio web

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

Elige un dominio

Selecciona un dominio temporal, reclama un dominio incluido o conecta uno que ya tengas.

Sube el ZIP del sitio web

Comprime los archivos y carpetas que están dentro del directorio del proyecto —no la carpeta principal— para que index.html quede en la raíz del ZIP.

Prueba el sitio web en vivo

Abre el dominio elegido y confirma que el sitio funciona correctamente en escritorio y móvil.