Desarrollo con IA

Si armas landings o sitios con un asistente de IA (Claude, ChatGPT u otro), dale la skill asociate-sitios. Es un paquete de instrucciones, plantillas y un validador que le enseña al asistente cómo tiene que ser el HTML para que funcione en Asóciate a la primera: con el tracking puesto, conectado a los formularios y al newsletter, y empaquetado en el formato que acepta cada importador.

El resultado se sube de una vez: el importador de landings sube las imágenes, incrusta las fuentes y deja el CSS, el JS y los pixels cada uno en su campo, así que la landing queda lista para funcionar sin pasos manuales.

Descargar asociate-sitios.zip

Qué produce

Le pides	Te entrega	Lo subes en
Una landing para una campaña	Un `.zip` con `index.html`, CSS, JS, imágenes y fuentes (o un `.html` suelto)	Landings → Importar landing, o en una existente, Más acciones → Reemplazar contenido
El sitio de la organización	Un `.zip` con las páginas en la raíz	Website → Más acciones → Subir .zip
Una página para agregar al sitio	Un archivo `.html`	Website → Más acciones → Subir HTML

En todos los casos, el resultado:

marca cada sección con data-track-region y cada botón con data-track-id (ver Tracking en landings);
inserta los formularios de Asóciate con su iframe en vez de programar formularios propios;
conecta la caja de newsletter con los atributos que Asóciate reconoce;
enlaza a las páginas de donación y de socios ({{ donate_url }} y {{ asociate_url }} en una landing; /dona y /asociate en el sitio);
si la organización usa pixels (Google, Meta, TikTok…), los deja en el <head> para que el importador los lleve a su campo;
está escrito en español de Chile, con tuteo;
pasa por el validador antes de entregarse.

Qué trae el paquete

asociate-sitios/
├── SKILL.md                  ← instrucciones principales (las lee siempre)
├── references/
│   ├── landing.md            ← cómo procesa Asóciate una landing, variables, dónde va el JS
│   ├── sitio-zip.md          ← estructura del zip, límites, qué pasa al subirlo
│   ├── tracking.md           ← data-track-region, data-track-id y convención de nombres
│   └── conexiones.md         ← formularios, newsletter, donaciones, rutas
├── templates/
│   ├── landing/              ← landing de ejemplo lista para comprimir (HTML, CSS, JS, imágenes)
│   └── sitio/                ← sitio de 3 páginas con menú compartido
└── scripts/
    └── validar.py            ← revisa una landing (.zip o .html) o un sitio (.zip) antes de subirlo

Instalarla

En Claude (claude.ai o la app de escritorio)

Descarga el zip de arriba.
En Claude, abre Configuración → Capacidades → Skills y sube el zip.
Asegúrate de que la ejecución de código esté activada, para que Claude pueda correr el validador.

Desde ese momento, Claude la usa sola cuando le pides una landing o un sitio para Asóciate.

En Claude Code

Descomprime el zip en la carpeta de skills, personal o del proyecto:

unzip asociate-sitios.zip -d ~/.claude/skills/          # para todos tus proyectos
unzip asociate-sitios.zip -d .claude/skills/            # solo para este proyecto

En otros asistentes

Si tu asistente no soporta skills, sube los archivos SKILL.md y los de references/ como contexto, o pégalos al inicio de la conversación. El validador es un script de Python sin dependencias: córrelo tú si el asistente no puede ejecutar código.

python3 scripts/validar.py landing.zip --tipo landing   # landing con sus archivos
python3 scripts/validar.py landing.html                 # landing en un solo archivo
python3 scripts/validar.py sitio.zip                    # sitio completo

Cómo pedirlo

Mientras más datos le des, menos tendrá que inventar. Un buen pedido incluye:

el nombre de la organización, su misión y sus colores (o el logo);
la acción principal: donar, hacerse socio, inscribirse;
el slug de los formularios que quieres mostrar (lo ves en Formularios, en la dirección /f/<slug>);
las fotos, o la indicación de usar imágenes de ejemplo.

Ejemplos:

Arma una landing para la campaña de invierno de la Fundación Huellas del Sur. Necesitamos 500 mantas; el botón principal es donar. Colores: verde #14532d y amarillo #f59e0b. Usa las fotos que te adjunto, agrega el formulario de voluntariado (slug voluntariado) y la caja de newsletter, y deja nuestro pixel de Meta (te lo pego abajo). Entrégamela como zip.

Migra nuestro sitio a Asóciate: Inicio, Nosotros, Adopta y Contacto. Te adjunto los textos y las fotos. El formulario de contacto es el que trae Asóciate (contacto). Entrégamelo como zip.

Qué hace Asóciate al importar una landing

Importar landing (o Reemplazar contenido) acepta el .zip tal como lo entrega el asistente y deja cada cosa en su lugar.

Importar una landing

Cada cosa queda así:

Lo que trae el zip	Dónde queda
El HTML de `index.html`	El contenido de la landing
`<style>` y hojas CSS locales	CSS de la landing
`<script>` inline y archivos `.js` locales	JS de la landing
Pixels y analítica (Google, Meta, TikTok, LinkedIn, Hotjar, Clarity…) o lo marcado con `data-asociate="pixel"`	HTML/JS de pixel
Imágenes, en cualquier lugar: `<img>`, `srcset`, fondos en el CSS o en `style="…"`, favicon, `og:image`, rutas dentro del JS	Se suben a la galería de tu organización y se actualizan sus rutas
Imágenes que la landing no usa	También se suben, para que las tengas en el editor
Fuentes (`.woff2`, `.woff`, `.ttf`, `.otf`, hasta 400 KB)	Se incrustan en el CSS
Librerías de un CDN (`https://…`)	Se quedan tal cual

Los tres campos de código quedan en Edición avanzada, dentro de Pixel, CSS y JS propios (avanzado): si quieres revisarlos o ajustarlos, los encuentras ahí con resaltado de sintaxis.

Al terminar, Asóciate te muestra avisos con lo que hizo (cuántas imágenes subió, cuántos pixels importó) y advertencias con lo que no pudo resolver: un archivo que falta en el zip, un PDF que hay que subir aparte, una variable que no existe, una sección sin tracking.

Importar nunca publica: una landing nueva queda inactiva, y reemplazar el contenido de una existente deja "Cambios sin publicar" (la versión publicada sigue intacta hasta que publiques).

Antes de subir el resultado

Revisa la salida del validador: no puede tener errores (✗). Las advertencias (⚠) conviene corregirlas.
Reemplaza las imágenes de ejemplo y confirma los slugs de los formularios.
En Website, un zip reemplaza todas las páginas del sitio actual. Si tu sitio tiene páginas que quieres conservar, inclúyelas en el zip o súbelas después con Subir HTML. (En Landings, Reemplazar contenido afecta solo a esa landing y deja la versión publicada intacta hasta que publiques.)
Después de subir, lee los avisos y advertencias del importador, revisa con Ver borrador y publica con Publicar cambios (ver Borradores y publicación). Una landing nueva, además, se activa desde Más acciones → Activar.

Lo que el asistente no puede hacer

Crear formularios, recaudaciones o listas. Eso se hace en Asóciate; la skill solo los conecta. Crea primero el formulario y pásale el slug.
Subir archivos que no son imágenes ni fuentes. Un PDF o un video no viajan en el zip: súbelos aparte (o usa YouTube o Vimeo) y pásale la URL.
Usar variables en un sitio subido como zip. {{ company.name }} y las demás solo funcionan en landings; al importar un sitio, Asóciate las desactiva.
Separar los pixels en las páginas de un sitio. El importador de Website los deja junto al JS de cada página: funcionan igual, pero si quieres tenerlos en el campo de pixel, muévelos a mano en la Edición avanzada de esa página.