Cómo crear una calculadora web con Claude y Framer

¿Alguna vez llegaste a una página que, además de darte información, te dejaba interactuar y generar un resultado? Esas herramientas web son uno de los secretos mejor guardados de startups que crecen tratando su sitio como un producto y no solo como una vitrina de comunicación.

Esta guía es para personas de growth, marketing e innovación que quieren dejar de apostarle únicamente al contenido de texto y empezar a construir recursos interactivos que atraigan tráfico, generen leads y sean más defendibles frente a la competencia.

Por qué crear herramientas web genera más tráfico que el contenido informativo

El dato que abre la conversación es contundente: las herramientas interactivas de Ahrefs le generan más de 68.000 personas mes a mes [00:34]. Unos meses suben, otros bajan, pero el punto es que ese tipo de activo funciona mejor que solo publicar artículos.

Hay tres razones por las que vale la pena construirlas:

• Es más defendible que simplemente publicar contenido.
• Te permite escalar un canal de adquisición ofreciendo valor real a tus leads potenciales.
• No solo genera clics, sino leads y prospectos que luego puedes nutrir y calificar.

Y aquí viene lo interesante: los LLM están haciendo que las personas obtengan respuestas mucho más rápido que buscando en Google [01:33]. Por eso, apostarle solo a contenido informacional ya no alcanza. Necesitas crear recursos únicos y difíciles de copiar.

¿Por qué una herramienta web es mejor que un artículo para SEO? Porque es más defendible, escala como canal de adquisición y convierte visitantes en leads calificados. Ahrefs, por ejemplo, atrae más de 68.000 personas al mes con sus herramientas gratuitas.

Cómo aplicar el framework de growth a una herramienta interactiva

Antes de tocar código, todo empieza con un análisis de negocio. El primer insight es que las herramientas y recursos únicos que generas como marca son una oportunidad real, siempre que sepas vincularlas con tu caso de uso [02:04].

Ahrefs lo hace perfecto: venden un software como servicio para posicionar empresas en buscadores, y sus herramientas están alineadas exactamente con eso [02:28].

En el ejemplo de la clase, el framework se define así:

• Palanca de crecimiento: adquisición, sobre todo de nuevas audiencias [02:47].
• Apetito: dos semanas para sacar una primera versión y ver si genera tracción [02:52].
• Restricciones: integraciones no-code y low-code, sin developers, apoyándose en herramientas de inteligencia artificial [03:00].
• Ejecución: Claude para generar el código y Framer para el sitio web [03:16].

El objetivo concreto fue crear una calculadora para The Growth System que calcula los growth loops virales y su potencial, alineada con una audiencia de growth, innovación y marketing [03:22].

Qué debe incluir el prompt para generar una herramienta en Claude

El corazón del proceso es el prompt. Si quieres que sea reutilizable, arma tus prompts de forma modular. Un buen prompt para crear herramientas incluye:

• Una paleta y estilo de colores fijos, para que siempre respete tu marca [04:18].
• Formato en Markdown, que es lo que los LLM entienden mejor para jerarquizar información [04:33].
• El alcance de lo que quieres y las restricciones, es decir, qué no debe hacer [04:41].
• El lenguaje o entorno donde vivirá: en este caso HTML, CSS y JavaScript para las interacciones, compatible con Framer [04:54].

Un punto crítico: si tu herramienta tiene lógica o cálculos, debes decirle exactamente cuáles son y revisarlos [05:14]. Tu herramienta solo será tan buena como la lógica que le enseñes. Si el modelo no sabe hacerlo bien y tú no lo corriges, el resultado no será el que esperas [05:27].

¿Qué necesita un prompt para crear una calculadora web? Colores de marca, formato Markdown, alcance y restricciones claras, el lenguaje de salida (HTML, CSS, JavaScript) y la lógica exacta de los cálculos revisada por ti.

Como la meta es rankear en la web, también se le pide optimizar para SEO usando H1, H2, headers y main sections [05:50]. Y un consejo honesto de la clase: si nunca has hecho algo, cuéntale tu idea al LLM, dónde lo quieres hacer y cuál es el objetivo final. Muchas de estas cosas se descubren en la práctica, no antes [06:35].

Cómo integrar el código de la calculadora en Framer paso a paso

Una vez Claude entrega el código, toca llevarlo al sitio. En Framer, el flujo fue así:

1. Crear una carpeta llamada Herramientas para agrupar las calculadoras [07:26].
2. Crear una página individual dentro, como Calculadora viralidad, arrastrándola sobre la carpeta hasta que quede anidada [08:00].
3. La URL queda estructurada como herramientas/calculadora-viralidad [08:15].
4. Insertar un code embed, seleccionar HTML y pegar el código generado en Claude [08:41].

Si quieres modificar la calculadora, lo haces en Claude y vuelves a pegar el código hasta quedar satisfecho [09:02]. Dos detalles prácticos que la clase resalta:

• Estira el campo de código, porque si no la calculadora queda cortada [09:20].
• Hazlo responsive para desktop, tablet y teléfono, ya sea con un par de clics o configurándolo manualmente [09:30].

Al probarla con 5.000 usuarios, la herramienta devuelve un embudo completo del loop: usuarios activos, porcentaje que invita, total de invitaciones, vistas, clics, registros y nuevos usuarios [10:03]. Todo listo para publicarse e indexarse.

Después de darle undraft y publicar, la página queda viva en la estructura thegrowthsystem/herramientas/calculadora-viralidad, responsive e indexable [10:32]. Le falta más diseño, experiencia de usuario y el menú superior, pero esos elementos se agregan fácil si ya tienes un sistema de diseño [10:52].

Este mismo flujo funciona en Webflow o WordPress con code embed, porque casi todas las plataformas te dejan embeber código personalizado [06:57].

El reto es claro: analiza qué recurso le interesa a tu audiencia, créalo con un prompt de inteligencia artificial e intégralo a tu sitio para rankear en LLM, en Google y distribuirlo en redes. Toma una captura de tu resultado y cuéntanos en los comentarios cómo te fue.