El problema
Tale Detail, un estudio de visualización arquitectónica y representación urbana, no tenía sitio web, solo recomendación de boca en boca y un archivo de Figma con un sistema de diseño completo. Necesitaban un sitio que respetara ese sistema de diseño al detalle y que ellos mismos pudieran seguir actualizando (portafolio, testimonios, casos de estudio) sin depender de un desarrollador para cada cambio.
Rol e impacto
- Proyecto freelance, en solitario, frontend.
- Le dio al cliente su primera presencia web, en producción en taledetail.design.
- La implementación respeta el sistema de diseño de Figma del cliente, traducido a tokens reutilizables de Tailwind.
- Portafolio, testimonios y casos de estudio son editables por el cliente desde Sanity Studio, sin necesidad de tocar código.
Decisiones técnicas y desafíos
El cliente entregó un sistema de diseño completo en Figma: escalas de color, espaciado y tipografía, pensado para una herramienta de diseño, no para un código base. Comparé hardcodear los valores que veía en cada pantalla contra extraer primero las variables de Figma en una capa de tokens compartida.
Elegí mapear las variables de Figma directamente sobre la configuración de tema de Tailwind antes de construir cualquier pantalla, ya que así cada componente parte de la misma fuente de verdad y una futura actualización de diseño solo requiere cambiar el token, en vez de buscar cada lugar donde un color o espaciado quedó hardcodeado.
El portafolio, los casos de estudio y los testimonios del cliente cambian seguido a medida que consiguen nuevos proyectos, y no son desarrolladores. Evalué hardcodear ese contenido en MDX contra integrar un CMS headless con una interfaz de edición pensada para el cliente.
Opté por Sanity como CMS headless con un schema de Studio personalizado, porque le dio al cliente una interfaz de edición amigable justo para los tipos de contenido que actualiza con frecuencia, sin necesitarme a mí en cada cambio de contenido o redeploy.
Stack detallado
| Capa | Tecnología | Por qué |
|---|---|---|
| Frontend | Next.js, Tailwind CSS | Los tokens del design system mapean limpio a la config de Tailwind |
| Animación | Motion | Animaciones de scroll y transición declarativas, con look de portafolio |
| Contenido | Sanity | Portafolio, testimonios y casos de estudio editables por el cliente |
| Hosting | Vercel | Deploys sin configuración directo desde la app de Next.js |
Galería
Qué haría diferente
Definiría el schema y modelo de contenido de Sanity antes de empezar con la traducción de tokens de Figma a Tailwind, en vez de hacerlo en paralelo. Un par de tipos de contenido necesitaron reestructurarse una vez que se agregaron entradas reales de portafolio, lo que implicó revisar componentes que ya habían sido estilizados contra datos de placeholder.