# Publicar como código abierto un panel estándar: qué cubre admin-design

Una base de panel extraída del frontend de una plataforma: tokens semánticos, estructuras de aplicación, componentes compartidos, páginas estándar y galería. Licencia MIT.

> Runlume ofrece funciones de plataforma, aplicaciones empresariales independientes y servicios profesionales que pueden combinarse según las necesidades. Funciones, cuotas y alcance dependen del plan o acuerdo de servicio. Las aplicaciones empresariales pueden elegirse por separado; la colaboración sigue las integraciones y autorizaciones configuradas.

Página original: https://runlume.app/es/blog/admin-design-open-source

Guías para desarrolladores · Panel estándar / Código abierto / Base de frontend

Publicado：2026-09-17 · Autor：Equipo de Runlume

Todo proyecto de panel vuelve a construir la misma capa: inicio de sesión, estructura, tablas, árboles, notificaciones, ajustes, estados vacíos y estados de error. El resultado difiere en color, espaciado y detalle de interacción, y mantener la coherencia cuesta más con cada página nueva.

Reunimos esa capa en una única base reutilizable y la publicamos con licencia MIT: **admin-design**, el diseño y la implementación de un panel estándar extraídos del frontend de la plataforma Runlume.

## Qué incluye

- Tema y tokens semánticos: el color pasa solo por clases de utilidad semánticas, con seis paletas predefinidas que se combinan con colores base y de tema, y modos claro y oscuro que se ajustan solos.
- Tres estructuras de aplicación: navegación lateral, superior más lateral y superior. El ancho de la barra lateral, el radio, las transiciones y el orden de las acciones de cabecera son ajustables.
- Nueve páginas de componentes: controles básicos, formularios y selectores, visualización de datos, avisos y capas, navegación y flujos, métricas y gráficos, iconos, tema y ajustes, y páginas estándar. La galería sirve como documentación y como superficie de aceptación.
- Tipos de página estándar: panel de trabajo, listado, detalle, ajustes, centro de notificaciones, acceso, registro y recuperación de contraseña.
- Chino e inglés de serie, acceso por teclado y opciones de accesibilidad, además de la misma búsqueda por paleta de comandos que usa la documentación.

## Tres puntos de entrada

- Página de presentación y resumen del proyecto: [adesign.runlume.app](https://adesign.runlume.app)
- Documentación, con notas de componentes y convenciones de ingeniería: [adoc.runlume.app](https://adoc.runlume.app)
- Demostración en vivo con dos cuentas de prueba con permisos distintos: [ago.runlume.app](https://ago.runlume.app)
- Código fuente e incidencias: [github.com/runlume/admin-design](https://github.com/runlume/admin-design)

## Para quién es y dónde está el límite

Encaja en equipos que construyen su propio panel y no quieren escribir la interfaz dos veces desde cero: copie el repositorio, cambie el nombre en `package.json`, sustituya el menú y los recursos de marca y apunte los datos de ejemplo a su propia API.

Incluye solo la capa de diseño e interacción: no hay API de negocio, ni implementación de autenticación, ni modelo de permisos, ni reglas de negocio. Los datos de ejemplo viven en memoria y se reinician al recargar. Capacidades como identidad, subida de archivos, arrastre en árboles y carga diferida se inyectan mediante props, así que conectar un servicio real consiste en reemplazar la llamada, no en editar el componente.

## Páginas relacionadas

- [Plataforma](https://runlume.app/es/platform)
- [Aplicaciones empresariales](https://runlume.app/es/apps)
- [Desarrolladores](https://runlume.app/es/developers)
- [Acerca de Runlume](https://runlume.app/es/about)