Reúne de 2 a 5 imágenes que te gusten. La IA pregunta antes de generar, crea todas las imágenes con el mismo estilo, arma la página con movimiento y comprueba si el visitante todavía encuentra el botón.
site-inspirado es un kit con una skill para Claude Code que crea sitios que no parecen «hechos por IA». Le das imágenes de referencia (de Pinterest, de una invitación ya impresa o de una foto del local) y la IA hace preguntas e investiga antes de generar cualquier cosa. Después analiza el estilo de esas imágenes, genera las imágenes del sitio con ese mismo estilo mediante Codex y arma la página con transiciones. Al final, una prueba automática comprueba que el botón principal aparezca y que la página funcione en el celular. Para usarlo, necesitas Claude Code, Codex con tu sesión iniciada mediante tu suscripción, Python y Node.
Pedir «haz un sitio bonito» da como resultado el mismo sitio de siempre. Aportar referencias, responder preguntas y revisar el resultado da como resultado un sitio con identidad propia.
Un guion de preguntas para cada tipo de sitio (evento, negocio, servicio, portafolio). Lo que la persona no responde se investiga o se deja fuera.
estilo.py extrae la paleta de las referencias y calcula el contraste. Todas las imágenes reciben el mismo prompt de estilo y las mismas referencias.
portao.js abre la página en una computadora y en un celular, y bloquea el sitio si oculta el botón, falla o ignora la opción «reducir movimiento».
Ninguna etapa comienza sin que se haya aprobado la anterior. La guía de abajo tiene 8 pasos: instalar, estas 6 etapas (pasos 2 a 7) y publicar. La «prueba final» es la comprobación automática del último paso.
Funciona en Linux y Mac (en Windows, usa WSL, Linux dentro de Windows). Todo se ejecuta en tu máquina. Las imágenes se generan con Codex mediante tu suscripción, sin clave de API.
Genera las imágenes con image_gen (el generador de imágenes de Codex), adjuntando las referencias. El script ejecuta Codex sin pedir confirmación para cada imagen (--dangerously-bypass-approvals-and-sandbox): úsalo en una carpeta dedicada solo al sitio.
npm i -g @openai/codex # instala (si aparece el error EACCES: antepón sudo) codex login # inicia sesión con tu cuenta de ChatGPT codex login status # comprueba el estado
Analiza la paleta y crea la hoja de contacto.
python3 -m pip install --user pillow # si aparece "externally-managed-environment": sudo apt install python3-pil # Ubuntu/Debian brew install pillow # Mac python3 -c "import PIL" # comprueba
Instala primero Node (npm, que Codex necesita, viene incluido) y Git. Node ejecuta la prueba final, que abre la página en un navegador sin ventana, instalado en el paso 1. gh publica en el paso 8.
brew install node git gh # Mac (o nodejs.org) sudo apt install nodejs npm git gh # Ubuntu/Debian node -v # 18 o superior gh auth login # gh: cli.github.com
T es la carpeta de tu sitio (una por sitio). S es la carpeta de la skill. Los pasos 3 y 6 se hacen conversando con Claude Code; los demás son comandos en la terminal.
Clona el repositorio y conecta la skill con Claude Code. $T es la carpeta mi-sitio dentro de tu carpeta personal: las referencias van en mi-sitio/refs. S y T solo sirven en la terminal donde las creaste: en una terminal nueva, vuelve a ejecutar la tercera línea. Ejecuta estas líneas en la carpeta donde quieras guardar el kit (ln -s usa la carpeta actual).
git clone https://github.com/inematds/site-inspirado mkdir -p ~/.claude/skills && ln -sfn "$PWD/site-inspirado/skill/site-inspirado" ~/.claude/skills/site-inspirado S=~/.claude/skills/site-inspirado; T=~/mi-sitio; mkdir -p $T/refs cd $S/scripts && npm install && npx playwright install --with-deps chromium && cd - # navegador de la prueba final
Guarda de 2 a 5 imágenes en $T/refs/: las que ya tienes (invitación, logo, foto del local) y otras de inspiración (en Pinterest, busca «site padaria» o «wedding website watercolor»). También ayuda incluir una imagen de lo que NO quieres.
Abre Claude Code dentro de la carpeta del sitio (así el BRIEF, el estilo y la página quedan en $T) y escribe la frase que cambia el resultado. Las preguntas para cada tipo de sitio están en referencias/perguntas.md; las respuestas se guardan en $T/BRIEF.md, junto con el tipo: negocio (el sitio busca que se realice una acción, como hacer un pedido o reservar una cita) o visual (evento, portafolio: puede tener más movimiento).
Los pasos 4, 5 y 7, el cp del paso 6 y el paso 8 se hacen en la terminal: abre una segunda terminal (la primera queda con Claude Code) y ejecuta allí la línea S=…; T=… del paso 1 antes de continuar.
# en la terminal cd $T && claude
# dentro de Claude Code (escríbelo, no es un comando de terminal) /site-inspirado "Quiero el sitio de mi panadería. Antes de generar nada, pregúntame todo lo necesario e investiga qué suele incluir un sitio de este tipo."
El script analiza la paleta de las referencias y sugiere colores de fondo, texto y acento según el contraste calculado. El prompt de estilo describe la técnica, la luz y los colores en inglés: pídele a Claude Code que lo redacte mirando tus referencias. El número con «:1» es el contraste entre el texto y el fondo (por debajo de 4,5:1 cuesta leer).
python3 $S/scripts/estilo.py $T/refs $T/estilo.json --prompt "honest food photography, warm window light, dark walnut, terracotta" # estilo.json: 12 colores · fondo #110a04 · texto #ebdbce (14.55:1) · acento #b07042
Escribe $T/plano.json (una línea por imagen: nome, prompt del tema, largura, altura). Cada imagen usa las 2 primeras referencias (en orden alfabético: pon nombres como 1-invitacion.jpg a las más importantes) y la primera imagen generada como modelo (el «ancla»), para que toda la serie conserve el mismo estilo. Al final se crea folha.jpg, una hoja con todas las imágenes una al lado de la otra: revísala y vuelve a generar las que desentonen. No hace falta escribir el JSON a mano: pídele a Claude Code «escribe el plano.json a partir del BRIEF» o copia pilotos/padaria/plano.json y cambia los textos. Cada imagen tarda alrededor de 1 minuto y usa la cuota de tu suscripción de Codex.
# plano.json: [{"nome": "hero", "prompt": "panes enfriándose sobre la mesa", "largura": 1536, "altura": 1024}, ...] python3 $S/scripts/imagens.py $T/plano.json $T/estilo.json $T/img --refs $T/refs python3 $S/scripts/imagens.py $T/plano.json $T/estilo.json $T/img --refs $T/refs --so croissant # vuelve a generar una
Pídele a Claude Code: «arma la página con el BRIEF, el estilo y las imágenes». Diseñará una página para el tema y marcará el botón principal (el CTA, la acción que quieres que realice el visitante) con data-cta. Las transiciones vienen de movimento.js y se activan mediante atributos: data-revela hace que el bloque aparezca al entrar en pantalla, data-parallax hace que la imagen se mueva más lento que el desplazamiento, data-intro crea una apertura breve, data-conta cuenta un número y data-contagem muestra los días que faltan para una fecha. Todo se detiene cuando el sistema solicita «reducir movimiento». Copia movimento.js a la carpeta del sitio antes de ejecutar la prueba final:
<section data-revela="cortina"> … sobe | surge | lado | zoom | cortina <img data-parallax="0.12"> <b data-conta="36"> <div data-intro="900"> <a data-cta href="#encomendar">Encomendar</a> <script src="movimento.js"></script> cp $S/runtime/movimento.js $T/
Abre la página en 1440×900 y 390×844, con y sin la opción «reducir movimiento». Usa --tipo según el BRIEF (negocio o visual). Si aparece NO APROBADO, la lista indica el motivo: pégala en Claude Code y pídele que lo corrija. Publica solo si aparece APROBADO.
node $S/scripts/portao.js $T/index.html --tipo negocio --fotos ~/fotos-portao # portão visual × conversão — meu-site (negocio) # desktop CTA na 1ª tela: sim · CTAs: 3 · peso 0.22 MB · erros 0 # celular CTA na 1ª tela: sim · CTAs: 3 · peso 0.55 MB · erros 0 # desktop+reduzir … · celular+reduzir … # PASSA
La carpeta $T ya es un sitio estático completo. Súbelo a GitHub y activa GitHub Pages, el alojamiento gratuito de páginas de GitHub (o usa Vercel o el alojamiento del cliente). Cambia TU_USUARIO por tu usuario de GitHub. El sitio estará disponible en https://TU_USUARIO.github.io/meu-site/ unos minutos después.
# no publiques datos del cliente ni borradores: printf 'BRIEF.md\nrefs/\nfotos/\nimg/.codex/\nimg/folha.jpg\n' > $T/.gitignore git config --global user.name "Tu Nombre"; git config --global user.email "tu@email.com" # solo la primera vez cd $T && git init -b main && git add -A && git commit -m "site" gh repo create meu-site --public --source=. --push gh api -X POST repos/TU_USUARIO/meu-site/pages -f "source[branch]=main" -f "source[path]=/"
El mismo kit, con referencias diferentes. Los nombres, lugares y precios son ficticios. Haz clic para abrir.
Un sitio existe para que alguien haga algo. El tipo indicado en BRIEF define cuánto movimiento cabe. La prueba final mide el botón (en la primera pantalla y en 1,5 s para el tipo negocio), el peso, la vista en celular y la opción «reducir movimiento»; el resto de la dosis (apertura breve, barra fija) sigue las reglas de la skill y puedes revisarlo en las capturas de la prueba.
Botón en la primera pantalla en hasta 1,5 s, sin apertura, barra fija en el celular y hasta 3 MB.
# panadería APROBADO
Apertura de hasta 1,2 s, cortina, parallax y cuenta regresiva; el botón puede aparecer más abajo, pero debe verse. Hasta 8 MB.
# evento APROBADO
Apertura que ocupa una pantalla y media, botón hasta abajo y animación infinita. Corresponde a la prueba tests/ruim.html.
# ruim.html NÃO PASSA: CTA fora da primeira tela animação rodando com "reduzir movimento"
Lo que aparece como terminado está en el repositorio y se probó.
bash tests/rodar.sh).