🌱 Empieza aquí · Réplica de un diseño con fidelidad medible

Esta semilla le enseña a tu asistente un método de trabajo (workflow): cuando le pidas copiar un diseño que te gustó, primero lo reconstruye en HTML/CSS —donde el parecido se puede medir contra la referencia— y solo cuando queda fiel te lo entrega como un archivo editable en Canva (u otro editor) que puedes modificar sin tocar código. Nada de "copiar a ojo".

Para instalarla

Abre esta carpeta con Claude Code o Cowork y dile a tu asistente:

"Siembra esta semilla 🌱"

Con eso basta de tu parte. Tu asistente hace todo lo demás y al final te dice cómo comprobar que quedó. Vas a ver algunas palabras en inglés en la pantalla; ni caso, él te guía.

¿Otras formas de pedírselo? "instala esta semilla", "pon a funcionar el método de réplica de diseños", "haz el setup de esto". Te entiende igual.

Para el asistente que siembra 🤖

Este componente es un workflow (método de trabajo), no un programa ejecutable. No es un hook (gancho de automatización): no lleva chmod, no lleva entrada en settings.json y no ejecuta ningún script. Se "siembra" colocando el método donde tú, el asistente, lo leas de forma automática al arrancar, para aplicarlo cuando la persona te pida replicar un diseño.

El kernel trae dos archivos:

• kernel/replica-de-diseno-medible.md — el método en sí (el ciclo de 4 fases que vas a seguir).
• kernel/registro-de-replica.ejemplo.md — una plantilla para documentar cada réplica (brief + medición + entrega).

1. Copia el método donde lo leas siempre

Coloca replica-de-diseno-medible.md en el lugar que tu plataforma carga automáticamente como instrucción permanente.

Claude Code (macOS / Linux / Windows con Git Bash):

mkdir -p "$HOME/.claude/rules"
cp kernel/replica-de-diseno-medible.md "$HOME/.claude/rules/replica-de-diseno-medible.md"

Windows (PowerShell):

New-Item -ItemType Directory -Force -Path "$HOME\.claude\rules" | Out-Null
Copy-Item "kernel\replica-de-diseno-medible.md" "$HOME\.claude\rules\replica-de-diseno-medible.md"

Los archivos dentro de ~/.claude/rules/ se cargan solos al inicio de cada sesión. Copia ahí solo replica-de-diseno-medible.md. La plantilla de registro NO va en esa carpeta (no es una regla, es una guía que usas en cada pieza).

Cowork: usa la misma carpeta de reglas si tu proyecto la soporta (.claude/rules/replica-de-diseno-medible.md). Si no, coloca el archivo dentro del proyecto y agrega una línea que apunte a él en el archivo de instrucciones del proyecto (el CLAUDE.md), por ejemplo: "Aplica el método de replica-de-diseno-medible.md cuando te pidan replicar un diseño."

Codex: Codex lee su archivo de instrucciones AGENTS.md. Copia el contenido de replica-de-diseno-medible.md dentro de AGENTS.md (o agrégale un puntero al archivo si lo guardas aparte en el proyecto), para que el método se cargue con el resto de tus instrucciones.

2. Deja a mano la plantilla de registro (recomendado)

Guarda kernel/registro-de-replica.ejemplo.md en la carpeta donde la persona vaya a trabajar sus piezas. Cada vez que repliques un diseño, cópiala, renómbrala con el nombre de la pieza y llénala. Los placeholders <TU-RUTA> y <TU-CARPETA-DE-PROYECTO> los reemplazas con las rutas reales de esta persona la primera vez.

3. Verificación post-siembra (obligatoria)

Como es un método (texto), la verificación tiene dos partes: que el archivo quedó en su lugar, y que el método se aplica de verdad.

a) El archivo quedó colocado (ejemplo Claude Code):

ls -la "$HOME/.claude/rules/replica-de-diseno-medible.md"; echo "exit=$?"

Salida esperada: una línea que lista el archivo (con su tamaño) y exit=0. Si sale No such file or directory, la copia no se hizo; repite el paso 1.

b) El método se aplica (prueba de comportamiento, en una conversación nueva): Pídele a la persona que abra una sesión nueva, te dé una imagen de referencia sencilla (o un enlace) y te diga "replícame este diseño para dejarlo editable". La conducta correcta es que (1) preguntes por los derechos de uso antes de copiar 1 a 1, (2) reconstruyas la pieza en HTML/CSS y la midas contra la referencia (capturas lado a lado, no "se ve igual"), y (3) NO declares "listo" mostrando solo el HTML, sino que dejes claro que el entregable es el archivo editable en el editor final. Si en vez de eso saltas directo a "copiar a ojo" en el editor, el método no se cargó: revisa que replica-de-diseno-medible.md esté en la carpeta de reglas (o dentro de AGENTS.md en Codex).

Cuando ambas partes pasen, avísale a la persona en una línea qué gana con esto.

✅ ¿Cómo sé que funcionó?

De ahora en adelante, cuando le pidas a tu asistente copiar un diseño, ya no va a improvisar "a ojo". Primero te va a preguntar por los derechos, luego va a reconstruir la pieza midiendo el parecido de verdad, y al final te va a entregar un archivo editable donde tú cambias textos, fechas y fotos sin romper nada. El resultado se parece al original en serio, no "más o menos". 🌱