Saltar al contenido
Disponible para trabajar

NachUI - Sistema de Diseño para Desarrollo Frontend Moderno

NachUI es un sistema de diseño completamente abierto construido como un monorepo, que combina componentes UI, herramientas impulsadas por IA y una plataforma de documentación de alto rendimiento para ofrecer una experiencia de desarrollo sin dependencia de librerías externas.

Visit DemoSource

Problema

Las librerías de UI modernas suelen priorizar la conveniencia sobre el control, obligando a los desarrolladores a trabajar con abstracciones rígidas, dependencias pesadas y limitaciones en la personalización.

Esto genera:

  • dependencia de node_modules (lock-in)
  • dificultad para escalar y personalizar componentes
  • pérdida de control sobre el código
  • problemas de mantenibilidad a largo plazo

Solución

NachUI propone un enfoque que se esta viendo mucho últimamente: un sistema de diseño basado en copy-paste y sin dependencias, donde el desarrollador es dueño total del código que utiliza.

En lugar de instalar una librería:

  • se copia el código real de los componentes
  • se adapta según las necesidades del proyecto
  • se mantiene control total sobre la arquitectura

Además, NachUI incorpora una capa de IA que mejora la experiencia del desarrollador mediante asistencia contextual y acceso inteligente a documentación y código.

Cómo funciona

  • El proyecto está estructurado como un monorepo con Turborepo
  • Se divide en:
    • UI primitives (@repo/ui)
    • Capa de IA (@repo/ai)
    • Plataforma de documentación (apps/docs)
  • Los componentes están diseñados para ser copiados directamente en otros proyectos
  • La documentación se genera con un pipeline tipado usando Velite
  • Un agente de IA integrado permite consultar documentación y código en tiempo real

Stack tecnológico

  • Arquitectura: Turborepo + pnpm (monorepo)
  • Frontend: Next.js 16 (App Router, React 19)
  • UI: Tailwind CSS v4 + Motion
  • Contenido: Velite (MDX tipado)
  • IA: Vercel AI SDK + Google Gemini
  • Tipos y validación: TypeScript + Zod
  • Tooling: ESLint, Prettier, Husky, lint-staged

Decisiones técnicas

  • Arquitectura copy-paste: elimina el lock-in y garantiza control total del código
  • Monorepo modular: separa UI, IA y documentación, facilitando escalabilidad y reutilización
  • Tailwind CSS v4: permite un sistema sin runtime, basado en variables y altamente performante
  • Velite para contenido: asegura documentación tipada sin costo en runtime
  • Capa de IA integrada: mejora la DX con respuestas contextuales y acceso directo al código
  • Diseño de componentes independientes: cada componente es reutilizable, legible y fácil de adaptar
  • Tooling estricto: mantiene consistencia y calidad en todo el ecosistema

Desafíos y aprendizajes

  • Diseñar un sistema sin depender de distribución tradicional por npm
  • Mantener consistencia en una arquitectura basada en copy-paste
  • Escalar un monorepo con múltiples dominios (UI, IA, docs)
  • Integrar IA de forma útil y no superficial
  • Balancear rendimiento, flexibilidad y experiencia de desarrollo
Portfolio AI