Una plataforma de pagos que maneja dinero real necesita verse como si manejara dinero real. Las primeras versiones del panel de control de 0fee.dev eran funcionales -- mostraban datos, aceptaban entradas y procesaban pagos. Pero usaban selects nativos de HTML, iconos emoji, bloques de código sin estilo y direcciones de correo expuestas. A lo largo de varias sesiones, transformamos el panel de funcional a premium -- el tipo de interfaz que hace que los desarrolladores confíen en la plataforma para su procesamiento de pagos.
Este artículo cubre cinco grandes iniciativas de pulido: reemplazar emojis con iconos SVG profesionales, construir un componente Select personalizado para más de 30 desplegables, aplicar estilo de tarjetas premium en 19 páginas, proteger direcciones de correo de bots de spam y añadir resaltado de sintaxis con números de línea.
De emojis a iconos SVG profesionales (sesión 051)
El panel inicial usaba caracteres emoji como iconos. Los emojis tienen tres problemas en una aplicación profesional:
- Inconsistencia entre plataformas. El mismo emoji se ve diferente en iOS, Android, Windows y Linux
- Limitaciones de tamaño. Los emojis no pueden ser escalados, coloreados ni animados como los SVGs
- Percepción profesional. Los emojis señalan comunicación casual, no procesamiento de pagos empresarial
La sesión 051 reemplazó cada emoji con un componente de icono SVG personalizado:
tsx// Antes (emoji)
<span class="text-2xl">🧠</span>
<span>Smart Routing</span>
// Después (componente SVG)
<BrainIcon class="w-8 h-8 text-emerald-400" />
<span>Smart Routing</span>Los iconos SVG heredan el color del texto mediante stroke="currentColor", lo que significa que se adaptan automáticamente al modo oscuro sin ningún estilo adicional.
Componente Select personalizado: más de 30 selects nativos reemplazados (sesión 056)
El elemento HTML <select> es uno de los elementos más difíciles de estilizar consistentemente entre navegadores. La sesión 056 creó un componente Select personalizado y reemplazó los 30 elementos <select> nativos en 16 archivos.
| Característica | Implementación |
|---|---|
| Iconos | Icono opcional por opción (banderas, iconos de estado) |
| Insignias de color | Puntos de colores para indicadores de estado |
| Descripciones | Texto secundario debajo de la etiqueta de opción |
| Insignias | Texto de insignia alineado a la derecha (conteos, etiquetas) |
| Navegación por teclado | Teclas de flecha, Enter, Escape |
| Clic fuera para cerrar | Listener de clic en documento con limpieza |
| Modo oscuro | Más de 44 clases de utilidad dark |
| Truncamiento | Etiquetas largas truncadas con elipsis |
Estilo de tarjetas premium (sesión 068)
La sesión 068 aplicó estilo de tarjetas consistente en las 19 páginas del panel, transformando la calidad visual de funcional a premium:
tsx// Antes: Estilo inconsistente
<div class="bg-white rounded-lg shadow p-4">
// Después: Estilo premium
<div class="bg-white dark:bg-gray-900
rounded-xl
border border-gray-300 dark:border-gray-700
shadow-sm p-6">Los cambios clave:
| Propiedad | Antes | Después |
|---|---|---|
| Radio de borde | rounded-lg (8px) | rounded-xl (12px) |
| Borde | Ninguno (solo sombra) | border border-gray-300 |
| Sombra | shadow (media) | shadow-sm (sutil) |
| Relleno | p-4 (16px) | p-6 (24px) |
| Fondo | Solo bg-white | bg-white dark:bg-gray-900 |
Protección de correo contra bots de spam (sesión 052)
Las direcciones de correo mostradas en las páginas de marketing eran vulnerables a la recolección por bots de spam. La sesión 052 creó un componente ProtectedEmail:
tsxfunction ProtectedEmail(props: { user: string; domain: string; class?: string }) {
const [revealed, setRevealed] = createSignal(false);
const email = () => `${props.user}@${props.domain}`;
return (
<span
class={`cursor-pointer ${props.class}`}
onClick={() => {
setRevealed(true);
window.location.href = `mailto:${email()}`;
}}
>
<Show
when={revealed()}
fallback={<span>{props.user} [at] {props.domain}</span>}
>
{email()}
</Show>
</span>
);
}La estrategia: mostrar user [at] domain en HTML estático (los bots no pueden analizarlo), construir el correo real mediante JavaScript al hacer clic (los bots no ejecutan JS) y abrir el enlace mailto dinámicamente.
Resaltado de sintaxis con números de línea (sesión 052)
Los bloques de código en las páginas de documentación eran bloques <pre><code> sin estilo. La sesión 052 creó un componente SyntaxHighlighter completo con colores por tipo de token, números de línea y botón de copiar.
| Tipo de token | Color | Clase Tailwind |
|---|---|---|
| Palabras clave | Púrpura | text-purple-400 |
| Cadenas | Esmeralda | text-emerald-400 |
| Números, booleanos, null | Ámbar | text-amber-400 |
| Llamadas a funciones | Azul | text-blue-400 |
| Propiedades de objetos | Cian | text-cyan-400 |
| Operadores | Rosa | text-pink-400 |
| Comentarios | Pizarra | text-slate-500 |
El efecto acumulativo
Cada sesión de pulido se construyó sobre las anteriores:
| Sesión | Cambio | Impacto |
|---|---|---|
| 051 | Iconos SVG reemplazan emojis | Apariencia profesional |
| 052 | Resaltado de sintaxis + protección de correo | Confianza del desarrollador, prevención de spam |
| 056 | Componente Select personalizado | Desplegables consistentes y con marca |
| 068 | Estilo de tarjetas premium | Calidad visual premium |
| 078 | Modo oscuro en todas las páginas | Soporte de preferencias del desarrollador |
Para la sesión 078, el panel se había transformado de un prototipo funcional a una interfaz de calidad premium comparable al panel de Stripe, la consola de Twilio o el panel de gestión de Google Cloud.
Lo que aprendimos
El pulido de UI nos enseñó tres cosas:
- El pulido no es un gran esfuerzo -- son muchos pequeños. Ninguna sesión individual transformó el panel. Cada sesión abordó una categoría de mejora visual. El efecto acumulativo fue dramático, pero cada sesión individual fue manejable.
- Los componentes compartidos multiplican el pulido. El componente Select personalizado fue construido una vez y desplegado en más de 30 ubicaciones. El SyntaxHighlighter aparece en cuatro contextos diferentes. Construir componentes reutilizables y pulidos es más eficiente que pulir páginas individuales.
- Los detalles profesionales construyen confianza en productos financieros. Los desarrolladores que evalúan una plataforma de pagos ven la calidad del panel como un indicador de la calidad de la ingeniería. Si la UI es descuidada, se preguntan si el procesamiento de pagos también lo es. El pulido no es vanidad -- es una señal de confianza.
Este artículo es parte de la serie "Cómo construimos 0fee.dev". 0fee.dev es un orquestador de pagos que cubre más de 53 proveedores en más de 200 países, construido por Juste A. GNIMAVO y Claude desde Abiyán sin ingenieros humanos. Sigue la serie para conocer la historia completa de la construcción.