Una página web sencilla: la web de tu negocio, hecha desde tu información y publicada sin escribir código

Describe la tarea

La visión y la programación de Claude trabajan juntas para convertir tus descripciones y tus imágenes en una web que funciona. Con la información de tu negocio, Claude puede crear una página que cuente tu historia y respete tu estilo.

Dile que construya la página con los archivos que subes. Cuéntale tus preferencias de diseño y que necesitas que te guíe para publicarla. Copia esto en Claude y sube tus archivos (en el siguiente apartado tienes cuáles):

Ayúdame a crear una página HTML profesional para presentar mi negocio, [nombre y a qué se dedica]. He subido una presentación del negocio, el catálogo y algunos ejemplos de webs que me gustan. Úsalos para entender qué hacemos y qué estética quiero.

Para la dirección de diseño, quiero algo sofisticado y editorial, no una plantilla corporativa. Evita los diseños genéricos, los degradados con aspecto de IA y la simetría excesiva. Las webs que admiro (en los archivos que subo) tienen una calidad artesanal y detalles inesperados.

Incluye: quiénes somos, qué vendemos, cómo trabajamos, dónde estamos y un modo claro de contactar con nosotros. No inventes nada que no esté en lo que te he subido: si falta un dato, déjalo entre corchetes.

Cuando la termines, guíame para publicarla en internet. Asume que nunca he publicado una web: necesito pasos exactos que no requieran conocimientos de programación.

Dale contexto a Claude

Dale a Claude información sobre el negocio y sobre tus preferencias de diseño para que la página lo represente de verdad.

Contexto necesario: sube archivos que cuenten la historia del negocio: una presentación, el catálogo y los logros que quieras destacar. Añade también cualquier archivo que transmita tus gustos: capturas de webs que admiras o fragmentos de diseño que te gustan ayudan a Claude a entender la dirección estética.

Lo que Claude crea

Claude construye una página completa como artefacto HTML. Incluye la información de tu negocio, muestras de producto y las decisiones de diseño que casan con lo que pediste.

Prompts de seguimiento

Sigue la conversación con Claude para afinar, ampliar o profundizar.

Publica tu sitio

Claude puede conectarse a Netlify, tomar el código del artefacto y publicarlo como una web real, sin que tengas que programar. Y si no lo conectas, te enseña a hacerlo tú.

Con el código de mi artefacto, quiero crear una web real. Usa mi conector de Netlify, crea un nuevo proyecto de sitio y guíame para publicarla. Dame la dirección web cuando esté en línea y explícame cómo actualizar el sitio más adelante si quiero hacer cambios.

Crea efectos interactivos

Añade pulido con animaciones e interacciones. Claude escribe el HTML, el CSS y el JavaScript necesarios para efectos al pasar el ratón, animaciones al desplazarte o elementos que responden a lo que haga el visitante.

Añade efectos al pasar el ratón por las tarjetas de producto, quizá un cambio sutil de borde. Cuando me desplace a una sección, haz que el título aparezca poco a poco. Nada llamativo: solo interacciones cuidadas que muestren atención al detalle.

Convierte un producto en una página completa

Profundiza en lo más importante de tu catálogo.

Toma la línea [nombre de la línea] y conviértela en una página completa. Incluye para qué sirve, para quién es, las referencias disponibles en tabla, las preguntas más frecuentes de los clientes y cómo pedirla. No inventes datos técnicos: usa solo lo que te he subido.

Trucos, consejos y solución de problemas

Mejora el diseño de lo que sale

Claude a veces opta por elecciones de diseño más funcionales: fuentes estándar, colores por defecto, espaciado correcto. Para resultados más variados, haz referencia a un estándar de calidad («un estudio de diseño de primer nivel»), plantéale que actúe como un diseñador senior o pídele que puntúe y mejore su propio resultado. También puedes decirle qué no hacer («evita el azul corporativo genérico», «no uses la tipografía por defecto»). Llegar al resultado final puede pedir iterar: tras la primera versión, evalúa qué falta y pide mejoras.

Usa skills para mantener tus criterios de diseño

Crea una skill que reúna tus referencias visuales, ejemplos que te han gustado y tus preferencias de diseño para que Claude aplique tus criterios sin que los repitas cada vez. Pídele que te ayude a crear una skill de diseño que agrupe tus preferencias de formato, tu dirección estética y tus estándares de calidad.

¿Listo para probarlo tú mismo?

Trabaja con Claude para construir una página que represente tu negocio y aprende a publicarla, sin escribir código.

Ayúdame a crear una página HTML profesional para presentar mi negocio. He subido una presentación del negocio, el catálogo y webs que me gustan. Quiero algo sofisticado y editorial, no una plantilla corporativa. Cuando la termines, guíame para publicarla en internet: asume que nunca he publicado una web y necesito pasos exactos que no pidan conocimientos de programación.

En un comercio o una distribuidora de aquí, así se usa

Muchos comercios y distribuidoras de aquí tienen una web de hace diez años, o solo una ficha en Google, o ninguna. Con este caso, la persona que lleva marketing (o el dueño) sube lo que ya tiene (la presentación comercial, el catálogo en PDF, las fotos del local) y en un rato tiene una primera página de presentación que enseñar y que ajustar.

Si la web va a ser de una actividad económica, hay una obligación que se olvida mucho: en España, la ley de servicios de la sociedad de la información exige dar a conocer en la web datos de identificación del titular (denominación, domicilio, correo, NIF y, si procede, inscripción registral). Está en el artículo 10 de la Ley 34/2002. Pídele a Claude que prepare ese apartado con vuestros datos y que lo revise quien lleve lo legal.

Crea la página de presentación de [nombre del negocio], un [comercio / distribuidora] de [qué vendéis] en [ciudad]. Usa solo la información que te he subido. Incluye: quiénes somos, qué vendemos por líneas, qué servicios damos (reparto, asesoramiento, pedido por encargo), dónde estamos con el horario, y una forma de contacto sencilla (teléfono y correo). Añade al pie un apartado de «Aviso legal» con la identificación del titular: deja entre corchetes denominación social, NIF, domicilio, correo e inscripción registral si procede, para que yo los complete. No pongas precios ni plazos si no están en lo que te he subido.

Decides tú qué se publica. Claude construye la página; los textos, los precios, el aviso legal y los datos de contacto los revisa una persona de la empresa antes de que nadie los vea en internet.