Cómo vender webs con IA en 2027: de la idea a la propuesta comercial

1. Define qué estás vendiendo antes de abrir la IA

Para este proyecto, el encargo se puede resumir así: crear una presentación digital de la panadería que permita ver su producto, localizar el negocio y consultar por un posible suministro profesional.

Eso ayuda a decidir qué debe aparecer en la página. Si alguien quiere saber dónde está la tienda, necesita encontrar la ubicación. Si busca pan para su restaurante, necesita entender si puede consultar por ese servicio y cómo hacerlo.

También delimita el trabajo: esta primera propuesta es una web informativa con catálogo. No incluye un proceso de compra online. Añadir carrito, pagos y gestión de pedidos tendría que responder a una necesidad confirmada y presupuestarse con su propio alcance.

Antes de diseñar, escribiría una frase con esta estructura:

Ayudo a [tipo de negocio] a presentar [su producto o servicio] y facilitar [una acción concreta] mediante una web adaptada a su marca.

Es un buen filtro: si una sección no ayuda a explicar el negocio, mostrar el producto o facilitar la siguiente acción, merece una revisión.

2. Entiende el negocio y revisa su competencia

Antes de elegir un diseño, reúne la información disponible: fotografías, productos, ubicación, horarios, canales de contacto y servicios confirmados. En este caso, el Perfil de Empresa de Google sirvió como punto de partida para los materiales y el contexto del negocio.

Que una fotografía sea pública no significa que puedas reutilizarla libremente. Para una web comercial, trabaja con imágenes propias del cliente o con permiso de su titular, especialmente si aparecen fotos subidas por usuarios.

Después revisa varias webs de negocios comparables. La pregunta útil es: ¿qué puede resolver aquí un visitante y qué le cuesta encontrar?

• ¿Se entiende qué venden al entrar?
• ¿Las fotografías permiten apreciar el producto?
• ¿Se ven la ubicación y el horario desde el móvil?
• ¿Hay una forma clara de contactar?
• ¿Explican servicios para restaurantes o comercios, cuando los ofrecen?

Anota hechos observables. Si una web no muestra un servicio, eso no demuestra que el negocio no lo ofrezca; únicamente describe lo que has encontrado en esa página.

Prompt para organizar el análisis

Voy a preparar una web informativa para una panadería.
Objetivos: presentar producto, facilitar visitas y recibir consultas de profesionales.

Te adjunto información del negocio y capturas de varias webs de su competencia.
Analiza únicamente lo que puedes observar en los materiales.

Organiza la respuesta en:
1. Información confirmada del negocio.
2. Preguntas pendientes para el cliente.
3. Qué resuelven bien las webs analizadas.
4. Fricciones observables para un visitante móvil.
5. Oportunidades que podríamos trabajar en nuestra web.
6. Propuesta de secciones, justificando la función de cada una.

Separa hechos, inferencias y propuestas.
No inventes tráfico, ventas, posiciones, servicios ni debilidades de los competidores.
Si no puedes abrir una URL, indícalo y trabaja con las capturas.

3. Usa Dribbble para concretar la dirección visual

Una instrucción como «haz una web premium» deja demasiadas decisiones abiertas. En este proyecto utilicé Dribbble como referencia visual para convertir una intención en decisiones que pudiera explicar a la IA.

Puedes buscar conceptos como bakery website, artisan bread o coffee shop landing page. Lo útil es seleccionar unas pocas referencias y señalar qué te interesa de cada una.

• Composición: cuánto espacio ocupa la imagen y dónde se coloca el texto.
• Tipografía: el contraste entre titulares con personalidad y textos fáciles de leer.
• Color: la relación entre fondos, texto y acentos.
• Ritmo: cómo alternan fotografías, productos y bloques de información.

Una referencia también puede tener elementos que no quieras trasladar: un menú difícil de usar, texto pequeño o una composición que solo funciona en escritorio. Señalarlo ayuda a orientar el resultado.

Prompt para traducir las referencias en instrucciones

Te adjunto referencias visuales para una web de panadería.
Úsalas para definir una dirección de diseño propia.

De la referencia 1 me interesa: [composición y tratamiento de imágenes].
De la referencia 2 me interesa: [tipografía y espaciado].
De la referencia 3 me interesa: [paleta o forma de mostrar productos].
Evita: [elementos concretos que no encajan].

Antes de programar, propone:
- Jerarquía tipográfica.
- Paleta con funciones para cada color.
- Sistema de espaciado y anchos de contenido.
- Tratamiento de fotografías y botones.
- Adaptación de la composición a móvil.

Explica cómo estas decisiones encajan con una panadería.
No copies textos, logotipos, ilustraciones ni una composición completa.
Si no puedes ver alguna referencia, avísame.

4. Elige una paleta que acompañe al producto

Para la propuesta de La Tahona trabajamos una gama de marrones, tonos cálidos y fondos crema. La intención era que las fotografías de panadería tuvieran protagonismo y que el conjunto transmitiera una sensación cuidada y cercana.

Esta fue la paleta de partida. Los usos de la tabla sirven como guía para aplicarla:

La paleta debe comprobarse en componentes reales. Un acento puede funcionar como decoración y resultar poco legible en un botón. Revisa especialmente el contraste del texto, los estados de foco y los titulares sobre fotografías.

5. Organiza la home alrededor de las preguntas del visitante

El planteamiento inicial separaba inicio, productos, profesionales y contacto. Al revisar la primera versión, varias páginas quedaban demasiado escuetas. Por eso pedí reunir el contenido en una home más desarrollada y dejar la ampliación del catálogo para una fase posterior.

Para esta primera fase, una estructura útil es:

1. Presentación: qué negocio es, dónde está y qué puede hacer el visitante.
2. Producto: fotografías y categorías confirmadas.
3. La panadería: una breve explicación basada en información real.
4. Profesionales: una invitación a consultar sobre suministro, sin condiciones inventadas.
5. Ubicación y contacto: dirección, horario y canales verificados.

Los enlaces del menú pueden llevar a estas secciones. Cuando una categoría tenga suficiente contenido o necesite resolver una búsqueda específica, podremos valorar darle una página propia.

Prompt para reunir las páginas en una home

Revisa la implementación actual antes de modificarla.
Los colores y la dirección visual encajan, pero varias páginas tienen poco contenido.

Integra el contenido útil de productos, negocio, profesionales y contacto en una home coherente.
Usa anclas de navegación y cuida que los encabezados no queden ocultos por el menú.

Conserva los componentes reutilizables y prepara el catálogo para poder ampliarlo después.
Evita repetir textos o alargar secciones con contenido de relleno.
No inventes historia, servicios, productos ni testimonios.

Antes de eliminar rutas, comprueba si están publicadas, enlazadas o indexadas.
Si lo están, propone el tratamiento de sus URLs y las redirecciones necesarias.
Después comprueba el menú móvil, enlaces, jerarquía de títulos y recorrido de contacto.

6. Pasa a Codex un encargo con contexto y recursos

La calidad del primer resultado depende en parte de lo concreto que sea el encargo. Conviene darle a la IA objetivos, materiales, referencias, límites y una forma de comprobar si ha terminado.

En este caso el desarrollo se planteó con Next.js, App Router, TypeScript y Tailwind. Esa elección forma parte del proyecto; la misma preparación del encargo se puede adaptar a otras tecnologías.

Prompt base para crear la web

Inspecciona el repositorio y sus instrucciones antes de realizar cambios.
Trabajaremos en una web informativa de La Tahona de El Escorial.

OBJETIVO
Presentar el negocio y su producto, facilitar visitas a la tienda y consultas de profesionales.
La primera fase es un catálogo informativo, sin compra online.

RECURSOS
- Información confirmada: [adjuntar documento].
- Fotografías autorizadas: [indicar rutas y contenido de cada archivo].
- Referencias visuales: [adjuntar capturas y explicar qué tomar de cada una].
- Datos de contacto y horarios: [incluir solo los verificados].

DISEÑO
Paleta: #291C16, #4B3225, #BE8348, #F5EDDF, #FFF9F1.
Titulares serif con personalidad y texto sans serif legible.
Fotografía protagonista, composición cálida y espaciado cuidado.
Define primero cómo adaptarás la propuesta a móvil.

ESTRUCTURA
Home con presentación, productos, negocio, profesionales y contacto/ubicación.
Usa navegación por anclas y componentes reutilizables.

IMPLEMENTACIÓN
Adáptate a la estructura del proyecto Next.js/App Router/TypeScript/Tailwind.
Prioriza HTML semántico, accesibilidad e imágenes optimizadas.
No añadas dependencias si el proyecto ya permite resolver la necesidad.
Centraliza los datos del negocio para facilitar cambios posteriores.

LÍMITES
No inventes reseñas, años de experiencia, certificados, productos o condiciones de suministro.
Los datos desconocidos deben quedar como pendientes de revisión, sin publicarse como hechos.
No muestres formularios que aparenten enviar si no existe un envío real.

ENTREGA
Implementa la propuesta y ejecuta las comprobaciones disponibles del proyecto.
Resume qué has cambiado, qué has verificado y qué falta confirmar antes de publicar.

Acompaña este prompt con los recursos. Si una imagen tiene un nombre ambiguo, explica qué contiene y dónde quieres utilizarla. Y revisa los textos generados: conocer el nombre de un negocio no permite deducir su historia, sus ingredientes o sus servicios.

7. Itera con cambios concretos: el ejemplo del vídeo de portada

Tras la primera versión, uno de los cambios que pedí fue sustituir la imagen inicial por un vídeo de presentación con una capa oscura para mantener la legibilidad.

También revisé el peso del recurso: el vídeo pasó de unos 14 MB a unos 7 MB después de optimizarlo. Esa reducción es una mejora del archivo; el rendimiento de la página necesita comprobarse con la implementación real.

Prompt para integrar el vídeo sin descuidar la carga

Sustituye el fondo del hero por el vídeo situado en public/video/presentation.mp4.
Mantén una composición cuidada y una capa oscura que permita leer el texto.

Requisitos:
- Incluye una imagen poster optimizada y dimensiones estables.
- Si hay reproducción automática, debe ser sin sonido y compatible con reproducción inline.
- Para prefers-reduced-motion, muestra la imagen estática sin descargar el vídeo.
- Cuando el navegador indique ahorro de datos, prioriza también la imagen estática.
- Aplica esa decisión antes de asignar el src; ocultar el vídeo con CSS no evita su descarga.
- Usa una estrategia de carga acorde con el vídeo de fondo y comprueba la pestaña Network.
- No dependas del vídeo para comunicar información esencial.
- Comprueba recorte, contraste, botones y estabilidad en móvil y escritorio.

Explica la estrategia elegida y verifica que no genera descargas duplicadas.

Para dirigir las siguientes iteraciones, describe el problema que ves: «el producto queda demasiado abajo», «esta imagen se recorta mal en móvil» o «hay demasiadas llamadas a la acción». Cada observación ofrece una dirección concreta de mejora.

8. Revisa la web antes de enseñarla

La demo debe permitir recorrer la propuesta sin enlaces rotos ni acciones confusas. Revisa desde un móvil real el menú, las fotografías, el contacto y la ubicación. Comprueba también que cualquier dato visible corresponde a información confirmada.

En SEO local, prepara una base coherente: nombre del negocio, dirección, teléfono, horarios y contenido que explique su actividad. Los datos estructurados de empresa local pueden describir esa información de forma estandarizada, siguiendo la documentación de Google sobre LocalBusiness.

Crear la web no garantiza subir posiciones en Google Maps. Google explica que los resultados locales dependen principalmente de la relevancia, la distancia y la popularidad. La web forma parte del trabajo de presencia digital, pero una mejora de posicionamiento debe medirse, no darse por hecha. Puedes consultar la guía oficial sobre posicionamiento local.

Si publicas una demo temporal, identifícala como propuesta y aplica la configuración adecuada para evitar su indexación. Antes de lanzar la web definitiva, revisa dominio, metadatos, URLs, sitemap y configuración de indexación.

Para evaluar el proyecto tras el lanzamiento, define desde el principio qué medirás: visitas orgánicas, clics de contacto o consultas recibidas. Un clic en un botón y una venta son eventos distintos.

9. Convierte el trabajo en una propuesta fácil de entender

En el vídeo, el proceso continúa con la preparación de una propuesta en PDF y un email para presentarla. La demo muestra la experiencia; el documento explica el alcance y la inversión; el email ayuda al cliente a encontrar ambos.

La demo: una primera versión que se pueda recorrer

Una demo permite comentar decisiones concretas: si las fotografías representan bien al negocio, si falta una categoría o si el contacto está en el lugar adecuado. Preséntala con su alcance y sus pendientes, para que el cliente sepa qué está revisando.

Conviene delimitar cuánto trabajo adelantas. Para una primera propuesta, céntrate en mostrar la dirección visual y el recorrido principal; las integraciones y ampliaciones deben responder al alcance acordado.

El PDF: del problema a la inversión

Para este caso preparamos cuatro bloques: presentación, oportunidad, competencia y web e inversión. Cada bloque necesita una imagen que respalde lo que estás explicando.

• Presentación: la web en ordenador y móvil.
• Oportunidad: una necesidad observable del negocio.
• Competencia: capturas que permitan entender la comparación.
• Web e inversión: entregables, límites, precio y siguiente paso.

La oferta debe dejar claro qué incluye la creación, qué materiales debe aportar el cliente y cómo se tratarán el alojamiento, el mantenimiento y los cambios posteriores. Si el SEO es un servicio adicional, concreta sus tareas y su seguimiento.

Prompt para redactar la propuesta

Prepara el contenido de una propuesta comercial para esta web.
Te adjunto el análisis, capturas de la demo y el alcance confirmado.

Organízala en cuatro bloques:
1. Presentación del proyecto.
2. Oportunidad detectada, apoyada en hechos observables.
3. Competencia, con una comparación respetuosa y verificable.
4. Solución, entregables, inversión y siguiente paso.

Relaciona cada entrega con su utilidad para el negocio.
Distingue creación, alojamiento, mantenimiento y SEO, cuando proceda.
Utiliza solo precios, plazos y condiciones que yo haya facilitado.
Si falta un dato, márcalo para revisión.
No prometas posiciones, tráfico, consultas o ventas garantizadas.

Añade una lista final de puntos que debo comprobar antes de enviarla.

El email: una invitación clara a revisar el trabajo

El email necesita contexto, una imagen representativa y un siguiente paso. En nuestro caso, la idea era utilizar la web en ordenador y móvil como cabecera, invitar a explorar la demo y leer el PDF, y facilitar el contacto desde mi web.

No hace falta trasladar toda la propuesta al cuerpo del mensaje. Explica qué has preparado, por qué puede interesarle al cliente y dónde puede verlo.

Redacta un email breve para presentar una propuesta de web a un cliente
que ya ha solicitado información sobre el proyecto.

Materiales:
- Imagen de cabecera: [URL pública de la web en ordenador y móvil].
- Demo: [URL real].
- Propuesta: PDF adjunto.
- Contacto: https://www.andresbasurto.com/

Incluye un asunto concreto, una introducción personalizada,
un enlace descriptivo a la demo, una mención al PDF adjunto
y un siguiente paso fácil de responder.

Explica el beneficio de la propuesta con la información confirmada.
Evita urgencia ficticia, promesas de ingresos y resultados SEO garantizados.
No afirmes que el cliente ha aprobado el proyecto.

10. Checklist para repetir este proceso en otro negocio

• He definido el objetivo y la acción principal de la web.
• Tengo información verificada y permiso para utilizar las imágenes.
• He revisado competidores con observaciones concretas.
• Puedo explicar qué tomo de cada referencia visual.
• La paleta, la tipografía y las fotos funcionan juntas.
• Las secciones responden a preguntas reales del visitante.
• Los prompts incluyen recursos, límites y criterios de entrega.
• He comprobado móvil, enlaces, contacto y carga de recursos.
• La demo se presenta como propuesta y tiene controlada su indexación.
• El PDF concreta alcance, inversión, pendientes y condiciones.
• El email facilita revisar la propuesta y responder.

El caso de La Tahona muestra cómo encadeno esas decisiones: del negocio a las referencias, de las referencias al desarrollo y del resultado a una propuesta comercial. La IA acelera partes del trabajo; revisar el encargo y tomar decisiones sigue formando parte del servicio.

Preguntas frecuentes sobre crear y vender webs con IA

¿Necesito saber programar para seguir este proceso?

Los prompts ayudan a organizar el encargo, pero debes poder revisar lo que entregas. En un proyecto con código, entender errores, despliegue, formularios y mantenimiento permite comprobar si la web funciona y sostenerla después.

¿Tengo que utilizar Next.js?

Es la tecnología planteada para este caso. La elección depende del proyecto y de quién vaya a mantener el contenido. La investigación, las referencias y la preparación de la propuesta pueden adaptarse a otras herramientas.

¿Cuánto puedo cobrar por una web así?

Define primero el alcance: páginas o secciones, contenido, diseño, integraciones, revisiones y puesta en producción. Después calcula el trabajo y las responsabilidades. Esta guía no fija una tarifa ni presenta como cerrado el presupuesto de este caso.

¿Puedo prometer más clientes?

Puedes comprometer entregables y un trabajo de seguimiento concreto. Las consultas y ventas dependen también de la demanda, la oferta y la atención del negocio; cualquier resultado debe demostrarse con datos.

¿Quieres una web que presente mejor tu negocio?

Si tienes un negocio y quieres trabajar su web y su presencia digital, puedes ver mis proyectos y contarme qué necesitas.

Ver mis proyectos y contactar conmigo