Seedance 4K + Claude = webs de otro nivel

Lorena Bordonaba - Vibe Marketing OS

Resumen

Este vídeo te guía paso a paso para crear y desplegar una página web profesional combinando Claude Code, V0 y 21st.dev. Aprenderás a integrar componentes de diseño, añadir animaciones de personajes generadas con modelos como Seedance y optimizar el sitio para que sea responsive y ligero. Además, el tutorial cubre el proceso completo de despliegue en GitHub y Vercel, permitiéndote tener tu web funcionando en internet de forma gratuita y eficiente.

Capítulos

  1. 0:00Introducción al diseño web avanzado
  2. 0:20Evitando diseños genéricos
  3. 1:06Selección de componentes en 21st.dev
  4. 1:45Importación en Claude Code
  5. 2:39Instalación de dependencias
  6. 2:54Previsualización local del proyecto
  7. 4:46Personalización del diseño con lenguaje natural
  8. 6:16Generación de personajes IA con Seedance
  9. 7:17Eliminación de fondo y canal alfa
  10. 8:26Optimización responsive y peso de archivos
  11. 9:21Publicación del proyecto en GitHub
  12. 9:48Despliegue final mediante Vercel

Temas tratados

  • Uso de plantillas con V0 y 21st.dev
  • Integración en Claude Code

+5 temas más (contenido completo al seguir el canal)

Extracto de la transcripción

En el vídeo de hoy te traigo cómo diseñar páginas webs bonitas utilizando Cloud Code y diferentes modelos de imagen y vídeo como Sidans. Vas a poder hacerlo con tus propias ideas o siguiendo la misma que yo voy a utilizar porque te voy a dejar todos los elementos que utilicé en la descripción. Además, al final del vídeo te enseñaré también cómo puedes publicar esta página web. Así que vayamos a ello. Lo habitual es empezar con un prompt y esto es un error porque si no tenemos nada previo configurado como skills o system designs, lo que va a ocurrir es que vamos a sacar un diseño totalmente genérico, seguramente con degradados y color morado. En este caso vamos a partir de componentes que ya han hecho otros diseñadores y que sí que tendrán ese ojo técnico si nosotros no sabemos diseñar. Para hacerlo tenemos dos páginas que son las más conocidas dentro del mundo del desarrollo. La primera…