El método FRAME organiza la creación de una landing en cinco etapas: fundación, render, animación, montaje y entrega. Lo presenté en el video del 28 de abril de 2026 para preparar el contenido y los materiales visuales antes de construir la página en Claude Design.
El caso principal fue Scarlett, una propuesta de recepcionista virtual para clínicas. También mostré otras exploraciones, como una marca de filamentos 3D y una página para una aplicación de dictado. Puedes ver el proceso completo y las animaciones en YouTube.
Por qué preparar antes de construir
Cuando empiezas directamente a pedir cambios sobre una página, es fácil mezclar decisiones de oferta, texto, estilo y funcionamiento. Corriges el color de un botón y después descubres que todavía no sabes qué acción debería ejecutar.
FRAME propone resolver esas decisiones en orden. Primero defines qué quieres comunicar y a quién. Después preparas los assets que necesitas. Finalmente los montas, revisas y conectas con una experiencia utilizable.
En la grabación relacioné esa preparación con los límites de uso de Claude Design. Ese sistema cambió: la ayuda actual de Claude indica que Design comparte los límites del plan. El método sigue siendo útil para reducir trabajo repetido, pero no garantiza créditos ilimitados ni un porcentaje fijo de ahorro.
F de fundación: oferta, estructura y dirección visual
Para Scarlett definí una oferta concreta: un servicio de recepción por voz que ayuda a gestionar llamadas y agendamiento. Quería una estética reconocible y una relación visual con ondas de sonido.
La fundación reúne tres decisiones. La primera es comercial: quién tiene el problema y qué acción quieres que tome. La segunda es editorial: qué debe explicar cada sección. La tercera es visual: colores, referencias, tipografía y materiales que apoyan el mensaje.
Usé una conversación de planificación para llegar al brief y a los prompts de generación. El criterio útil es poder leer esa propuesta antes de renderizar nada. Si todavía no explica por qué alguien pediría una demo, una animación más vistosa no va a aclararlo.
Un brief editorial breve puede incluir:
- Público al que se dirige y problema concreto.
- Beneficio que puedes respaldar, sin cifras inventadas.
- Acción principal y destino real de ese botón.
- Secciones necesarias para explicar la oferta.
- Dirección visual, materiales disponibles y elementos a evitar.
- Comportamiento esperado en móvil y con movimiento reducido.
Usa referencias para tomar decisiones
En el video recorrí Motion Sites y elegí una referencia para orientar el resultado. Lo valioso era concretar una composición y un tipo de movimiento antes de pedir una página completa.
Una referencia puede ayudarte a decidir cuánto espacio necesita el hero, cómo se introduce una sección y qué ritmo tiene el scroll. Después adapta esas decisiones a tu mensaje y utiliza materiales propios o con autorización. El diseño de otra empresa no reemplaza tu propuesta de valor.
Los recursos y plantillas que mencioné para la comunidad se comparten dentro de Imperio Agéntico. Esta guía explica el método; no redistribuye los archivos de esas bibliotecas ni sus licencias.
R de render: crea las imágenes que necesita la página
Una vez definido el brief, preparé imágenes con un modelo de generación en Higgsfield. El objetivo era una forma visual relacionada con el sonido que pudiera funcionar detrás del mensaje principal de Scarlett.
La imagen debe dejar espacio para el texto. Si contiene demasiados detalles en el centro, puede competir con el titular y obligarte a corregir toda la composición. También importa cómo se recorta: una imagen horizontal puede perder su elemento principal en un teléfono.
Revisaría una versión inicial antes de producir archivos grandes. Al elegirla, comprueba bordes, contraste y zonas donde irá el contenido. Si no funciona como imagen fija, añadirle movimiento difícilmente resolverá el problema.
A de animación: un movimiento que acompañe el mensaje
En la demo pasé a la generación de video y exploré modelos y ajustes. Usé el mismo frame como inicio y final para buscar un bucle que se integrara en la página.
Reutilizar el frame puede ayudar a orientar el resultado, pero no garantiza un loop perfecto. Hay que reproducir la unión varias veces y observar si existe un salto, una pausa extraña o un cambio brusco de luz.
Para una landing, también conviene decidir si el video aporta algo frente a una imagen. Un fondo pesado puede retrasar la carga y distraer del botón principal. Prepara una imagen alternativa y una versión que conserve el mensaje cuando la persona prefiera menos movimiento.
M de montaje: junta el brief, las imágenes y el video
Con los materiales listos, abrí un proyecto en Claude Design y aporté el brief junto con los archivos. La primera versión ya permitía ver el hero y recorrer las secciones. Después pedí ajustes en zonas donde quería más movimiento y probé controles de estilo.
El montaje incluye revisión. En el video aparecieron textos y secciones que todavía necesitaban trabajo. Una página generada puede proponer testimonios, precios o promesas que sirven como relleno de maqueta, pero que no corresponden a un negocio real. Sustitúyelos por información comprobada antes de publicar.
Agrupar cambios relacionados puede hacer más clara la revisión: jerarquía del hero, comportamiento de una sección y destino del CTA. Si mezclas diez direcciones creativas en un pedido, será más difícil entender qué produjo el resultado.
Para explorar esos ajustes y otros formatos, la guía de cinco casos de Claude Design muestra comentarios visuales, aplicaciones y animaciones web.
E de entrega: archivos, despliegue y funcionamiento
En la grabación mostré el handoff a Claude Code y la alternativa de descargar un ZIP. Esa carpeta contiene los archivos del proyecto, pero también conviene entregar un README que explique cómo se usa y qué falta integrar.
La página de Scarlett llegó a una vista pública en Vercel. Al probar el botón de agendar, señalé que todavía faltaba enlazar su destino. Esa diferencia es importante: una página accesible ya puede verse, pero no necesariamente cumple su objetivo comercial.
| Parte de la entrega | Qué comprobar antes de darla por terminada |
|---|---|
| Navegación | Enlaces y botones llevan al destino previsto |
| Formulario | Datos recibidos y confirmación clara |
| Contenido | Oferta, precios y evidencia reales |
| Móvil y tablet | Lectura, recortes y botones utilizables |
| Movimiento | Animaciones suaves y alternativa reducida |
| Publicación | Dominio, HTTPS y archivos disponibles |
No necesitas integrar pagos para toda landing. Si el objetivo es agendar una conversación, un enlace correcto y una confirmación clara pueden ser el alcance inicial. Define primero qué debe ocurrir después del clic.
Cómo evaluar el resultado comercial
El video usa el valor de una web como una forma de discutir percepción y servicio. Eso no significa que una animación asegure vender una página por una cifra concreta. El precio depende del alcance, el contexto y el resultado que ofreces al cliente.
Para evaluar tu propia página, comienza por una pregunta: ¿una persona entiende qué ofreces y sabe cuál es el siguiente paso? Después observa si puede completarlo. Ese recorrido te dará mejores decisiones que seguir añadiendo efectos sin un propósito claro.
La guía de software a medida con IA conecta esa idea con mantenimiento y alcance. Crear más rápido tiene valor cuando también puedes entregar y operar lo construido.
Video completo y recursos
Ve FRAME aplicado paso a paso en YouTube. El movimiento de las páginas, las iteraciones y los cambios de dirección se entienden mejor viendo la demostración completa.
Los recursos mencionados para implementar el método están en Imperio Agéntico. Puedes suscribirte al canal para seguir proyectos de diseño, agentes y automatización con ejemplos reales.
Preguntas frecuentes
¿Qué significa FRAME en el método de Benjamín Cordero?
Fundación, render, animación, montaje y entrega. Ordena el trabajo desde la oferta y el brief hasta los assets, la página y su publicación revisada.
¿Dónde conviene preparar la landing antes de usar Claude Design?
Puedes usar una conversación de planificación para definir oferta, estructura, dirección visual y materiales. La herramienta concreta importa menos que llegar al montaje con esas decisiones claras.
¿Usar el mismo frame inicial y final garantiza un loop perfecto?
No. Ayuda a orientar la generación, pero hay que reproducir la unión y comprobar saltos o pausas. El archivo también debe funcionar como fondo sin distraer del contenido.
¿FRAME garantiza terminar una web en un único prompt?
No. Preparar mejor puede reducir cambios, pero el resultado necesita revisión. La grabación incluye ajustes de textos, movimiento y composición después de la primera versión.
¿Qué faltaba en la página pública de Scarlett mostrada en el video?
El botón de agendar todavía necesitaba un destino real. La página ya podía verse, pero ese paso comercial aún debía conectarse y comprobarse.
¿Dónde están los recursos mencionados para implementar FRAME?
Los materiales compartidos con la comunidad están dentro de Imperio Agéntico en Skool. Esta guía explica el método y no redistribuye las plantillas de bibliotecas externas.