Accueil
Blog
Sistema de DiseñoAstroFrontendi18n

Cómo construí un sistema de diseño trilingüe en una noche

PUBLICADO EL 23 de abril de 2026 · 5 MIN DE LECTURA

LAUSANA, Suiza —

Una noche, un módulo backporteado, tres marcas. He aquí la historia.

El punto de partida

22 de abril, 18h. Recibo una captura de pantalla — una carpeta ordenada con 25 páginas HTML (colores, botones, tarjetas, formularios…) acompañadas de un colors_and_type.css de 468 líneas, 52 fuentes .woff2 auto-hospedadas y un manifiesto SKILL.md para agentes IA.

Es el sistema de diseño de ACiD Studio, extraído del código de producción. Un libro de marca destinado a los diseñadores, desarrolladores e IAs que trabajarán en el proyecto.

Un archivo técnico, no un escaparate. Pregunta: ¿y si lo ponemos en línea?

La apuesta

Un sistema de diseño público es una señal de seriedad. Stripe, Vercel, Shopify publican los suyos — porque forma parte de su argumentario comercial. “Mira, tenemos un sistema real, no una plantilla copiada.”

Para una agencia unipersonal con un ticket de entrada de CHF 2.999, mostrar acidstudio.ch/design-system/ cambia la percepción de inmediato: “están estructurados como una empresa de verdad.”

Restricción: hacerlo en una sola noche, sin romper la página de inicio, sin inflar el sitio, con los tres idiomas (FR / EN / ES) del sitio.

La arquitectura

Fase 1 — Publicación estática

En lugar de un subdominio separado o un repo dedicado, copié la carpeta del sistema de diseño directamente en frontend/public/design-system/. Astro sirve automáticamente public/ en la raíz → acidstudio.ch/design-system/buttons.html funciona sin configuración.

Ganancia: cero DNS, cero SSL, cero pipeline de despliegue adicional.

Fase 2 — Página Astro

Una página Astro src/pages/design-system.astro que:

  • Reutiliza el Layout del sitio (navbar + footer intactos)
  • Muestra un hero gigante “CODE & AUDACIA” en la tipografía de la marca
  • Presenta las 25 previsualizaciones en una rejilla, cada una en un iframe escalado al 50%
  • Termina con un CTA oscuro con el orb radial acid característico del sitio

Sin screenshots estáticos, sin build de imagen — las previsualizaciones HTML originales se cargan tal cual, solo miniaturizadas. Una modificación en cualquier preview aparece automáticamente en la rejilla.

Fase 3 — Internacionalización

Tres versiones: /design-system/ (FR), /en/design-system/ (EN), /es/design-system/ (ES).

Patrón utilizado — el mismo que el BlogListing.astro del proyecto:

  1. Un componente compartido DesignSystemPage.astro con una prop lang
  2. Tres wrappers de 10 líneas en src/pages/, src/pages/en/, src/pages/es/
  3. Todos los textos traducidos mediante un objeto labels indexado por idioma

Hero traducido: CODE & AUDACE (FR) / CODE & BOLDNESS (EN) / CODE & AUDACIA (ES).

Los pequeños infiernos técnicos

El TOC ilegible

Primer render: fondo negro, texto blanco Outfit 14px, peso 600. En macOS Retina, las letras aparecen borrosas y deformadas — un halo de anti-aliasing crea un efecto script extraño.

Diagnóstico: Outfit (fuente display) está optimizada para tamaños grandes. A 14px, es menos legible que Inter (fuente UI) con el mismo peso.

Fix: cambio de fuente + text-rendering: optimizeLegibility + letter-spacing generoso (0.02em) + padding horizontal aumentado a 22px.

Los tokens CSS en conflicto

El proyecto usa shadcn/ui que define --color-accent en HSL. Mi componente también usaba --color-accent, pero con el valor acid #c8f135. Conflicto silencioso — shadcn ganaba.

Fix: espacio de nombres propio del módulo. Todos mis tokens pasan a ser --ds-* con fallbacks encadenados:

background: var(--ds-accent, var(--acid, #c8f135));

Tres niveles de fallback: override del proyecto, token nativo ACiD, valor fijo. El proyecto puede hacer override a cualquier nivel sin tocar el componente.

El backport — de one-shot a módulo reutilizable

Cuando una funcionalidad merece estar en 2+ proyectos, se traslada a acid-starter — el repo template que centraliza todos los módulos reutilizables.

Creé modules/design-system/v1.0.0 con:

  • El componente compartido DesignSystemPage.astro
  • Los tres wrappers Astro [lang]/design-system.astro
  • Un design-system.config.json con todos los campos configurables
  • Un README explicando instalación y configuración

Configurable: nombre de la marca, texto acentuado (AUDACE vs BOLDNESS vs AUDACIA), idiomas activos (solo FR o trilingüe), CTA hrefs, lista de previsualizaciones, logo.

Genérico por diseño: cero colores hardcoded, todo pasa por variables CSS. El accent se vuelve amber para un restaurante, magenta para una terapia, acid para la agencia madre — automáticamente.

El resultado

En 4 horas:

  • acidstudio.ch/design-system/ → trilingüe, 25 componentes, estadísticas, CTA comercial
  • Módulo design-system v1.0.0 en acid-starter
  • Despliegues en dos proyectos cliente adaptados a su marca: alaclasse-restaurant.ch/design-system/ (oro + Playfair/Cormorant) y magnetismetherapeutique.ch/design-system/ (violeta + DM Serif/Raleway en tema oscuro)

Entregable comercial: cada futuro cliente de ACiD Studio tendrá su sistema de diseño público para compartir. No “como el de Stripe”. El suyo, con sus colores y su vocabulario.

Lo que me llevo

  1. Publicar un escaparate técnico sigue siendo la herramienta de marketing más económica para una agencia: el trabajo ya está hecho, solo hay que empaquetarlo.
  2. Apoyarse en las convenciones existentes del proyecto (patrón BlogListing.astro, tokens CSS, alias de import) me hizo ganar el 50% del tiempo. Cuantas menos decisiones, más rápido codeo.
  3. El momento en que un one-shot se vuelve reutilizable es preciso — si 2+ proyectos lo van a querer, dirección acid-starter desde la v1.0.

El sistema de diseño de ACiD Studio está aquí: acidstudio.ch/es/design-system.

Si empiezas un proyecto web y quieres el tuyo, escríbeme.

FR EN ES