¿Qué hace Diseño de Sitio Web?
Objetivo
Generar una maqueta HTML elegante de una sola página para el negocio de un prospecto. El sitio web sigue la estética de buildinamsterdam.com: tipografía audaz, fondos blanquecinos, diseños de cuadrícula editorial y detalles en terracota. Se usa para presentar servicios de diseño web.
Entradas
- URL de Google Sheets con datos del prospecto
- Número de fila (basado en 1, excluyendo encabezado) para seleccionar un prospecto
- Opcional: nombre de la hoja (por defecto la primera hoja)
Columnas esperadas de la Hoja
El script asigna estas columnas (sin distinción entre mayúsculas y minúsculas, coincidencia flexible):
| Columna | Se asigna a |
|---|---|
| company_name / company | Nombre del negocio (hero, nav, pie de página) |
| description / about | Sección Acerca de + subtítulo del hero |
| keywords / services | Cuadrícula de servicios (separados por comas) |
| phone / phone_number | Sección de contacto |
| email / contact_email | Sección de contacto |
| address / full_address | Sección de contacto |
| city, state, country | Información de ubicación |
| industry / category | Consultas de búsqueda de imágenes Unsplash |
| first_name, last_name | Atribución del propietario |
| title / role | Rol del propietario |
Scripts
scripts/read_prospect.py— Lee una sola fila de prospecto de Google Sheets → JSONscripts/generate_website.py— Genera un sitio web HTML a partir del JSON del prospecto
Proceso
Paso 1: Leer datos del prospecto
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" \
--row ROW_NUMBER \
--worksheet "WORKSHEET_NAME" # opcional
Genera JSON en la salida estándar.
Paso 2: Generar el sitio web
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" --row 1 | \
python3 .claude/skills/design-website/scripts/generate_website.py
O con un archivo JSON:
python3 .claude/skills/design-website/scripts/generate_website.py < prospect.json
Paso 3: Vista previa
Abre el archivo generado en el navegador:
open .tmp/website_*.html
Salidas
.tmp/website_{company_slug}.html— Archivo HTML autónomo, visible en cualquier navegador- Todo el CSS está en línea, las imágenes son URLs externas (Unsplash)
Entorno
UNSPLASH_ACCESS_KEYen.env— Requerido para fotos de stock. Obtén una clave gratuita en https://unsplash.com/developers- Si no se establece una clave, recurre a imágenes placeholder seleccionadas de picsum.photos
- Credenciales OAuth de Google (token.json / credentials.json) para acceso a Sheets
Sistema de Diseño
- Fuente: Inter (CDN de Google Fonts)
- Colores: Blanco roto
#F2EFE6, Negro#000, Blanco#FFF, Terracota#C38133 - Tipografía: Título en mayúsculas y negrita (72-100px), encabezados de sección (36-48px), cuerpo (16-18px)
- Disposición: Hero a pantalla completa, Acerca de en 2 columnas, cuadrícula de servicios en 3 columnas, galería 2x2
- Botones: Con borde, mayúsculas, con espaciado entre letras
Casos Extremos
- Columnas faltantes: el script utiliza valores predeterminados sensatos (por ejemplo, "Bienvenido" si no hay descripción)
- Sin clave de Unsplash: recurre a imágenes placeholder de picsum.photos
- Nombres de empresas largos: el CSS maneja el ajuste con tamaño de fuente responsivo
- Caracteres especiales: escapados en HTML en la salida