irfanfaraaz/website-builder

Website Builder — Modificación de Plantilla + Despliegue en Netlify

Objetivo

Tomar una breve descripción de lo que el usuario quiere y producir una página de aterrizaje impresionante y lista para producción modificando una plantilla probada existente, no construyéndola desde cero. Luego, publicarla en Netlify y devolver la URL.

Entradas

• Nombre de la marca: El nombre de la empresa/proyecto
• Tesis central: Una frase sobre lo que es (o una URL para revisar)
• Vibra/estética: Cualquier dirección (por ejemplo, "oscuro tecnológico", "lujo clínico", "brutalista")
• Objetivo de conversión: Cuál debe ser el CTA (por defecto: agendar una llamada)

Ubicación de la Plantilla

La plantilla base está en website-template/ en la raíz del espacio de trabajo. Es un sitio completo y funcional con React + Vite + Tailwind v3 + GSAP que incluye:

Estructura

website-template/
├── src/
│   ├── App.jsx              # Layout raíz (importa todas las secciones)
│   ├── index.css            # Importaciones de Tailwind, overlay de ruido, scrollbar
│   ├── main.jsx             # Punto de entrada
│   └── components/
│       ├── Navbar.jsx        # Navegación flotante, reactiva al scroll
│       ├── Hero.jsx          # Hero a pantalla completa, imagen de fondo, revelación de texto con GSAP
│       ├── Features.jsx      # Sección con fondo claro y 3 micro-UI interactivas
│       ├── DiagnosticShuffler.jsx  # Widget de tarjetas apiladas con ciclo automático
│       ├── TelemetryTypewriter.jsx # Widget de máquina de escribir estilo terminal
│       ├── AdaptiveRegimen.jsx     # Selector de calendario con cursor animado
│       ├── Philosophy.jsx    # Fondo con paralaje, revelación de texto palabra por palabra
│       ├── Protocol.jsx      # Tarjetas de scroll apiladas (fijación con GSAP ScrollTrigger)
│       ├── Membership.jsx    # 3 niveles de precios con efectos hover
│       └── Footer.jsx        # Pie de página oscuro con columnas
├── tailwind.config.js        # Tokens de color, fuentes, border-radius
├── postcss.config.js         # PostCSS estándar + autoprefixer
├── vite.config.js            # Vite + plugin de React
├── package.json              # React 19, GSAP, Lucide, Tailwind v3
└── index.html

Stack Tecnológico (NO CAMBIAR)

• React 19 + Vite 7
• Tailwind CSS v3 (usa tailwind.config.js + directivas @tailwind — NO v4)
• GSAP 3 con ScrollTrigger
• Iconos Lucide React
• PostCSS + Autoprefixer

Sistema de Diseño (en tailwind.config.js)

colors:
  moss: '#070707'      — acento negro profundo
  clay: '#0026FF'      — azul tecnológico primario
  cream: '#EAEAEA'     — texto blanco hueso
  charcoal: '#070707'  — fondo oscuro primario

fonts:
  sans: Plus Jakarta Sans, Outfit
  serif: Cormorant Garamond
  mono: mono espacio del sistema

Proceso

Paso 1: Copiar la Plantilla

cp -R website-template/ nombre-del-sitio/
cd nombre-del-sitio
rm -rf node_modules
npm install

Paso 2: Personalizar para la Marca

Modifica estos archivos — NO reestructures ni reescribas desde cero:

1. tailwind.config.js — Cambia los tokens de color (moss, clay, cream, charcoal) y las fuentes para que coincidan con la estética de la marca. Los nombres de las clases permanecen igual, solo cambian los valores hexadecimales.

2. index.css — Actualiza la URL de importación de Google Fonts para que coincida con las nuevas opciones de fuente.

3. index.html — Actualiza la <title>.

4. Copiar en los componentes — Busca y reemplaza el texto específico de la marca en cada componente:

   • Navbar.jsx — Nombre de la marca, enlaces de navegación, texto del botón CTA
   • Hero.jsx — Título principal, subtítulo, eslogan, URL de la imagen de fondo
   • Features.jsx — Encabezado de sección, subtítulo
   • DiagnosticShuffler.jsx — Títulos de tarjetas, valores, tendencias (hazlos relevantes para la marca)
   • TelemetryTypewriter.jsx — Array de mensajes de escritura, etiquetas de estado
   • AdaptiveRegimen.jsx — Etiquetas del widget, texto del botón
   • Philosophy.jsx — Las dos declaraciones contrastantes, etiquetas de sección, imagen de fondo
   • Protocol.jsx — Títulos de pasos, descripciones, encabezado de sección
   • Membership.jsx — Nombres de niveles, precios, características, descripciones (o reemplaza con una sección CTA si no es necesario)
   • Footer.jsx — Nombre de la marca, eslogan, columnas de enlaces, copyright

5. Imágenes de Unsplash — Reemplaza las URL de imágenes de fondo en Hero.jsx y Philosophy.jsx con imágenes que coincidan con la marca. Usa el formato https://images.unsplash.com/photo-ID?w=2000&q=80.

Paso 3: Compilar y Desplegar

npm run build
npx netlify-cli deploy --prod --dir=dist --create-site nombre-del-sitio

Si el sitio ya está vinculado a Netlify:

npm run build
npx netlify-cli deploy --prod --dir=dist

Nota: El comando interactivo sites:create se cuelga en entornos no TTY. Usa siempre la bandera --create-site.

Paso 4: Devolver la URL en Vivo

Lo que NO se debe hacer

• NO reescribir componentes desde cero. La plantilla funciona. Solo modifica el copy, los colores y las imágenes.
• NO cambiar a Tailwind v4. La plantilla usa v3 con tailwind.config.js. Mantenlo así.
• NO eliminar las micro-UI interactivas (DiagnosticShuffler, TelemetryTypewriter, AdaptiveRegimen). Son el diferenciador visual. Adapta su contenido a la marca.
• NO cambiar el diseño estructural (transiciones de secciones redondeadas, tarjetas de scroll apiladas, sección de filosofía con paralaje). Son lo que hace que se vea bien.
• NO agregar nuevas dependencias npm a menos que sea absolutamente necesario.

Hoja de Trucos para Personalización

Cambiar la Vibra

Toda la estética cambia modificando 4 tokens de color en tailwind.config.js:

Vibra	charcoal (fondo)	clay (acento)	cream (texto)	moss (acento oscuro)
Azul Tecnológico (por defecto)	#070707	#0026FF	#EAEAEA	#070707
Lujo Dorado	#070707	#C9A84C	#F5F0E8	#0A0A0A
Cyber Neón	#0A0A0A	#00FFD1	#E0E0E0	#0A0A0A
Blanco Clínico	#FAFAFA	#2563EB	#1A1A1A	#F5F5F5
Orgánico Terracota	#1A1410	#CC5833	#F2F0E9	#2E4036
Contenido Esmeralda	#090909	#10B981	#F0F0F0	#0A0A0A

Si el Cliente no Necesita Precios

Reemplaza el contenido de Membership.jsx con una sección CTA de ancho completo (mantén el archivo del componente, solo cambia su JSX).

Ejemplo Práctico: 1SecondCopy (servicio de redacción SEO)

Esta es la referencia de oro para la profundidad de modificaciones necesarias. El contenido textual de cada componente cambia, pero no se hacen cambios estructurales/de diseño.

Colores (tailwind.config.js)

moss: '#0A0A0A', clay: '#10B981', cream: '#F0F0F0', charcoal: '#090909'

Cambios componente por componente

Componente	Qué cambió	Qué se mantuvo igual
Navbar.jsx	Marca → "1SECONDCOPY_", enlaces → Proceso/Plataforma/Precios, CTA → "Comenzar"	Navegación flotante, desenfoque al hacer scroll, menú hamburguesa móvil
Hero.jsx	Título → "Palabras que Posicionan.", eslogan → "Redacción de Contenido, con un Giro", subtítulo sobre escritores del top 1%, Unsplash bg → temática de escritura	Revelación de texto con GSAP, diseño, superposiciones de degradado
Features.jsx	Encabezado → "Tu Centro de Comando de Contenido", subtítulo sobre paneles en tiempo real	Cuadrícula de 3 micro-UI, estructura de sección
DiagnosticShuffler.jsx	Tarjetas → "Velocidad de Contenido: 48 artículos", "Posición SERP Promedio: #4.2", "Tiempo de Entrega: 2.1 días", etiqueta → "Analíticas de Contenido"	Animación de ciclo automático, estructura de tarjetas
TelemetryTypewriter.jsx	Mensajes → pasos del pipeline de contenido ("Investigando palabras clave objetivo...", "Emparejando escritor con briefing..."), etiquetas → "Cola en Vivo", estadísticas → "En Cola: 3 briefs" / "Entrega Promedio: 2.1 días"	Efecto de máquina de escribir, estilo terminal
AdaptiveRegimen.jsx	Etiqueta → "Planificador de Contenido", encabezado → "Seleccionar Día de Publicación", botón → "Enviar", color GSAP → #10B981	Cuadrícula de calendario, cursor animado, chips de fecha
Philosophy.jsx	Antes → "Contrata freelancers. Gestiona revisiones. Reza para que posicione." vs Ahora → "Envía un briefing. Obtén contenido SEO que convierte.", Unsplash bg cambiado	Scroll con paralaje, revelación palabra por palabra, diseño
Protocol.jsx	Pasos → "Briefing e Investigación" / "Redacción Experta" / "SEO y Entrega", encabezado → "El Proceso.", descripción sobre su flujo de trabajo	Tarjetas de scroll apiladas, fijación con GSAP, gráficos SVG
Membership.jsx	Niveles → Starter $0.09/palabra, Bulk $0.08/palabra, Enterprise Personalizado, todas las características reescritas para servicio de contenido	Cuadrícula de 3 columnas, efectos hover, insignia popular
Footer.jsx	Marca → "1SECONDCOPY_", eslogan → "Contenido SEO bajo demanda", columnas → Servicios/Empresa, estado → "Escritores en Línea"	Diseño, animación de punto de ping, copyright

Conclusión clave

~200 líneas de cambios de texto en 10 archivos. Cero cambios de diseño, animación o estructura. El sitio se ve completamente diferente porque los colores y el copy hacen todo el trabajo pesado.

Entorno

Requiere:

• Node.js 18+
• npx netlify-cli (se autoinstala)
• Cuenta de Netlify autenticada mediante netlify login

Configuración Inicial

Antes de ejecutar, verifica si el espacio de trabajo tiene un archivo .gitignore. Si no lo tiene, asume que el usuario es nuevo en esta skill. En ese caso:

1. Pregunta al usuario si es la primera vez que ejecuta esta skill
2. Si es así, explícale cómo funciona y qué necesita configurar/instalar (claves API, variables de entorno, dependencias, etc.)
3. Informa que Nick les desea lo mejor.