# Crea una calculadora o un presupuestador para tu web con IA, sin saber programar > Pide a ChatGPT, Claude o Gemini una calculadora de precios o un presupuestador para tu web, pruébalo en el chat y pégalo en WordPress, Wix o Shopify. - Tipo: Guía - Categoría: Programación - Autor: Álvaro Checa - Publicado: 27 de octubre de 2026 - Actualizado: 27 de octubre de 2026 - Página original: https://recursos.hubmedia.io/guias/calculadora-para-tu-web-con-ia - Publicado por: Recursos Hub Media (https://recursos.hubmedia.io/) ## Qué puedes crear Una **pequeña herramienta** en tu web hace que la gente se quede, juegue con los números y te escriba con una idea clara de lo que quiere. Algunos ejemplos: - **Presupuestador:** eliges el servicio, las opciones y la cantidad, y ves un precio orientativo. - **Calculadora de precios:** cuánto cuesta un pedido según unidades, tamaño o envío. - **Calculadoras prácticas:** cuánta pintura necesitas para una habitación, qué talla te corresponde, cuántas raciones salen de una tarta. No hace falta programar. La IA escribe el código y tú solo decides cómo funciona y lo pruebas. ## Lo que necesitas saber (sin tecnicismos) Estas herramientas se hacen con tres «idiomas» que entiende el navegador: - **HTML:** el contenido (títulos, casillas, botones). - **CSS:** el aspecto (colores, letras, tamaños). - **JavaScript:** lo que hace los cálculos cuando pulsas un botón. La clave es pedir **todo en un único archivo**. Así tienes un solo bloque de código para copiar y pegar en tu web. [Claude](https://recursos.hubmedia.io/herramientas/claude), [ChatGPT](https://recursos.hubmedia.io/herramientas/chatgpt) y [Gemini](https://recursos.hubmedia.io/herramientas/gemini) te enseñan una **vista previa** al lado del chat (en Claude se llaman artefactos; en ChatGPT y Gemini, canvas), así que puedes probar la calculadora antes de llevártela. ## Paso a paso *Unos 30 minutos* 1. **1. Escribe cómo calculas tú**: Antes de abrir la IA, apunta en una nota cómo haces el cálculo a mano: precios, opciones, mínimos, descuentos y redondeos. Por ejemplo: «Sesión de fotos: 150 € la primera hora, 90 € cada hora extra, 0,40 € por kilómetro a partir de 20 km». 2. **2. Pídela con el prompt estrella**: Pega el prompt de abajo con tus datos. Pide siempre un único archivo HTML y que se vea bien en el móvil. 3. **3. Pruébala con números que conoces**: Haz tres o cuatro presupuestos que ya hayas hecho a mano y comprueba que el resultado coincide. Prueba también casillas vacías, ceros y cantidades enormes. 4. **4. Pide los cambios de uno en uno**: «Pon el botón en mi azul #2F4BFF», «añade una opción de envío urgente», «redondea a euros enteros». Cambios pequeños y vuelve a probar después de cada uno. 5. **5. Copia el código y pégalo en tu web**: Copia todo el código, de la primera a la última línea, y pégalo en el bloque de código de tu web (lo explicamos más abajo). 6. **6. Revísala en el móvil**: Abre la página publicada en el móvil y haz un presupuesto de prueba. Si algo se descoloca, haz una captura y pásasela a la IA. ## El prompt estrella ### Prompt: Calculadora o presupuestador para tu web (Úsalo en Claude, ChatGPT o Gemini) Versión para ChatGPT, Claude y Gemini (Probado en ChatGPT, Claude y Gemini): ```text Crea una [calculadora de presupuesto / calculadora de precios] para la web de mi negocio: [qué haces, por ejemplo, fotografía de bodas]. Cómo se calcula: [explica tus precios, opciones, mínimos y descuentos]. Quiero que el visitante elija [las opciones: servicio, horas, extras] y vea el precio total al momento, con el desglose debajo. Debajo del total, la frase: «Precio orientativo. Escríbenos para un presupuesto cerrado» y un botón a [tu enlace de WhatsApp o tu formulario]. Requisitos: todo en un único archivo HTML con el CSS y el JavaScript dentro, sin librerías externas, que se vea perfecto en el móvil, colores [tus colores] y letra legible. No guardes ni envíes ningún dato del visitante. Después, explícame en 3 frases cómo cambiar los precios yo solo. ``` Las partes entre [corchetes] son variables: cámbialas por lo que quieras. Si no ves la vista previa, pide: «Muéstramela en un artefacto» (Claude) o «Ábrela en canvas» (ChatGPT y Gemini). ## ¿Dónde pego el código en mi web? | Plataforma | Dónde suele estar | Ten en cuenta | | --- | --- | --- | | WordPress | Bloque «HTML personalizado» en el editor de la página | En WordPress.com, algunos planes no permiten código con JavaScript | | Wix | Elemento para insertar código o HTML (incrustar) | Se muestra en un recuadro: ajusta el alto para que no salga cortado | | Shopify | Sección de contenido o código personalizado en el editor del tema | Prueba antes en una copia del tema | | Squarespace y otras | Bloque de código o de HTML | En algunas, solo en los planes de pago | | Sin web propia | Publícalo como página aparte y enlázalo desde tu bio | Es la opción más rápida para probar | ## Si quieres algo más grande: Claude Code Para una calculadora sencilla, el chat basta. Si quieres algo más completo (varias pantallas, guardar presupuestos en PDF, que te llegue un correo cuando alguien lo envía), **Claude Code** es mejor: es un asistente que crea y edita los archivos de tu proyecto por ti. - Si no lo conoces, empieza por [qué es Claude Code y cómo instalarlo](https://recursos.hubmedia.io/guias/que-es-claude-code-como-instalarlo). - Para meter la calculadora en una web completa, sigue [crea tu primera web con Claude Code en una tarde](https://recursos.hubmedia.io/guias/primera-web-con-claude-code). - Y si te gusta la idea de crear tus propias herramientas, prueba a [hacer una extensión de Chrome con IA](https://recursos.hubmedia.io/guias/extension-de-chrome-con-ia-sin-programar): funciona con el mismo método. ## Antes de publicarla - **¿Los resultados coinciden con tus cálculos a mano?** Es lo más importante. Prueba al menos tres casos reales, incluidos uno con descuento y uno con el mínimo. - **¿Dice que el precio es orientativo?** Así nadie toma el resultado como un presupuesto cerrado. Si cobras IVA u otros impuestos, indica si el precio los incluye. - **¿Te importa que se vean tus precios?** Todo lo que va en el código lo puede ver cualquiera que sepa mirarlo. No pongas márgenes, precios de proveedor ni nada que no quieras enseñar. - **¿Funciona sin conexiones raras?** Pide a la IA que te confirme que no usa librerías externas ni envía datos a ningún sitio. Así es más rápida y no tienes que tocar tu política de privacidad. ## Y después del presupuesto orientativo Cuando alguien te escriba con su número, prepárale el presupuesto definitivo en minutos con estos [prompts para redactar presupuestos y propuestas](https://recursos.hubmedia.io/prompts/presupuestos-y-propuestas-con-ia). ## Preguntas frecuentes ### ¿Necesito saber programar para cambiar los precios después? No. Pide a la IA que ponga todos los precios juntos al principio del código, con un comentario al lado. Así solo cambias los números. O pega el código en el chat y dile qué precio quieres cambiar. ### ¿Qué IA hace mejor estas calculadoras? Claude, ChatGPT y Gemini las hacen bien y te enseñan una vista previa. La diferencia está más en lo claro que expliques tus precios que en la IA que uses. ### ¿Puede la calculadora enviarme los datos del cliente? Sí, pero ya necesitas un formulario o un servicio que reciba los datos, y avisar en tu política de privacidad. Para empezar, es más sencillo un botón que abra tu WhatsApp o tu formulario de contacto.