Portafolio

De una idea a software en producción

Cinco casos a fondo, siete años de trabajo y el archivo de lo que se construyó en el camino: sitios, tiendas, prototipos y marca.

Design Engineer · Product Designer · Forward Deployed Engineer

Casos
Merez por dentro
Línea de tiempo
Sitios
Producto
Diseño

Casos de estudio

01 · 2026 · Fundador, diseño de producto, arquitectura y desarrollo

Merez

Plataforma SaaS multi-tenant para pequeños negocios: sitio web, catálogo, CRM, cotizaciones, agente de ventas con IA y panel con asistente.

El problema

Los negocios pequeños pagan y conectan cinco herramientas que no se hablan entre sí.

Lo que hice

Arquitectura modular multi-tenant: los módulos se activan por sitio.
Agentes de IA propios sobre modelos de OpenAI y Anthropic: asistente del panel, investigador y agente de ventas por WhatsApp.
Medición del costo de IA por llamada y por segmento, con techo para las cuentas en prueba.
Plugin de WordPress y SDK en TypeScript para incrustar Merez en cualquier sitio.
Consola de operador para el equipo.

Resultado

31: herramientas de agente
5: niveles de riesgo
0,1: créditos por completar una ficha

Stack

Laravel 13
PHP 8.3
MySQL
React 19
Vite
Refine
Next.js 16
Tailwind CSS 4
OpenAI
Anthropic
WhatsApp
GitHub Actions

Ver en vivo ↗

Página de inicio de Merez en escritorio, con el titular y los accesos al panel

Página de inicio de Merez en un teléfono — Versión móvil

Merez por dentro

El producto, pantalla por pantalla

Lo que hay detrás del caso: la interfaz, los agentes y la memoria que los une.

Panel

Inicio con asistente

El negocio arranca con su asistente al frente.

Métricas, plan y próximos pasos a su alrededor.

En móvil, barra inferior con el asistente a un toque.

Inicio del panel de Merez con el asistente al frente, métricas y próximos pasos

Inicio del panel de Merez en un teléfono, con la barra inferior

Lo más propio

La ficha que se completa sola

La ficha detecta lo que le falta para verse completa en el sitio: descripción, ficha técnica, imagen y categoría. La IA lo completa con un clic por 0,1 créditos.

Sugiere la categoría y redacta la descripción con la voz de la marca. Una vista previa muestra cómo abre en el sitio.

Precio y referencia quedan marcados «solo tú»: la IA no los toca.

Ficha de un producto en el panel de Merez con los campos que la IA puede completar

Ficha de un producto en el panel de Merez en un teléfono

Catálogo

Productos y servicios a la medida

Productos y servicios en un mismo catálogo.

Campos personalizados por negocio, sinónimos de búsqueda y variantes.

Listado de productos del catálogo en el panel de Merez

Marca

Entrenar la marca

La IA lee el sitio web y aprende el logo, los colores, cómo habla la marca y qué vende.

Las fotos reales aprobadas sirven de referencia de estilo.

Sitio

Tu sitio

Catálogo, páginas y formulario de contacto se publican desde el mismo panel.

Cada visitante que escribe entra como lead.

Editor del sitio publicado desde el panel de Merez

Agentes con herramientas

31herramientas

5niveles de riesgo

Asistente del panel
Castor
Opera leads, cotizaciones e inventario.
Investigador
Búho
Sale a la web por proveedores, precios y competencia.
Agente de ventas
Colibrí
En WhatsApp atiende, cotiza y deja el lead listo.

Catálogo
- Crear y actualizar productos en lote
- Buscar en el catálogo
- Consultar inventario
- Extraer un catálogo desde un PDF o una foto
CRM
- Crear y actualizar leads
- Detectar duplicados
- Fusionar duplicados
- Buscar en el CRM
Ventas
- Crear y revisar cotizaciones
- Crear pedidos
- Registrar pagos y cobrar
- Crear suscripciones
- Agendar citas
Contenido
- Redactar artículos del blog
- Convertir un enlace en una entrada de bitácora
- Componer piezas de marca
Operación
- Crear, listar y resolver tareas
- Resumir conversaciones
- Clasificar correos
- Redactar respuestas
- Buscar en todo

Cómo deciden

1Lectura
2Escritura reversible
3Escritura sensible
4Acción externa
5Infraestructura

Leer es libre; todo lo que escribe se propone y una persona lo aprueba en el mismo chat. Si alguien pega una contraseña o una llave, se rechaza antes de llegar al modelo.

Memoria por ficha

Cada cliente, cotización o pedido tiene su propia conversación con la IA, compartida por el equipo.
Pegar un chat o un correo deja notas, tareas y propone los cambios de datos.
Acepta notas de voz y foto de tarjeta.

02 · 2021 → 2026 · Diseño UX/UI, desarrollo y CRM

Fusion Pipe Tools

Distribuidor industrial B2B de herramientas para termofusión y electrofusión.

El problema

El catálogo vivía en un PDF y cotizar dependía de llamadas y correos sueltos.

Lo que hice

2021: primer sitio de la empresa.
2026: rediseño completo, con el PDF convertido en 41 fichas técnicas filtrables por tecnología, medida y serie.
Buscador por medida.
Blog con SEO.
Mini-CRM que une leads, correo y cotizaciones formales en PDF.

Resultado

41: fichas desde un PDF
1: flujo de cotización
2021 → 2026: de sitio a sistema

Stack

PHP
API de Merez
Hostinger
Figma

Ver en vivo ↗

Página de inicio de Fusion Pipe Tools con su catálogo de herramientas de termofusión

Ficha técnica de un producto de Fusion Pipe Tools con sus especificaciones — Ficha técnica

Listado del catálogo de Fusion Pipe Tools con filtros por tecnología y medida — Catálogo filtrable

Captura del primer sitio de Fusion Pipe Tools, publicado en 2021 — Antes (2021)

03 · 2026 · Diseño de producto y design engineering

Rediseño del panel de Merez y su sistema de diseño

Un sistema de tokens que ordena un panel que creció módulo a módulo.

El problema

El panel creció por módulos y cada pantalla hablaba su propio idioma.

Lo que hice

Sistema de tokens (color por niveles de oscuridad, tipografía, radios) con una regla de build que rechaza colores sueltos.
Navegación lateral en bloques y áreas.
Inicio con el asistente como protagonista.
Versión móvil con barra inferior.
Puerta automática de fidelidad visual que compara la pantalla con el diseño: ≥ 90 a 1280 px y ≥ 80 a 375 px.

Resultado

0: colores fuera de token
≥ 90: fidelidad a 1280 px
2: versiones: escritorio y móvil

Stack

Figma
React 19
Tailwind CSS 4
TypeScript
Puppeteer
Vitest

Tokens · color

brand-100
brand-300
brand-600
brand-800
night-700
night
magenta
orange
yellow

Tokens · tipografía

Título · Raleway Black

Texto de lectura · Lato Regular, 16 px

Kicker · 12 px · 0,18 em

Tokens · radios

3xl

04 · 2026 · Método

Desarrollo con IA orquestado y economía de tokens

Un modelo grande que diseña y revisa; modelos menores que implementan.

El problema

Con un solo modelo grande haciéndolo todo, el modelo caro tecleaba código que ya estaba diseñado.

Lo que hice

Claude Opus, como orquestador, diseña, parte el trabajo, escribe encargos autocontenidos y revisa el diff.
La implementación va a Claude Sonnet, Claude Haiku o DeepSeek según dificultad y costo.
En Merez, modelos de OpenAI (GPT, imagen y transcripción) y de Anthropic (Claude), elegidos por tarea.
Verificaciones automáticas (tipos, suite de pruebas, contrato de API, fidelidad visual) antes de dar algo por hecho.
El contexto se reutiliza con caché.

Resultado

−89 %: salida diaria de Claude Opus (de ~0,94 M a ~0,10 M tokens/día)
26 %: de la salida la generan modelos menores (antes < 4 %)
98 %: del contexto leído de caché

Medido sobre el uso propio de desarrollo en Claude Code, ago–oct 2026. No incluye DeepSeek.

Stack

Claude Code
Claude Opus
Claude Sonnet
Claude Haiku
DeepSeek
OpenAI
Anthropic

Flujo

1DiseñoOrquestador · Claude Opus
2EncargoAutocontenido
3Modelo según costoClaude Sonnet · Claude Haiku · DeepSeek
4Verificación automáticaTipos, pruebas, contrato, fidelidad
5RevisiónDel diff
6Producción

Salida generada por Claude Opus

Antes96 %

Ahora74 %

05 · 2021 → 2026 · UX/UI, desarrollo y administración

Acertar

Empresa de capacitación y certificación en trabajo seguro en alturas.

El problema

Una empresa de formación necesitaba presencia empresarial y un modo confiable de emitir y comprobar certificados.

Lo que hice

2021: sitio empresarial con cursos virtuales.
2026: app.acertarsas.com, la app nueva que reemplaza el sitio anterior, con cursos en línea para los aprendices y certificados verificables (búsqueda pública por documento y verificación por código).
Los cursos y certificados viven en Merez y la app solo los muestra, con sesión de servidor para que ninguna llave llegue al navegador.
Descarga de certificados por enlace firmado y temporal.

Resultado

1: app nueva que reemplaza el sitio
Cursos + certificados: en una sola app
Pública: verificación de certificados

Stack

PHP
API de Merez
Hostinger

Ver la app ↗Sitio ↗

App de Acertar con los cursos en línea y la verificación de certificados

App de Acertar en un teléfono — Versión móvil

Sitio anterior de Acertar, empresa de capacitación en trabajo seguro en alturas — Antes (sitio)

Línea de tiempo

Siete años, de piezas gráficas a un SaaS propio

2019
Diseño gráfico
- Piezas para telecomunicaciones y primeros encargos.
2020
Primeros sitios y marcas
- Wonder School (sitio)
- Wallo (prototipo de app de envíos)
- Marcas para Nicolás Rocha y Green Force
2021
Nace Inflinds S.A.S.
- Fusion Pipe Tools
- Green Work
- Motor Clean
- Llévalo (e-commerce avanzado)
- Arizas Tools
- Acertar (sitio + e-learning)
2022
Más sitios y tiendas
- Amatu
- César el Tributarista
- CEAMAC
- Estructálica
2023
Comercio electrónico
- Suplementos Green Spot (e-commerce)
2024
Plataformas y marcas
- Capitalex (app web, prototipo)
- Plantación Tenampa
- Alternatura
- Ndevsoft
- La Imperial
2026
Producto propio
- Merez en producción
- Fusion Pipe Tools rehecho con CRM
- Sistema de diseño del panel
- Desarrollo con IA orquestado