design
artefactos de diseño · mogos

Lo que diseñamos,
en vivo y embebible.

Cada pieza es una página viva. Ábrela a pantalla completa, o embébela directo en Notion con /embed y la URL. Las iniciativas se agrupan por cliente. Importamos futuro.

Mogosinterno
producto↗
FCL · multicontenedor y multiproveedor
¿Cuántos proveedores? ¿Cuántos contenedores? El admin hoy (un contenedor, un equipo, naviera en texto libre, la orden sin proveedor) frente a la propuesta: el alta entiende 8x40HQ y 6x40HQ + 2x20, los números se pegan en bloque y se validan por fila, la naviera es un catálogo, un BL ampara los ocho contenedores y una factura cubre el flete, dos contadores fijos en la cabecera, proveedor por orden con ciudad y lat/long, las columnas Prov. y Cont. en las listas, y el contenedor que se llena de lado con el CBM de sus órdenes (vacío · en curso · casi lleno · sobre capacidad). Cinco fases y las 20 preguntas para Carlos.
mogos-design.cresco.so/fcl-multicontenedor
plataforma↗
Mogui · un pago, una conversación
Simulación WhatsApp → Slack: listas nativas para reportar, referencia y comprobante opcionales, tarjeta de Finanzas con hilo y destinos. Incluye arquitectura y payloads de ejemplo.
mogos-design.cresco.so/mogui-pago-conversacion
china↗
Libreta de feria · un mismo lenguaje
Diseño aprobado del refactor de Feria: 13 vistas, modo claro, captura directa y chat Mi día con el mismo Mogui. Incluye el contrato de implementación.
mogos-design.cresco.so/feria-sistema
china↗
Mogui · intérprete
Traductor español y mandarín para Feria Cantón: halo, original visible y voz. Diseño aprobado para Mogui sobre Eve y OpenRouter.
mogos-design.cresco.so/feria-interprete
producto↗
Métricas
Dashboard de métricas del admin: un mapa de la operación, no un tablero de widgets.
mogos-design.cresco.so/metricas
producto↗
Cotizaciones
Empresa emisora, motor de documentos y proforma bilingüe: que la cotización deje de ser una fila y llegue a una persona.
mogos-design.cresco.so/cotizaciones
producto↗
Cotizaciones · ciclo comercial
La cotización no termina cuando se paga: búsqueda de $100 vs gestión de compra, el precio que cambia después de pagado y el documento que lo cuenta.
mogos-design.cresco.so/cotizaciones-ciclo
producto↗
Búsquedas
Trece columnas, tres se llenan. El tablero deja de escribirse: la fila nace del chat y el estatus se lee.
mogos-design.cresco.so/busquedas
producto↗
Cotización → orden
El pago entra y la orden no aparece. Una columna, una consulta y una fila en una pantalla que ya existe.
mogos-design.cresco.so/orden
producto↗
Histórico de precios
El navegador tira el costo a la basura. Guardarlo y darle identidad al producto convierte cada cotización en dato.
mogos-design.cresco.so/precios
plataforma↗
Andy y la empresa
El filtro que debería aislarlo lo escribe su navegador. Mismo modelo que la ruta, distinta fuente de verdad.
mogos-design.cresco.so/andy
plataforma↗
Conector de mensajería
La notificación muere en el panel. Un núcleo agnóstico la lleva a Slack o Lark y deja que se resuelva ahí: catálogo tipado, ruteo en código y acciones firmadas de vuelta.
mogos-design.cresco.so/conector
marca↗
Correos y documentos
Los 34 correos y los 7 PDF que recibe el cliente no se parecen a la marca. Rediseñados con el marino real, el wordmark vectorial y las tres tipografías — sin tocar una sola variable.
mogos-design.cresco.so/comunicaciones
producto↗
Cliente en línea
El producto se crea al escribirlo; el cliente no. La misma experiencia, con el cuidado de tres llaves únicas.
mogos-design.cresco.so/cliente
marca↗
Links
El link-in-bio propio: los canales de Mogos en marino noche, con el splash del monograma y el degradado de marca — adiós beacons.
mogos-design.cresco.so/links
plataforma↗
Agents
La app del equipo para hablar con los agentes de Mogos: prototipo interactivo, roster por permisos, grupos de agentes, gestos, ⌘K, voz primero, runtime Eve.
mogos-design.cresco.so/agents
plataforma↗
Agents · pantallas
Galería hi-fi: lista densa por rol, chat móvil y desktop, ⌘K, SSO.
mogos-design.cresco.so/agents-pantallas
plataforma↗
Agents · grupos
Los agentes se hablan entre ellos: hilos compartidos con varios avatares, solo lectura para el equipo.
mogos-design.cresco.so/agents-delegacion
plataforma↗
Agents · personalizar
Capa personal editable (instrucciones, routines) vs arquitectura Cresco solo lectura.
mogos-design.cresco.so/agents-train
plataforma↗
Agents · estados
Loading, sin modelo local, vacío, HITL, grabación, transcripción y toasts.
mogos-design.cresco.so/agents-estados
plataforma↗
Agents · centro de acciones
Tres opciones de layout para la capa: mesa de recepción, cargo por agente y centro de acciones (rail, columna o ⌘K).
mogos-design.cresco.so/agents-centro
plataforma↗
Agents · compartir y recibir
Share sheet del sistema (WhatsApp, Fotos) → mesa de recepción → expediente → tarjeta en el centro si exige OK. Ver en admin solo con destino real.
mogos-design.cresco.so/agents-share
marca↗
Portal de pagos
La pantalla donde el cliente entrega el dinero es la única sin un color de la casa: un azul de plantilla, un morado suelto y el logotipo blanco sobre blanco. El checkout con membrete marino.
mogos-design.cresco.so/pagos
producto↗
Comisiones
De cada 100 del flete, 1 es de quien atiende. El 1% de las asesoras deja el cuaderno: por contenedor, congelado en un ledger y visible solo para gerencia.
mogos-design.cresco.so/comisiones
producto↗
Fee de servicio
Cobrar cuesta en casi todos los canales y hoy Mogos lo absorbe en silencio. El fee de procesamiento propio, por método y sin tope, como línea de primera clase: desglose antes de cobrar, recibo con dos líneas y los libros cerrando al centavo — en los tres caminos por donde entra un pago.
mogos-design.cresco.so/recargo
plataforma↗
Mogui sobre eve
El bot ya usa OpenRouter; lo que no tiene es memoria, retrieval ni evals. El cerebro se muda a eve en Render y la tubería — webhook, 24h, plantillas, inbox — no se toca.
mogos-design.cresco.so/mogui
plataforma↗
Mogui por WhatsApp
La portada del paquete: Carlos reenvía el pedido de un cliente al número de Mogos, Mogui lo convierte en búsqueda con su cobro, y Grok Bot sale a buscar proveedores. Arquitectura, plan de fases, storyboard, la cara de Grok Bot y el admin.
mogos-design.cresco.so/mogui-flujo
plataforma↗
Mogui · storyboard de WhatsApp
Ocho escenas con demo viva: el cliente escribe, el reenvío, Carlos con Mogui, el aviso con el botón de pago, los bordes, la fase 2 y la voz de crescobot en modo operador.
mogos-design.cresco.so/mogui-whatsapp
plataforma↗
Mogui · la cara de Grok Bot
Sourcing como un Bot con computadora: la lista de Bots, el chat con listas de herramienta y resultado, y la Computer en Alibaba, en el admin y en WeChat. Cinco pantallas de una búsqueda; la cara se sirve desde Mogos Agents.
mogos-design.cresco.so/mogui-grokbot
plataforma↗
Mogui · la corrida de Grok en el admin
Grok Bot pantalla a pantalla: la ficha, los ocho pasos de la corrida (despertar, carga, briefing, proveedores de Mogos, Alibaba, primer contacto, informe y tarea, límites) y el editor de instrucciones.
mogos-design.cresco.so/mogui-sourcing
producto↗
Mogui · la búsqueda en el tablero
Lo que ve el equipo un segundo después: la fila con su origen, el detalle con las anclas y la transcripción, el inbox que no se ensucia y las candidatas de Grok con su origen.
mogos-design.cresco.so/mogui-admin
plataforma↗
Mogui · reportar pagos
El operador le dice a Mogui por WhatsApp que entró un pago; Mogui pregunta lo que falta, arma la tarjeta y lo publica en #mogos-mogui. Sin fila, sin admin: dieciséis casos con demo viva — diez en el teléfono y seis dentro del canal de Slack, incluidos los siete en los que algo no sale.
mogos-design.cresco.so/mogui-pagos
plataforma↗
Confianza
El cerrojo y el pulso: Turnstile en todas las puertas de Supabase y una página de status con marca propia, viva en Cloudflare — si la plataforma se cae, el status no.
mogos-design.cresco.so/confianza
plataforma↗
Accesibilidad
El flotante honesto: ocho preferencias reales y cuatro perfiles sobre un sitio ya accesible — sin prometer cumplimiento, ocultable con camino de vuelta. El botón de la propuesta funciona.
mogos-design.cresco.so/accesibilidad
marca↗
Aurora auth
La puerta también es la marca: split claro + panel aurora en el client, noche completa en el admin, y la placa «Importamos futuro» al iniciar sesión. Los dos logins de la propuesta funcionan.
mogos-design.cresco.so/aurora-auth
marca↗
Aurora client · la familia
Las siete puertas de auth que le faltaban al client, vestidas con el shell aurora, más el sidebar y el topbar a los que se entra. Cajas de OTP por dígito y checklist de contraseña en vivo, a 1440 y a 390.
mogos-design.cresco.so/aurora-familia
producto↗
Aurora en casa · el home
La aurora entra a la app: el home del client (/account) retintado con la paleta de marca — banda de bienvenida de día, KPI-chips en celeste, calendario de salidas con la paleta — y el kit de componentes principales estado por estado. Restilizar, no cambiar.
mogos-design.cresco.so/aurora-home
marca↗
Aurora client · cuatro layouts
El split funciona, pero el panel se repite idéntico diez veces y la marca trabaja con uno de sus cuatro colores. Cuatro estructuras distintas —aurora completa, carril, manifiesto y contenedor— sobre los mismos tokens, para elegir una.
mogos-design.cresco.so/aurora-familia-layouts
producto↗
La esquina que escucha
El formulario de sugerencias es un buzón: recibe y calla. Un flotante con el monograma y su aurora donde el cliente escribe como quien manda un mensaje, un canal de Slack del otro lado con botón a su WhatsApp, y el viaje de vuelta: «Vista por el equipo».
mogos-design.cresco.so/sugerencias
producto↗
El anuncio que muestra
Hoy un link de Instagram en un anuncio es texto plano o un botón ciego. Una URL pegada, tres formatos, un modal camaleón: YouTube ancho, post cuadrado, reel vertical — con fallback que nunca deja un hueco gris.
mogos-design.cresco.so/anuncios
venezuela↗
Despacho
App del transportista en camión: ruta por cercanía, navegar, entregar, foto + firma y los caminos ámbar. 16 pantallas, diseño esencial.
mogos-design.cresco.so/despacho
china↗
Recepción
App del operador de almacén: busca, encuentra, recibe. Reconciliación por tracking, foto por paquete, etiqueta por caja.
mogos-design.cresco.so/recepcion
china↗
Impresión
El paso Imprime hecho real: la iQ4R confirma cada etiqueta en papel, emparejamiento en un sheet, errores ámbar que se reanudan. 6 pantallas.
mogos-design.cresco.so/impresion
china↗
Salida · Planificada
V1 · despacho contra manifiesto: home de dos modos, lectura masiva con la pistola Q3000 UHF y reconciliación del embarque (cargadas/faltan/sobran). Etiqueta combo UHF+QR. 7 pantallas + estados de borde e ingeniería.
mogos-design.cresco.so/salida
china↗
Salida · Consolidación
V2 · el contenedor se llena hasta tope y el manifiesto nace al cerrar. Medidor de tanque, validación por destino, lo que no cupo va al próximo. Convive con la planificada.
mogos-design.cresco.so/salida-consolidacion
china↗
Salida · Emergente
V3 · la más reducida (à la Jony Ive): el contenedor nace de la primera caja, su identidad la presta el acero, y la pantalla se vuelve el objeto que se llena. Nada que elegir ni teclear.
mogos-design.cresco.so/salida-emergente
agentes↗
Mensajería
App del agente: bandeja unificada WhatsApp/IG/TikTok en calma. La barra de input es el estado, el canal susurra, burbujas con memoria muscular. 9 pantallas.
mogos-design.cresco.so/mensajeria
producto↗
Inbox
Inbox admin: mis sin responder, equipo, OS notify, panel logístico. Copiloto, snooze y presencia diseñados para fase posterior.
mogos-design.cresco.so/inbox
venezuela↗
Finanzas
Consola de escritorio que centraliza el dinero: Panorama, la bandeja de conciliación (un pago → varias facturas), fuentes tipo Tesote (bancos VE + EE.UU. + pasarela), egresos con soporte que iluminan la caja negra y export limpio a QuickBooks. 6 pantallas desktop, consolida la reunión del 7 jul.
mogos-design.cresco.so/finanzas
venezuela↗
Cobros
La app de recibos, compañera de la consola de Finanzas: buscar al cliente, cobrar en dos gestos —enlace por WhatsApp, registrar pago o firma en el dispositivo— y el recibo se numera, se genera y se envía solo, ya conciliado. Incluye el alta del cliente que no existe, la página de pago que ve el cliente, widgets iOS/Android + Live Activity, matriz de permisos por rol y 8 caminos ámbar. 9 pantallas móviles.
mogos-design.cresco.so/cobros
arquitectura↗
Núcleo Financiero
La columna financiera de Mogos: organigrama de entidades (China, Venezuela, EE.UU., franquicias), cobro por entidad, liquidación inter-compañía con respaldo legal, libro mayor de doble partida y hoja de ruta auditoría → núcleo → créditos.
mogos-design.cresco.so/nucleo-financiero
marca↗
Shipping mark y firma
Los dos QRs del flete: la etiqueta de caja en marino de verdad (wordmark vectorial, QR nivel H con +45% de área, numeración BOX 3/12 y variante térmica) y la firma de entrega como documento — membrete, saldo visible, sello con el monograma y estados con salida. Cero migraciones.
mogos-design.cresco.so/shipping-mark
producto↗
El portal del agente
apps/agent entra en la aurora: puerta noche y riel marino como el admin, la empresa siempre visible en la cabecera, y las cinco pantallas del portal Mogui retintadas con los tokens del sistema. La lima, solo donde se cuenta Mogui.
mogos-design.cresco.so/agente
marca↗
La tarjeta de referido
El pase del agente y la imagen que viaja por WhatsApp, con la marca de verdad: wordmark vectorial en cada panel, tinta marino, la inicial firmada por el punto rojo y el QR en marino nivel H — la ley del shipping mark. La versión chat-first va probada al ancho real del unfurl (330px).
mogos-design.cresco.so/tarjeta
producto↗
La puerta del invitado
Cuando un agente te invita, la invitación se ve: el pase te recibe a pantalla completa en la noche aurora, el registro lleva el beneficio anclado, y el primer login recuerda que el descuento espera. Estados sin drama y cero endpoints nuevos. La llegada se reproduce en vivo.
mogos-design.cresco.so/invitado
producto↗
Mogos ID y el locker
Hoy el retiro del locker es papel: «Completar» a un clic, sin quién retira, bultos en texto libre y el cliente detrás de «Próximamente». La propuesta: 1 pase por cliente en Apple y Google Wallet —el Mogos ID— con QR opaco sin NFC y verificación en línea; mostrador en el admin con cámara, retiro por bultos con bloqueo por saldo, y el locker con precio real fuera de Próximamente. 5 fases, la primera sin migraciones.
mogos-design.cresco.so/locker
producto↗
Mogos Caja
La app de captura en campo de Finanzas: una PWA para registrar gastos e ingresos en el momento, con la cuenta real, la empresa y la foto del comprobante en tres toques. Cinco vistas, dirección «Libreta clara», reutiliza Egreso y MoneyAccount sin tablas nuevas para los gastos. 4 fases; el ingreso manual queda por decidir.
mogos-design.cresco.so/caja
producto↗
La alcancía de China
El presupuesto mensual de la oficina de China no se ve en ninguna pantalla: se pregunta por chat y se responde de memoria. Un frasco fijo en el chrome de Caja que se vacía con cada gasto — grande al tope de Hoy, en miniatura al condensar y en la barra de escritorio. Tres formas evaluadas (barra, frasco y número con anillo) y el frasco como dirección elegida, con cinco estados, la pregunta al cambiar de mes y el traspaso marcado como lo que no consume. El motor ya existe: el par Department × entity de Budget, la atribución por egreso y GET /finance/budgets con la tasa congelada; falta la fila Oficina × CN, el mes y la vista.
mogos-design.cresco.so/caja-alcancia
producto↗
Vistas · lista y galería
Fletes y Envíos del cliente con lista y galería que conviven: una barra (búsqueda, chips de estatus con conteo, Filtros, control de dos íconos), una tabla en hueso con hairlines y cifras tabulares, la card de hoy en rejilla, y la vista recordada en localStorage por listado. Los filtros siguen en la URL; en móvil no hay control. 4 fases, 0 migraciones.
mogos-design.cresco.so/vistas
producto↗
Caja · Swap
El tercer tipo de movimiento de Caja: mover plata de una cuenta a otra —USDT a yuanes en Guangzhou, fondeo de Caracas a China— sin que el pie de gastos cuente como consumo lo que solo cambió de bolsillo. Misma pantalla Nuevo, toggle de tres con el Swap en celeste y flecha de doble vía; De → A como un solo objeto, sale · tasa · entra, y una línea que dice a dónde va en el libro. Misma empresa = traspaso interno; empresas distintas = par egreso+ingreso vinculado, categoría Traspaso, fuera del pie. 4 fases, la primera sin migración.
mogos-design.cresco.so/caja-swap
producto↗
Mobile · componentes
La app del cliente no tiene otro sistema: tiene el de la web. Once pantallas a 390×844 con cada primitivo de mobile-ui en todos sus estados, leído contra lo que apps/client renderiza hoy.
mogos-design.cresco.so/mobile-componentes
producto↗
Proyectos
Hoy es un objeto. Mío y Equipo como hubs; metas, proyectos, tiempo. Milestones como etapas. Health, graph y click-to-edit se quedan. Un agente escribe; aquí se opera el día y el trimestre.
mogos-design.cresco.so/projects
china↗
Feria de Cantón
App de datos para Mogos, gratis porque el pago es el dato. Captura por pasos en el pasillo (o form largo). Tarjeta Mogos de arranque o frente/dorso de la empresa. El asistente la usa; Mogos cosecha proveedores, interés y el lead.
mogos-design.cresco.so/feria-canton
producto↗
Meta Ads
Meta Ads dentro del admin: ver campañas es lectura segura y crearlas es un flujo agéntico con guardas — siempre en pausa, aprobación humana antes de activar, y tres sellos (API v25.0 · Humano · Bloqueado) que declaran de dónde viene el poder de cada control. 17 superficies sobre el mapa curso→API de docs/meta-ads: home con GATE V y kill switch, campañas con ABO/CBO y aprendizaje, wizard con payload visible y dry-run default, creativos con asset_feed_spec, públicos con candados honestos, píxel/CAPI, leads y CTWA, catálogo, reglas nocturnas, auditoría con presupuesto de rate limit y los siete días malos diseñados.
mogos-design.cresco.so/meta-ads
producto↗
Mobile · auth
El wordmark son cinco paths, uno por letra: el splash de la app no dibuja la marca, la arma — las cinco letras llegan desde fuera del marco y convergen, cae el punto rojo, se dibuja la regla, aparece «Importamos futuro». La misma coreografía comprimida a 1,4 s es la placa que tapa la latencia del login. Veinticinco pantallas a 390×844: splash, carga, cuatro slides de onboarding con escenas de marca y las once puertas de auth con la aurora de noche arriba y los campos del producto abajo, incluido el kit de dirección con mapa a sangre.
mogos-design.cresco.so/mobile-auth
cómo embeber en notion

Tres pasos.

1 · En una página de Notion, escribe /embed.   2 · Pega la URL (ej. mogos-design.cresco.so/flete).   3 · Ajusta el alto del bloque. Listo — se renderiza vivo dentro de Notion.