En esta página
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, ChatGPT y 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. 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. Pídela con el prompt estrellaPega el prompt de abajo con tus datos. Pide siempre un único archivo HTML y que se vea bien en el móvil.
- 3. Pruébala con números que conocesHaz 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. 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. Copia el código y pégalo en tu webCopia 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. Revísala en el móvilAbre 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
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.
Personaliza el prompt6 huecos en amarillo para rellenar con lo tuyo
Probado en ChatGPT, Claude y Gemini
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.
- Para meter la calculadora en una web completa, sigue crea tu primera web con Claude Code en una tarde.
- Y si te gusta la idea de crear tus propias herramientas, prueba a hacer una extensión de Chrome con IA: 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.
Herramientas que usa
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.
¿Te ha funcionado?
Creador de la red Hub Media. Prueba cada prompt en varios modelos antes de publicarlo.
Un recurso nuevo cada semana
Te llega al correo antes que a Instagram. Sin spam.
