Nivel 2 · Tu formato base

Si cada propuesta se la pides de cero a la IA, cada propuesta se ve distinta y cada vez peleas con el diseño. El formato base se hace una vez: tu estructura, tus colores, tu forma de cobrar. Después solo cambias el contenido.

El beneficio no es estético. Es que la segunda propuesta te toma quince minutos en vez de dos horas, y que todas las que manda tu equipo se parecen entre sí.

Paso 1 · Genera la plantilla

Si ya hiciste el nivel 1, adjunta ese archivo y di "usa este como punto de partida". Si no, adjunta dos o tres propuestas tuyas (las que ganaron, de preferencia) para que extraiga tu estructura real.

Quiero una PLANTILLA BASE de propuesta comercial en HTML, que voy a reusar para todos
mis clientes. Adjunto [mi propuesta anterior / dos propuestas que gané], para que
partas de mi estructura y mi forma de escribir, no de una genérica.

LA PLANTILLA DEBE TENER ESTAS SECCIONES, en este orden:
1. Portada: título, nombre del cliente, fecha, quién la prepara.
2. Resumen: tres renglones que se entiendan sin leer el resto.
3. Lo que entendimos: el problema del cliente, con sus palabras.
4. Lo que proponemos: el alcance, en bloques.
5. Cómo lo hacemos: fases y tiempos.
6. Qué gana: resultados esperados, con cifras.
7. Inversión: precio, qué incluye, qué no incluye.
8. Por qué nosotros: prueba, casos, equipo.
9. Siguientes pasos: qué pasa si dice que sí, con fechas.
10. Pie: vigencia de la oferta, condiciones y contacto.

CÓMO DEBE ESTAR HECHA:
- Cada texto que cambia de un cliente a otro va marcado con llaves dobles y en
  MAYÚSCULAS, así: {{NOMBRE_CLIENTE}}, {{FECHA}}, {{PRECIO_TOTAL}}. Todos los
  marcadores juntos en un comentario HTML al inicio del <body>, como lista de
  pendientes por llenar.
- Todos los colores, tamaños y espaciados definidos como variables CSS en :root, para
  cambiarlos en un solo lugar.
- Una hoja de estilo con: h1 a h3, párrafo, lista, tabla, tarjeta, cita de cliente,
  bloque de cifra destacada, caja de advertencia y botón de liga. Aunque la plantilla
  no use todos, que estén definidos para las propuestas siguientes.
- El HTML visible NUNCA trae contenido de ejemplo: donde va texto de cliente, va su
  marcador y nada más. El ejemplo de cómo se llena cada sección va en un comentario
  HTML arriba de ella. Es la única forma de que no se me escape a un cliente real el
  nombre de otro.
- Deja un hueco {{LOGO_BASE64}} en la portada, dentro de un <img src="{{LOGO_BASE64}}">
  con su alt. Si te adjunto el logotipo, conviértelo tú a base64 y déjalo ya puesto.

MI MARCA:
- Empresa: [nombre]
- Colores: [hex del principal y del acento, o "usa azul marino y naranja"]
- Tono: [formal y directo / cercano y claro / técnico]
- Lo que nunca falta en mis propuestas: [p. ej. la garantía, el equipo asignado]
- Lo que nunca pongo: [p. ej. descuentos por volumen, plazos abiertos]

REGLAS TÉCNICAS DEL ARCHIVO (obligatorias, sin excepción):
- Entrégame UN SOLO archivo .html autocontenido, en UTF-8, de menos de 5 MB.
- Todo el CSS en un <style> dentro del documento. Prohibido <link> a hojas externas.
- Todo el JavaScript en un <script> dentro del documento. Prohibido <script src="...">: no hay librerías externas (nada de Chart.js, Tailwind CDN, jQuery, React).
- Prohibidos iframes, videos embebidos y formularios que envían datos.
- Prohibido localStorage, sessionStorage y document.cookie.
- Prohibidos alert(), confirm(), prompt() y window.print().
- Tipografías del sistema. Imágenes en base64 (data:) o ninguna.
- Móvil primero: en 390 px se lee sin zoom ni scroll horizontal.
- Incluye @media print básico.

Entrégame el archivo .html completo.

Tu logotipo, en base64

El documento no puede traer imágenes de una URL: si ese servidor cambia o se cae, tu propuesta amanece rota. El logotipo va incrustado en el archivo, convertido a texto. No tienes que saber hacerlo: adjunta el PNG o el JPG en la misma conversación y pídele a tu IA que lo incruste en base64 dentro del <img> de la portada. Cualquiera de las cuatro lo hace.

Dos cuidados: usa un logotipo chico —un PNG de 200 px de ancho basta y pesa poco— porque incrustado ocupa como un tercio más de lo que pesa el archivo, y el límite del documento es de 5 MB. Y guárdate el texto que resulta: es el mismo para todas tus propuestas.

Paso 2 · Guárdala donde la vuelvas a encontrar

Ese archivo es tuyo y no vuelve a generarse. Guárdalo como plantilla-propuesta.html en tu carpeta de trabajo, en tu Drive, donde sea que tu equipo lo encuentre. Si usas Claude, déjalo en un Proyecto; si usas ChatGPT, súbelo a los archivos del GPT o del proyecto. Lo importante es que la siguiente propuesta empiece de ahí y no de cero.

Cuando esto deje de ser cosa de una persona, Dónde vive tu formato base explica los tres escalones —archivo, asistente, repositorio— y cuál te toca.

Paso 3 · Úsala para cada cliente

Adjunto mi plantilla base de propuesta (plantilla-propuesta.html) y la información de
un cliente nuevo. Llena la plantilla para este cliente.

REGLAS:
- Respeta la estructura, los estilos y el CSS de la plantilla. No la rediseñes.
- Sustituye TODOS los marcadores {{ }}. Si no tengo el dato, deja [FALTA: ...] y
  hazme la lista al final.
- Ajusta la extensión de cada sección a lo que este cliente necesita: si no hay caso
  de éxito comparable, quita esa sección en vez de rellenarla con paja.
- No cambies precios ni plazos por tu cuenta: usa exactamente los que te doy.

EL CLIENTE:
- Empresa y giro: [ ]
- Contacto y puesto: [ ]
- El problema, con sus palabras: [pega aquí lo que te dijeron por correo o en la llamada]
- Lo que proponemos: [ ]
- Precio y condiciones: [ ]
- Plazos: [ ]
- Lo que sé que les preocupa: [p. ej. que su equipo no lo adopte]

REGLAS TÉCNICAS DEL ARCHIVO (obligatorias, sin excepción):
- Un solo archivo .html autocontenido, UTF-8, menos de 5 MB.
- Todo el CSS y todo el JavaScript dentro del documento. Prohibido <script src> y
  <link> a hojas externas: no hay librerías de CDN disponibles (nada de Chart.js,
  Tailwind CDN, jQuery, React). Si agregas una gráfica, dibújala en SVG a mano.
- Prohibidos los iframes y los videos embebidos; usa una liga normal.
- Prohibidos los formularios que envían datos: para contacto, mailto: o WhatsApp.
- Prohibido localStorage, sessionStorage y cookies: lanzan error en el documento.
- Prohibidos alert(), confirm(), prompt() y window.print().
- Prohibidos los campos de contraseña, tarjeta, CLABE, CVV o NIP.
- Imágenes incrustadas en base64. Tipografías del sistema.
- Móvil primero y con @media print.

Entrégame el archivo .html completo.

Paso 4 · Revisar antes de mandar

Si eres tú solo, este paso te ahorra un sonrojo. Si tienes equipo, es el que te quita de encima revisar línea por línea lo que armó cada quien. Adjunta la plantilla y la propuesta terminada:

Adjunto dos archivos: mi plantilla base (plantilla-propuesta.html) y una propuesta que
acabamos de armar con ella. Revísala contra la plantilla y contra las reglas de abajo,
y dame una lista de hallazgos. NO la corrijas todavía: primero quiero verlos.

REVISA:
1. Marcadores {{ }} sin sustituir, y cualquier resto del contenido de ejemplo de la
   plantilla —sobre todo nombres de otras empresas o de otros clientes.
2. Secciones de la plantilla que falten, o secciones agregadas que no estaban.
3. Cifras: cualquier número, porcentaje, plazo o precio que aparezca en el documento y
   no venga de lo que me dieron. Lista cada uno con el texto donde aparece.
4. Citas del cliente sin atribuir, o citas que lo dejen mal parado frente a un colega.
5. Superlativos y frases de folleto ("líderes en el mercado", "soluciones de clase
   mundial"), y promesas sin respaldo.
6. Reglas técnicas rotas: <script src> o <link> a un CDN, iframes, formularios que
   envían datos, localStorage, alert(), window.print(), campos de contraseña o de pago.
7. En 390 px de ancho: algo que se salga de la pantalla o quede ilegible.

Ordena los hallazgos por gravedad: primero lo que le costaría el trato a quien la mande
(un nombre de otro cliente, una cifra inventada), al final lo cosmético.

Cuando quede la lista, pídele las correcciones que sí quieras, una por una. Ese "no la corrijas todavía" importa: si le pides revisar y arreglar en el mismo mensaje, arregla en silencio y nunca te enteras de que había un nombre de otro cliente adentro.

Cómo hacer que la plantilla mejore con el tiempo

Cada vez que ganes un trato, vuelve a la plantilla y súbele lo que funcionó: la sección que te pidieron explicar, la objeción que apareció otra vez, la forma de presentar el precio que no generó ruido. La plantilla es donde se acumula lo que va aprendiendo tu área comercial.

Si tienes equipo, tres reglas que evitan que en seis meses haya seis plantillas distintas:

• Un solo lugar y un solo dueño. La plantilla vive en un Proyecto de Claude, un GPT o una carpeta compartida, y una persona es la que la actualiza. Nadie la edita "nomás para este cliente": para eso están los marcadores.
• Ponle la fecha en el nombre del archivo —plantilla-propuesta-2026-09.html— y avisa en el chat del equipo cuando haya una nueva. Cartaventa versiona tus documentos publicados, no tu plantilla.
• El paso 4 lo corre quien arma la propuesta, antes de pasártela. Es más barato que tu revisión y atrapa lo mismo.

Qué sigue

De la transcripción a la propuesta: con la plantilla lista, el siguiente salto es que la propuesta salga de la llamada.