El hilo, en orden
Once etapas de trabajo.
Esta es la misma charla, contada como una línea de tiempo. Cada bloque tiene lo que pediste, lo que salió y el link de lo que quedó publicado.
Armar la fábrica de webs
«fabrica-web»
- Quedó armada la carpeta de trabajo con la plantilla base de 6 secciones, letra de 20 píxeles, los scripts para crear una web nueva, revisarla y publicarla.
- El plan general quedó explicado en fabrica-web-plan.vercel.app.
Vos das la orden desde acá, Claude Code obedece en tu PC
«la idea es que desde aquí orquestemos todo y vos te encargues de planificar y dar las órdenes… no quiero escribir nada en el chat de Claude Code»
- Se definió el reparto: yo armo el pedido y controlo el resultado, Claude Code escribe el código en tu computadora, Cloudflare publica.
Dínamo para el estilo, Open Design para las recetas
«usar el Open Design que está en mi ordenador en conjunto con Dínamo para crear web premium»
- Se aclaró que esas dos cosas son archivos de texto, no una máquina: no necesitan tu PC prendida ni la placa de video.
- Se midió el servidor: 7,6 GB de memoria, 4 procesadores, 36 GB libres. Reparto acordado: lo pesado en tu PC, los datos chicos en el servidor, las webs en Cloudflare.
«Ya podés crear y editar archivos en mi PC»
«solucioné el tema de darte herramientas para que puedas editar, crear lo que sea en mi ordenador y esto quiero que lo dejes como regla de oro»
- Quedó como regla de oro para todas las conversaciones, pasadas y futuras: los archivos los toco yo por el robot, no te los pido a vos.
- En la misma tanda analizamos easy.com.ar como modelo de estructura para corralones y ferreterías.
La estructura de carpetas en tu PC
«¿dentro de qué carpeta podríamos ir colocando las plantillas de las estructuras que vamos replicando?»
- Quedó en Fabrica-paginas-Web\fabrica-web\ con cuatro carpetas: plantillas (un molde por rubro), fichas, clientes y scripts.
- Convención: dos dígitos y el rubro, nunca el nombre de la marca de origen. El molde no se toca: para un cliente se copia.
Se cortó, se destrabó y apareció el tablero
«¿y qué pasó?» · «¿dónde está o cómo tenemos armada la fábrica? ¿en qué etapa se puede ir tocando?»
- Se destrabó el robot y quedó publicado el tablero con las 8 etapas de la fábrica: tablero-fabrica.pages.dev.
Tres versiones a partir de cinco webs reales
«quiero tomar estos modelos y replicarlos, seleccionar los mejores y armar los nuestros… armar 3 versiones»
- Se destriparon cinco concesionarias argentinas y salieron tres moldes: ruta (cinematográfica), vidriera (clara, con precios) y central (servicios y portal del cliente).
- El ranking de las nueve webs comparadas quedó en concesionaria-moldes.pages.dev.
Tres opciones de pinturería
«¿Qué pasó? ¿cómo hacemos para que no vuelva a pasar?»
- Se dejó la regla para no trabarse: nunca meter borrados ni limpieza dentro de un comando largo. Un comando hace una sola cosa.
CASA FIRME, a partir del modelo de Sodimac
- Quedó publicada en modelo-home-center.pages.dev: barra de búsqueda con sugerencias, menú con submenú, placas de ofertas, cuentas regresivas y carrito que funciona.
El auto en la ruta: «algo premium»
«ahí tomaste esa animación de Dínamo y salió algo fuera de lo normal, muy bueno»
- De ahí salió la idea de subir el nivel de todos los moldes, no solo del de concesionaria.
Buscar páginas abiertas de efectos visuales
«buscá páginas open source parecidas a Dínamo, pero para efectos, animación de letras, cajas y bordes»
- Quedaron dos páginas: caja-de-efectos.pages.dev (18 efectos andando) y lista-verificada.pages.dev (cuáles de los nombres que te pasaron existen de verdad y cuáles están inventados).
- También quedó mapa-animaciones.pages.dev: siete animaciones por rubro corriendo en vivo.
La mejora «a nivel atómico premium»
«revisá las maquetas que creaste, que son 8 o 9, y llevarlas a un nivel atómico premium… no me gusta el efecto del borde de las cajas de los productos, se ve deslucido y se pierde nitidez en los vértices»
- Alcanzamos a diagnosticar las tres causas y a escribir la orden, y ahí se trabó la máquina. Ese es el trabajo que quedó colgado.
Lo que produce esa charla
Las nueve maquetas y su estado.
| Molde | Dirección | Estado |
|---|---|---|
| Comercio multirrubro | molde-multirrubro-v2.pages.dev | Publicado |
| Concesionaria · Ruta | concesionaria-ruta.pages.dev | Publicado |
| Concesionaria · Vidriera | concesionaria-vidriera.pages.dev | Publicado |
| Concesionaria · Central | concesionaria-central.pages.dev | Publicado |
| Pinturería · Lienzo | pintureria-lienzo.pages.dev | Publicado |
| Pinturería · Paleta | pintureria-paleta.pages.dev | Publicado |
| Pinturería · Brocha | pintureria-brocha.pages.dev | Publicado |
| Home center CASA FIRME | modelo-home-center.pages.dev | Publicado |
| Ferretería con calculadora (molde 07) | molde-ferreteria-calculadora.pages.dev | Publicado |
| Ferretería y herramienta (molde 02) | molde-ferreteria-herramientas.pages.dev | Nuevo |
Qué se venía
El arreglo del borde, en simple.
Las tres causas, con ejemplo de todos los días
- El borde se ve aguado porque la pintura de adentro se cuela debajo de la línea. Es como pintar con acuarela sobre un papel mojado: el color traspasa.
- Las esquinas se ven borrosas porque la caja tiene un vidrio esmerilado atrás. El navegador lo dibuja aparte y después lo vuelve a pegar: ahí se desenfoca.
- Al pasar el mouse la caja crece y el borde se pixela. Es como estirar una foto chica: se pone cuadrada.
El arreglo: el borde no se dibuja encima, se pinta como una segunda capa de pintura. Queda filoso en las esquinas, aunque la caja tenga fondo transparente y aunque se mueva.
Lo que quedó pendiente
La mejora integral de las nueve maquetas: borde de dos capas, sin vidrio esmerilado en las tarjetas, movimiento hacia arriba de dos milímetros en vez de agrandar, letra de 20 píxeles o más, aire parejo entre bloques, contraste que se lea sin anteojos, botones grandes y animaciones de entrada suaves.
El próximo paso
Tres cosas, en este orden.
1. Terminar los cuatro moldes que faltaban: ferretería y herramienta (ya está), materiales sanitarios, corralón y servicios profesionales.
2. Aplicar el arreglo atómico a las nueve maquetas, empezando por las cajas de producto.
3. Republicar el tablero de la fábrica con todo actualizado.
Ver el tablero de la fábrica