¿Qué hace dense-tool-ui?
Una referencia medida para la interfaz de usuario de herramientas "calmada, densa y orientada al teclado": panel de contenido anidado, filas de 44px sin divisores, paleta de comandos ⌘K, edición en línea, pasos de gris LCH en lugar de sombras. Además, la página de aterrizaje monocromática correspondiente.
Copia la estructura y el comportamiento, nunca la marca. Oscuro + Inter + acento púrpura es exactamente lo que los generadores de IA producen por defecto: cambia siempre --accent-h y --font según el proyecto.
Archivos
| Ruta | Leer cuando |
|---|---|
assets/app-template.html | Construir una aplicación/panel/backoffice. Caparazón ejecutable: lista/tablero, detalle, ⌘K, modal de creación, toasts, oscuro/claro, ?selftest. |
assets/landing-template.html | Construir una página de aterrizaje. Encabezado con desenfoque, héroe + captura de producto, manifiesto, sección de características + cajón de especificaciones, registro de cambios, testimonios, precios + tabla comparativa, pie de página. ?selftest. |
references/app.md | Medidas exactas para caparazón, barra lateral, lista, tablero, detalle de incidencia/proyecto, modales, ⌘K, menú de filtros, atajos. |
references/tokens.md | Pasos de color (oscuro + claro), escala tipográfica, radios, sombras, easing. |
references/landing.md | Anatomía de página de aterrizaje, precios y clientes, puntos de interrupción responsive, tokens de marketing. |
Flujo de trabajo
- Copia la plantilla correspondiente al proyecto. Nunca edites los originales.
- Rebranding: establece
--accent-h(p. ej., verde azulado 190, naranja 50, verde 150) y--font, luego el nombre del producto, los datos y el texto. Renombra la claveapp-themede localStorage. - Reemplaza los datos de ejemplo. Mantén las formas del DOM:
.grp > .row,.col > .card,.detail > .doc + .props. - Añade comandos a
CMDScomo[label, [keys], fn]. Los atajos de una sola tecla van en el listenerkeydown, que ya ignora la escritura en inputs. - Lee el archivo
references/correspondiente antes de añadir una pantalla que la plantilla no tenga. - Verifica: abre
file.html?selftesty espera el título de pestañaSELFTEST OK <n>. Luego mira a 1280px y 390px, oscuro y claro.
Reglas
- Densidad primero: cuerpo de 13px, filas de 44px, sin divisores de fila, sin iconos decorativos. Color solo para estado, etiquetas y un botón primario por pantalla.
- Profundidad mediante pasos de fondo, no con degradados, brillos o desenfoques (ni siquiera detrás de ⌘K). Los bordes son sombras de anillo de 1px con baja opacidad.
- Cada acción tiene un atajo, y el atajo es visible en botones, menús y tooltips. ⌘K sensible al contexto.
Ctrl/⌘+Enterenvía. - Edita en el lugar, guarda al instante: sin botones de Guardar. Las propiedades son botones que abren selectores. La creación termina en un toast con un enlace.
- Los estados vacíos actúan: ilustración de línea fina, una frase, un botón primario que muestra su atajo.
- Eliminar es suave: confirma, mantenlo restaurable, indica el período de retención.
- La lista y el tablero son los mismos datos. "Opciones de visualización" permite al usuario elegir agrupación, ordenamiento y columnas visibles.
- Página de aterrizaje: casi monocromática, dos tonos de texto para énfasis, una CTA clara repetida en el encabezado y antes del pie de página, el producto real como imagen del héroe.
No copiar
Logos, nombres de producto, ilustraciones, conjuntos de iconos, imágenes de marketing o texto del producto fuente. Toma solo medidas, estructura y comportamiento.