gaznil/web-skills

Firecrawl Clonación del Diseño de Sitios Web

Úsalo cuando el usuario quiera que una URL se convierta en un archivo de sistema de diseño práctico que los agentes puedan usar de inmediato.

Resultado predeterminado: extraer el sistema de diseño de cualquier sitio web en una sola línea y formatearlo como DESIGN.md.

La habilidad debe sentirse como un flujo de trabajo ligero alrededor de Firecrawl scrape: recopilar el contenido visible de la página, su estructura, metadatos, enlaces y señales visuales disponibles, luego sintetizar esos hallazgos en un archivo de sistema de diseño en markdown limpio.

Entrevista de Incorporación

Deduce la URL de origen, la pila tecnológica objetivo y si se solicita implementación a partir del contexto. Si el usuario proporciona una URL y pide un sistema de diseño, procede de inmediato.

Haz como máximo 1-3 preguntas concisas solo si estás bloqueado, como la URL del sitio web, si deseas generar solo DESIGN.md o también implementar, o una pila tecnológica objetivo requerida.

Usa la interfaz normal de indicaciones o modal del agente anfitrión. No nombres una función de pregunta específica del entorno de trabajo.

Plan de Recopilación con Firecrawl

Usa Firecrawl a través de la CLI o una superficie de herramienta equivalente. Siempre comienza con dos raspados paralelos de la URL proporcionada:

1. Los formatos branding e images juntos para obtener tokens de diseño estructurados y el conjunto completo de imágenes de la página.
2. Una captura de pantalla de página completa para contexto visual.

Ejemplo:

firecrawl scrape "https://example.com" --format branding,images -o ".firecrawl/example-branding.json" --pretty &
firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" &
wait

Combinar branding e images en una sola llamada sigue costando un solo crédito y es obligatorio: el bloque branding solo muestra activos de marca seleccionados (logo, favicon, ogImage, logoHref), por lo que sin images el agente se perderá las imágenes de contenido real de la página (héroes, fotos de productos, diapositivas de carrusel, imágenes de características, ilustraciones, fotos decorativas y similares). En una página de producto como tesla.com/cybertruck, el bloque branding no tiene héroe — solo images devuelve el héroe principal del Cybertruck (por ejemplo, Cybertruck-Hero-Desktop-NA-SA-APAC.png) y el resto de la fotografía de la página.

Si la captura de pantalla devuelve una URL de imagen remota (por ejemplo, un enlace de almacenamiento firmado) en lugar de un archivo local, descárgala en la misma ruta .firecrawl/ para que DESIGN.md pueda referenciar un activo local estable.

Usa la salida estructurada de branding como fuente principal para colores, tipografía, componentes, activos de marca (logo, favicon, ogImage), personalidad y notas de confianza. Usa la lista de images como fuente de verdad para las imágenes de contenido de la página: fotografía de héroe, fotos de productos, carruseles, imágenes de características, ilustraciones y gráficos decorativos. Usa la captura de pantalla como referencia visual principal para diseño, jerarquía y sensación general. Agrega formatos complementarios solo cuando estos sean insuficientes para el artefacto final.

Recopila:

• datos de branding para colores, tipografía, espaciado, botones, logotipos, imágenes de marca, personalidad y confianza
• la lista completa de images para héroe, producto, características e imágenes de sección más allá de los activos de marca seleccionados
• una captura de pantalla de página completa guardada localmente en .firecrawl/ para que pueda incrustarse en DESIGN.md
• markdown de la página para encabezados, jerarquía de texto, CTA, navegación y orden de secciones cuando sea necesario
• metadatos y enlaces para pistas de marca, producto y propósito de la página cuando sea necesario
• HTML solo cuando la salida de branding, la lista de imágenes y la captura de pantalla sean insuficientes para inferir clases, nombres de fuentes, variables CSS o estructura de componentes
• páginas relacionadas solo cuando el usuario solicite un sistema de sitio más amplio

No sobre-raspes por defecto. La primera versión debe ser útil a partir de una sola página representativa.

Qué Extraer

Deduce y documenta el lenguaje de diseño del sitio:

• colores: primario, secundario, acentos, fondos, bordes, texto, estados
• tipografía: familias de fuentes si son detectables, escala tipográfica, pesos, alturas de línea, tratamiento de encabezados/cuerpo
• espaciado: anchos de contenedor, ritmo de sección, separaciones de cuadrícula, escala de relleno, densidad
• diseño: estructura de página, patrones de héroe, tarjetas, cuadrículas, navegación, pie de página, suposiciones de capacidad de respuesta
• componentes: botones, entradas, tarjetas, insignias, elementos de navegación, bloques de precios, testimonios, filas de características, formularios
• imágenes e iconos: estilo, lenguaje de formas, tratamiento de ilustraciones/fotos, restricciones de logotipo; extrae imágenes representativas de héroe, producto, características y sección de la lista completa de images en lugar de confiar en branding.images, que solo contiene logo, favicon, ogImage y logoHref
• movimiento e interacción: estados de hover, transiciones, estilo de animación cuando sea observable o deducible
• voz y patrones de contenido: redacción de CTA, estilo de encabezado, ritmo de copia de producto

Cuando un valor no se pueda medir exactamente a partir de la salida del raspado, etiquétalo como inferido y proporciona una aproximación práctica.

Trabajo en Paralelo

Si es apropiado, usa subagentes o ejecutores de tareas paralelas equivalentes. Las divisiones naturales incluyen una página por investigador para sitios de varias páginas, o un revisor para colores, tipografía, espaciado y componentes.

Cada investigador paralelo debe devolver URL de origen, evidencia extraída, tokens de diseño inferidos y notas de confianza.

Entrega Final

Crea o devuelve un DESIGN.md con esta estructura. Incrusta la captura de pantalla de página completa cerca de la parte superior para que un agente de codificación obtenga contexto visual junto con los tokens.

# DESIGN.md: [Sitio de Origen]

## Fuente
- URL: [URL de origen]
- Fecha de captura: [fecha]
- Evidencia: [raspado/captura/html/enlaces utilizados]

## Captura de Pantalla de Referencia
![Captura de pantalla de página completa de [Sitio de Origen]](./.firecrawl/[origen]-screenshot.png)

Usa esta captura de pantalla como fuente de verdad visual para diseño, jerarquía, densidad y sensación. Los tokens a continuación describen la misma página en forma legible por máquina.

## Resumen del Diseño
[Descripción breve del lenguaje visual y lo que un agente debe recrear]

## Tokens de Diseño

### Colores
[Roles de color con valores hex cuando se conocen; marca claramente los valores inferidos]

### Tipografía
[Fuentes, recomendaciones de respaldo, escala, pesos, reglas de encabezados/cuerpo]

### Espaciado y Diseño
[Escala de espaciado, contenedores, cuadrículas, radio, sombras, bordes]

## Componentes
[Botones, tarjetas, navegación, formularios, héroe, secciones de características, precios, pie de página, etc.]

## Patrones de Página
[Orden de secciones, diseños comunes, comportamiento responsivo]

## Estilo de Contenido
[Voz, estilo de CTA, patrones de encabezado, densidad de copia]

## Instrucciones de Compilación para el Agente
[Instrucciones concretas que un agente de IA de codificación puede seguir para crear un nuevo sitio en este estilo]

## Entradas para Re-ejecución
workflow: firecrawl-website-design-clone
source_url: [url]
target_stack: [pila]
output: DESIGN.md

Si el usuario solicita implementar, primero produce o actualiza DESIGN.md, luego úsalo como fuente de verdad para la compilación.

Nivel de Calidad

• No des a entender que el usuario tiene derechos sobre logotipos, imágenes, marcas registradas o textos de terceros.
• Prefiere tokens de diseño reutilizables sobre observaciones únicas.
• Distingue hechos observados de aproximaciones inferidas.
• Mantén la salida lo suficientemente compacta para que otro agente pueda pegarla en contexto y construir a partir de ella.
• Conserva las URL de origen y los artefactos de raspado para revisión.