Plantilla Northbound: web de estudio con portal cliente

Northbound es la plantilla de web para estudio de branding de la galería de Zugo. La parte pública reúne servicios, casos, proceso y contacto, y detrás de un acceso aparte vive un portal de cliente con tareas, conversación y facturas. Clonarla no gasta créditos y cada edición cuesta 3 créditos.

El portal es lo que distingue a esta plantilla de una web de agencia corriente, así que abajo está explicado en detalle: qué funciona ahí dentro y qué está mostrado solo como interfaz.

¿Qué incluye la plantilla Northbound?

La plantilla está montada como dos superficies conectadas. La primera vende el estudio a alguien que no lo conoce; la segunda atiende a un cliente con el que ya hay contrato firmado. Son tareas distintas y están separadas a propósito, porque tienen lector distinto y tono distinto.

En la navegación se nota enseguida: las secciones públicas llevan a la solicitud y la entrada al portal está en un punto aparte, para que un cliente activo no la busque entre los bloques de venta.

La sección de proceso merece atención propia. Cuatro fases con límites explícitos responden a la objeción principal de cualquier encargo: no se sabe qué va a pasar ni cuándo. Ese bloque conviene reescribirlo con tu orden real de trabajo en lugar de dejar el de muestra.

¿Qué sabe hacer el portal de cliente?

El portal muestra el juego completo de pantallas que un estudio necesita para trabajar con un encargo. Hay resumen con el estado del proyecto, lista de materiales con filtros por estado de entrega, hilo de conversación con envío de mensajes, facturas y calendario de pagos.

Hay incluso un botón para aprobar una fase, y es un detalle acertado: la aprobación de etapa suele ocurrir en un chat y se pierde, mientras que aquí se convierte en una acción explícita con rastro. Al lado viven las facturas, es decir la parte más incómoda de la conversación pasada a interfaz.

Pero conviene tener clara la frontera. El portal funciona como interfaz: las pantallas cambian, los filtros filtran, el formulario acepta texto. Detrás no hay cuentas reales, y el estado no sobrevive a recargar la página porque no hay base de datos.

Para que el portal sea operativo hacen falta dos cosas: acceso real y almacenamiento real. Las dos las aporta el conector de Supabase, que se conecta encima de la plantilla. Qué se puede esperar del inicio de sesión generado está contado en si la IA puede crear login y cuentas.

¿A quién le sirve Northbound?

Sirve a estudios y agencias que venden trabajo por proyecto con etapas: branding, diseño, desarrollo, marketing, arquitectura, consultoría. La estructura de servicios, casos, proceso y portal encaja igual de bien en cualquiera de esos nichos.

Resulta especialmente útil a quien está cansado de llevar proyectos por mensajería. Incluso el portal en modo demostración ayuda a vender: enseñas cómo será el trabajo conjunto antes de que el proyecto empiece.

No sirve cuando el servicio es puntual y rápido. Una barbería o una manicurista no necesitan portal, necesitan reservas, y la estructura estorbará. Tampoco sirve a una empresa de producto: allí se vende una suscripción y no un proyecto, y el esqueleto es otro.

Tampoco encaja en un autónomo con encargos cortos: un portal para dos proyectos al mes genera más trabajo del que ahorra.

Hay una bifurcación frecuente: tienes agencia pero todavía no tienes casos. Entonces monta el escaparate sin la sección de casos y añade el portal más tarde. Una rejilla de proyectos vacía hace más daño que su ausencia. El planteamiento general está en cómo crear la web de una agencia con IA.

¿Clonar la plantilla o describir la web desde cero?

La cuenta es cómoda de hacer. Una construcción por descripción cuesta 6 créditos y devuelve un proyecto según tu texto, junto con todo lo que olvidaste mencionar en él. El clon no gasta créditos y devuelve una página que ya viste funcionando, así que pagas solo las diferencias.

Para una web de estudio suele ser buen trato: el juego de secciones de las agencias se parece y lo que cambia es el contenido. Pero hay un caso donde gana el prompt limpio: cuando el servicio funciona de otra manera y el portal no hace ninguna falta. Ahí habrá que desmontar el esqueleto y las ediciones sumarán más que una construcción.

Hay además un beneficio lateral. La plantilla enseña de qué se compone una página de servicios convincente: promesa, alcance del trabajo, orden del trabajo, pruebas y acción. Ese reparto conviene llevárselo a tus propias descripciones cuando plantees algo distinto.

Y un argumento que suele ser decisivo: la vista previa abre antes de clonar. Decides sobre una página que funciona y no sobre la promesa de que tu descripción dará lo que imaginas.

¿Cómo adaptarla a tu estudio?

El orden de las ediciones es el de siempre: primero el significado, después el aspecto. Cada edición cuesta 3 créditos, así que rehacer un bloque dos veces no compensa.

1. Cambia el nombre y el posicionamiento. Una edición sustituye el nombre del estudio en toda la página y reescribe la tesis principal.
2. Reescribe los servicios. Las cuatro tarjetas se cambian por tu lista, y la cantidad se ajusta en la misma petición.
3. Describe tu proceso. El número de fases y sus nombres deben coincidir con tu forma real de trabajar, o el bloque se vuelve decoración.
4. Coloca tus casos. Tus imágenes, los nombres de cliente y el resultado en una línea.
5. Decide qué haces con el portal. Dejarlo como demostración, quitarlo o convertirlo en operativo con base de datos y acceso.
6. Publica. El proyecto vive en una dirección del tipo nombre.zugo.run y encima se conecta tu propio dominio.

El quinto paso conviene tomarlo con criterio y por adelantado. Un portal de muestra funciona honestamente como argumento de venta, pero si un cliente intenta usarlo y descubre que nada se guarda, el efecto se invierte. O lo terminas o dices claramente que es una demostración.

¿Cuánto cuesta dejar la web lista?

El clon no gasta créditos, así que la cuenta empieza en la primera edición. Cambiar el contenido por el tuyo suele llevar entre cuatro y ocho ediciones, según lo detallado que seas y cuántos casos coloques.

Planes: Free entrega 5 créditos, Pro cuesta $25 al mes con 200 créditos y Business cuesta $99 al mes. Cada construcción se arranca en un entorno aislado antes de entregarse, y una versión que no abre no se entrega.

Sobre el plan gratuito conviene ser directo. Los 5 créditos iniciales no alcanzan para una construcción desde cero, porque cuesta 6. En cambio clonar la plantilla no gasta nada y una edición cabe en el saldo gratuito, así que ver tu web con el nombre de tu estudio sale por cero.

Si decides terminar el portal, reserva presupuesto aparte para esa etapa. Acceso, permisos y almacenamiento de archivos se hacen con ediciones sucesivas y comprobando cada una, no con una sola petición grande. Ahí hay que revisar después de cada paso, porque un error de permisos no se ve desde fuera.

¿Qué ediciones se piden más?

Las peticiones de los estudios se repiten de proyecto en proyecto, y las frases precisas funcionan bastante mejor que los deseos generales. "Cambia los cuatro servicios por tres y llámalos así: ...". "Añade al caso una línea con el resultado en cifras". "Quita la sección de packaging e impresión y pon en su lugar un bloque de opiniones de clientes".

También se pide mucho el idioma: "traduce la web y el portal al español, incluidos los rótulos de los filtros de materiales y los estados vacíos". Los estados vacíos se mencionan a propósito: son lo que más se olvida, y luego aparece un rótulo en inglés en mitad de un portal en español.

Otra petición habitual es sobre los casos: "muestra tres proyectos en vez de seis y añade bajo cada uno una línea de resultado". Una lista corta de trabajos fuertes convence más que un listado largo de trabajos correctos.

Y casi siempre aparece el formulario de contacto. Por defecto recoge datos pero no los envía a ninguna parte. Los correos los conecta Resend y las solicitudes se pueden guardar en base de datos. Es una edición aparte y conviene hacerla antes de publicar, no después de perder la primera solicitud.

¿Dónde están los límites honestos?

Un portal sin base de datos es una demostración. Enseña cómo será, pero no recuerda nada entre recargas. La versión operativa exige acceso y almacenamiento, es decir una etapa de trabajo que conviene planificar de antemano.

La multipágina se cuenta aparte. Si el estudio necesita páginas separadas de verdad para cada servicio, eso ya es una plataforma: 12 créditos las tres primeras páginas y 3 por cada página adicional. En qué se diferencia ese formato de una página única está en si la IA puede crear un sitio multipágina.

Los procesos complejos llegan por ediciones. Roles dentro del equipo del cliente, aprobación de versiones, integración con tu sistema de gestión: todo eso se describe por pasos y se comprueba punto por punto. En un producto complejo Zugo no sustituye a un equipo de desarrollo, y el código siempre se puede exportar a GitHub.

Empieza pequeño: abre la galería en zugo.dev, clona Northbound y reescribe el bloque de proceso según trabajas de verdad. Es la forma más rápida de saber si este esqueleto es el tuyo.