Cómo crear una calculadora de presupuestos con Claude o ChatGPT

Ilya SpiridonovIlya Spiridonov
17 min de lectura

Conoces tus precios, pero tus posibles clientes no tienen una forma sencilla de probarlos. No pueden elegir un paquete, añadir unas páginas y ver cómo cambia el total sin esperar a que les envíes un presupuesto.

Claude y ChatGPT pueden crear esa calculadora a partir de una lista de tarifas. Tú aportas los precios y las reglas, la IA escribe la página y te quedan dos tareas: comprobar los números y sacar del chat un archivo que funcione. Aquí explicamos ambas, con un prompt para copiar y seis resultados de referencia.

Prueba primero el ejemplo terminado. Elige un paquete, cambia el número de páginas adicionales y activa o desactiva los extras.

Tu proyecto

Una landing page y una ronda de revisiones.

$150.00 por página, hasta 10. Un 5% de descuento en páginas adicionales a partir de 5.

Extras

Estimación

Precio base
$800.00
Páginas adicionales0 × $150.00
$0.00
Descuento por cantidadA partir de 5 páginas adicionales
$0.00
Redacción
$0.00
Total de pago único
$800.00
Soporte mensualSe cobra cada mes
$0.00
Primera factura estimadaTotal único más el primer mes de soporte
$800.00

Estimación ilustrativa. Impuestos excluidos. El alcance y el precio definitivos se confirman en la propuesta comercial. Importes en USD.

Los precios son ficticios para una pequeña agencia de diseño web y no incluyen impuestos. Sustitúyelos por los tuyos cuando hayas visto cómo encajan las piezas.

Define los precios y las reglas

Empieza por los números antes de escribir el prompt. La IA construye lo que describes; una lista de tarifas ambigua produce una calculadora ambigua. Esta contiene seis precios y una sola regla de descuento.

ConceptoPrecioCobro
Paquete Basic$800Único
Paquete Standard$1,200Único
Paquete Plus$1,800Único
Landing page adicional$150 cada una, de 0 a 10Único
Redacción de textos$200, opcionalÚnico
Soporte mensual$75, opcionalCada mes

Sobre esos precios se aplican tres reglas:

  • A partir de cinco páginas adicionales se descuenta un 5% de toda la partida de páginas adicionales. El paquete y la redacción nunca tienen descuento.
  • El soporte mensual queda fuera del total único, porque una cuota mensual supone un compromiso distinto del coste de creación.
  • La primera factura estimada suma el total único y un mes de soporte.

La calculadora empieza en Basic, con cero páginas adicionales y ambos extras desactivados. Si el campo de páginas está vacío, es negativo, tiene decimales o supera 10, muestra un error junto al campo y oculta los totales hasta corregirlo.

Calcula tú los resultados antes de pedir nada. Cada versión debe superar estos seis casos:

  • Mínimo. Basic, 0 páginas adicionales, sin extras. Pago único $800.00, mensual $0.00, primera factura $800.00.
  • Cantidad. Standard, 2 páginas adicionales, sin extras. Pago único $1,500.00, mensual $0.00, primera factura $1,500.00.
  • Extra. Standard, 2 páginas adicionales, redacción. Pago único $1,700.00, mensual $0.00, primera factura $1,700.00.
  • Por debajo del umbral de descuento. Standard, 4 páginas adicionales, redacción. Pago único $2,000.00, mensual $0.00, primera factura $2,000.00.
  • En el umbral de descuento. Standard, 5 páginas adicionales, redacción y soporte. Pago único $2,112.50, mensual $75.00, primera factura $2,187.50.
  • Máximo. Plus, 10 páginas adicionales, redacción y soporte. Pago único $3,425.00, mensual $75.00, primera factura $3,500.00.

Estos totales se calcularon por separado y la calculadora de arriba coincide con los seis. Pega la lista de tarifas, las tres reglas y los seis resultados en el prompt, y guarda los resultados para las comprobaciones posteriores.

Crea la calculadora en Claude

Claude es la vía principal porque puede crear la calculadora como un artefacto interactivo, una herramienta funcional junto al chat. Anthropic ofrece artefactos en los planes Free, Pro, Max, Team y Enterprise, con la ejecución de código y la creación de archivos activadas.

Pega el prompt

Abre una conversación nueva en claude.ai o en la aplicación de escritorio. Empieza con Créalo como un artefacto interactivo autónomo y autosuficiente, sin recursos externos. para recibir un artefacto permanente en lugar de una visualización pasajera dentro del chat. Después pega este prompt y añade al final la lista de tarifas, las tres reglas y los seis resultados esperados donde se indica.

Crea una calculadora de presupuestos interactiva y funcional para una pequeña agencia de diseño web.
A continuación proporcionaré las tarifas y las reglas de precios. Usa exactamente esos valores.
Si falta alguna regla o hay contradicciones, pregúntame antes de elegir un valor.

El resultado será un artefacto autónomo y autosuficiente: una vista previa y un
único archivo completo descargable llamado quote-calculator.html. Incluye HTML,
CSS y JavaScript en ese archivo, sin recursos externos como fuentes, imágenes
ni scripts cargados de otros sitios. Debe funcionar al abrirlo en un navegador,
sin instalación, bibliotecas externas, llamadas a IA ni servidor.

Incluye un selector de paquetes, un campo numérico para páginas adicionales y
casillas para redacción de textos y soporte mensual. Actualiza la estimación al
cambiar los datos. Muestra por separado y con etiquetas el precio base, páginas
adicionales, descuento, redacción, total único, soporte mensual y primera factura
estimada. Usa USD con dos decimales.

Añade el aviso: «Estimación ilustrativa. Impuestos excluidos. El alcance y el precio
definitivos se confirman en la propuesta comercial». Incluye un botón Restablecer.

La cantidad de páginas adicionales debe ser un entero de 0 a 10. Si está vacía o
no es válida, muestra un error junto al campo y oculta los totales hasta corregirla.
Empieza con Basic, cero páginas y extras desactivados.

Usa etiquetas claras, foco de teclado visible y controles legibles en móviles.
Usa los IDs estables: package, extra-pages, copywriting, monthly-support, reset.
Agrupa las tarifas en un bloque de configuración etiquetado.
No recopiles datos de contacto, envíes pedidos, guardes selecciones ni aceptes pagos.
No incluyas código de seguimiento: el alojamiento y el seguimiento van aparte.

Antes de entregar, comprueba la tabla de resultados esperados que proporcionaré.
Indica las correcciones y entrégame el archivo HTML definitivo.

Tarifas, fórmulas y resultados esperados:
[Pega aquí las tablas proporcionadas.]

Conviene conservar tres partes en cualquier versión del prompt. Pedir que la IA pregunte si falta una regla permite detectar lagunas antes que el cliente. Exigir un único archivo autónomo sin recursos externos hace que la calculadora sea portátil. La comparación final con tu tabla aporta una primera revisión, sin sustituir la tuya.

¿Prefieres adjuntar un archivo? Usa rate-card.csv mediante el botón + y Add files or photos, o arrástralo al chat. Anthropic incluye CSV entre los documentos compatibles.

El archivo contiene precios, reglas y fórmulas. Sustituye las dos últimas líneas del prompt por la siguiente instrucción y pega debajo solo los seis resultados esperados.

Las tarifas y reglas están en rate-card.csv adjunto. Confirma las que has leído
y crea después la calculadora como un archivo autónomo y autosuficiente,
sin recursos externos.

Revisa la primera versión

Deberías ver un menú de paquetes, un campo de páginas adicionales, dos casillas de extras, un botón Restablecer y siete importes separados: precio base, páginas adicionales, descuento, redacción, total único, soporte mensual y primera factura estimada. Al cambiar un dato, la estimación debe actualizarse sin pulsar ningún botón.

Haz ajustes

Si un total es incorrecto, explica el problema a la IA como a una persona: indica qué caso falla y qué resultado esperabas.

Cada total incorrecto señala una regla. Standard con cinco páginas adicionales, redacción y soporte debe mostrar $2,112.50. Un total único de $2,042.50 significa que el descuento se ha aplicado a todo el total, en lugar de solo a las páginas adicionales. $2,150.00 indica que no se ha aplicado.

Si vaciar el campo deja un total antiguo o muestra NaN, pide directamente: «Cuando las páginas adicionales estén vacías, muestra un error junto al campo y oculta los totales. Mantén un solo archivo autónomo sin recursos externos». Cambia una cosa por mensaje y repite el caso que falló.

Exporta el archivo

Cuando los números coincidan, saca el archivo del chat. Si Claude lo ha creado con la plantilla Design, usa Export y elige HTML autónomo. La página de artefactos de Anthropic identifica Export como el control de exportación de las plantillas; su ayuda de Claude Design incluye HTML autónomo entre los formatos.

Si tu artefacto no ofrece HTML, pide a Claude que genere la calculadora completa en un único archivo autónomo y autosuficiente llamado quote-calculator.html, sin recursos externos y listo para descargar.

Usa Claude Cowork con una lista de tarifas existente

Cowork añade un flujo con carpetas a la opción de adjuntar CSV: Claude lee el archivo de una carpeta de tu ordenador y guarda allí la calculadora terminada, sin subir ni descargar nada. Anthropic indica que puede leer y escribir archivos locales dentro de las carpetas conectadas.

Pon rate-card.csv en una carpeta y conéctala desde la aplicación de escritorio de Claude. Cowork está disponible en planes de pago: Pro, Max, Team y Enterprise.

Usa el mismo prompt y la misma primera línea, pero sustituye las dos últimas líneas sobre pegar las tarifas por la instrucción siguiente. El archivo ya contiene los precios y las reglas; pega debajo solo los seis resultados esperados.

Lee rate-card.csv de la carpeta que he conectado. Confirma las tarifas y reglas
que has leído. Crea la calculadora como un HTML autónomo y autosuficiente,
sin recursos externos, y guárdala como quote-calculator.html en esa carpeta.
No modifiques la lista original y dime dónde has guardado el resultado.

Cowork ejecuta las tareas en la nube y accede a la carpeta a través de la aplicación de escritorio, por lo que debes mantenerla abierta.

Algunas cuentas todavía muestran Chat y Cowork por separado; en ellas elige Cowork. Anthropic está unificando ambos en una conversación, con un despliegue gradual que empieza por Pro y Max. Si ya tienes la experiencia unificada, haz la misma petición en una conversación normal y conecta la carpeta en la aplicación de escritorio como antes.

Usa ChatGPT como alternativa

La lista de tarifas, el prompt y las seis comprobaciones no cambian; solo varían la creación y la descarga. Pega el mismo prompt, tarifas, reglas y resultados esperados en ChatGPT. Debes recibir el mismo quote-calculator.html autónomo y autosuficiente, sin recursos externos y descargable.

La documentación de OpenAI indica que los HTML generados pueden abrirse como vistas previas interactivas donde exista esa función, y que las herramientas de vista previa y revisión dependen de la interfaz utilizada. Para ChatGPT Work en la web, indica revisar el archivo en el chat y descargarlo cuando haga falta.

ChatGPT también puede presentar la página como Site, Canvas o vista previa HTML en lugar de un archivo. La guía para compartir una web HTML generada con ChatGPT explica cada caso. Si no aparece vista previa, descarga el archivo y ábrelo en el navegador.

En cualquier caso, prueba el archivo descargado, porque será la versión que compartirás.

Comprueba la calculadora exportada

Una calculadora puede parecer correcta y calcular mal. Un importe equivocado delante de un cliente cuesta dinero o credibilidad. Cierra el chat de IA y comprueba el archivo descargado.

  1. Ábrelo con doble clic. Debe funcionar en el navegador sin iniciar sesión, sin internet y sin Claude abierto.
  2. Elige Standard, introduce 2 páginas adicionales y marca redacción. El total único debe ser $1,700.00.
  3. Cambia a 4 páginas: $2,000.00 sin descuento. Cambia a 5 y activa soporte mensual: $2,112.50 de pago único, $75.00 mensuales y $2,187.50 en la primera factura, con una partida de descuento de -$37.50.
  4. Vacía el campo y prueba -1, 2.5 y 11. Cada caso debe mostrar un error junto al campo y ocultar los totales hasta corregirlo.
  5. Pulsa Restablecer. Debe volver a Basic, 0 páginas y ambos extras desactivados, con $800.00.
  6. Comprueba los demás casos de la lista de seis. Plus con 10 páginas y ambos extras es una buena prueba final: $3,425.00, $75.00 y $3,500.00.
  7. Reduce la ventana al ancho de un móvil o abre el archivo en el teléfono. Nada debe desplazarse horizontalmente y los controles deben ser fáciles de tocar.
  8. Deja el ratón y usa el teclado. Tab debe recorrer todos los controles con foco visible; Espacio debe cambiar las casillas. En Safari para Mac, Tab solo llega a botones y otros controles si Navegación con teclado está activada en los ajustes de Teclado.

Después abre el archivo en un editor de texto. Los precios deben aparecer una sola vez, agrupados en un bloque etiquetado. Más adelante puedes modificarlo tú o pedírselo a la IA.

No incluyas cifras privadas en el archivo

Quien abra el archivo puede leer su código, así que los costes internos, márgenes y umbrales de aprobación no deben estar ahí. Los cálculos del navegador tampoco imponen precios aprobados: el destinatario puede editar su copia.

Comparte la calculadora con un cliente

Envía un enlace en lugar del archivo. El correo y el almacenamiento en la nube suelen mostrar el HTML como código o bloquearlo, como explica la guía para compartir un HTML con un cliente.

Claude permite compartir artefactos, con opciones según tu plan y los ajustes de la organización. Según la documentación de Anthropic, para abrir un artefacto recién compartido hace falta una cuenta de Claude, salvo los artefactos antiguos publicados desde un chat. Resulta práctico para un compañero que use Claude y añade un paso para un cliente que no lo use.

Para obtener un enlace que cualquier cliente pueda abrir, sube el archivo exportado a un servicio que sirva HTML. Nuestro producto HummingDeck lo hace; la página para compartir HTML explica los detalles.

Un único HTML funciona en el plan gratuito. Sigue estos pasos:

  1. En Biblioteca de documentos, elige Añadir documento y selecciona quote-calculator.html. El archivo debe cumplir los requisitos de carga de HTML.
  2. Al terminar el procesamiento, pulsa Nuevo enlace, elige un enlace personal y crea primero uno para ti, con un nombre de prueba.
  3. Ábrelo en una ventana privada como lo hará el cliente y repite las comprobaciones. El visor ejecuta el archivo en un marco aislado, así que funcionar en tu ordenador no demuestra que funcione el enlace del destinatario.
  4. Crea el enlace personal del cliente igual y envíalo. Tu visita queda en el enlace de prueba y el del cliente empieza sin actividad. Cuando lo abra, consulta el área Enlaces del documento para ver la visita registrada en ese enlace.

Si la operación incluye varios documentos, coloca la calculadora en una Room junto a una propuesta comercial fija y un caso práctico. El cliente abrirá un solo enlace. El plan gratuito admite una Room con hasta tres documentos; la plantilla de propuesta de diseño web sirve como propuesta fija.

Qué indican la estimación y la actividad

La calculadora y la propuesta cumplen funciones distintas. La primera permite explorar opciones y ver una estimación; el precio al que te comprometes va en una propuesta fija que emites tú.

Si quieres que el cliente responda sobre ella, un enlace de propuesta registra una aceptación, solicitud de cambios o rechazo en Pro y Business. Es una respuesta del flujo de trabajo vinculada al documento de propuesta; no recoge una firma ni lo que mostraba la calculadora.

En el plan gratuito, la página del documento muestra aperturas totales, visitantes únicos, tiempo de lectura y porcentaje medio completado. Starter y superiores añaden análisis por página y los clics admitidos. La guía para añadir analíticas a una página HTML compara esta opción con los scripts de analítica. Pulsar los botones, casillas, desplegable o campo numérico de la calculadora cuenta como clic en enlace; verás el recuento por visitante y sesión.

Qué muestra la actividad

  • Una visita indica que se solicitó el enlace y comenzó una sesión. No verifica quién lo abrió; el enlace puede reenviarse.
  • El número de clics refleja cuánto se usaron los controles. HummingDeck no muestra las opciones elegidas ni el total en pantalla. Escribir un número o cambiar el desplegable con el teclado no cuenta como clic.
  • Ninguna señal demuestra intención de compra. Úsalas para decidir cuándo conviene hacer seguimiento.

CPQ, abreviatura de configure, price, quote, es una herramienta distinta. Salesforce lo describe como software para configurar productos, aplicar reglas de precios, gestionar descuentos y aprobaciones y generar presupuestos, con integración en CRM y ERP.

Esta calculadora configura y calcula precios de una lista sencilla. Si necesitas guardar presupuestos, un catálogo privado o aprobaciones de descuentos, necesitas un sistema de presupuestación.

Preguntas frecuentes

¿Necesito Claude Cowork para crear una calculadora de presupuestos?

Basta con una conversación normal de Claude: pega las tarifas o adjunta rate-card.csv. Cowork añade un flujo con carpetas: Claude lee el archivo de una carpeta conectada y guarda allí la calculadora. Requiere un plan de pago de Claude y mantener abierta la aplicación de escritorio para acceder a esa carpeta.

¿Puedo partir de una lista de precios de Excel o Google Sheets?

Exporta la lista como CSV y adjúntala al chat, o pega la tabla en el prompt. Antes de crear nada, pide a la IA que repita cada precio y regla que haya leído. Contrástalos con tu hoja y prueba la calculadora terminada con totales calculados en la propia hoja.

¿Cómo envío una calculadora interactiva a un cliente?

Envía un enlace en lugar del archivo. Sube el HTML a un servicio que lo sirva, como un enlace de HummingDeck en el plan gratuito, o comparte el artefacto desde Claude si el cliente tiene cuenta. Prueba antes con un enlace propio y separado, para que tu visita no aparezca en el enlace del cliente.

¿Es lo mismo una calculadora de presupuestos que un software CPQ?

Una calculadora muestra una estimación a partir de una lista fija. El software CPQ también aplica reglas de precios y aprobaciones de descuentos, genera presupuestos y se integra con CRM y ERP. Deja que el comprador explore opciones en la calculadora y envía después una propuesta fija con el precio al que te comprometes.

¿Cómo cambio los precios más adelante?

Edita los números del bloque de tarifas etiquetado o pide a la IA que los cambie en el mismo archivo autónomo y repite las seis comprobaciones. Después usa Reemplazar en el documento de HummingDeck para conservar los enlaces existentes. No se puede reemplazar un documento con un enlace de propuesta activo; revoca ese enlace primero.

¿Puede enviarme el presupuesto por correo o guardar la selección del cliente?

La versión de este artículo solo calcula en el navegador. Enviar presupuestos, guardar selecciones o aceptar pagos exige un servicio de formularios, una base de datos o un sistema de presupuestación detrás de la página. Deja esas funciones fuera y envía una propuesta fija con el precio al que te comprometes.

Sobre el autor

Ilya Spiridonov es el fundador de HummingDeck, una plataforma para compartir documentos que sirve archivos HTML autónomos a destinatarios externos mediante enlaces rastreables.

Fuentes

Comparte tu calculadora de presupuestos mediante un enlace

Artículos relacionados: