Recursos para IA y uso sin CDN

Descargas para trabajar con IAs y para integrar sin CDN.

Mínimo recomendado para IA:

• mkclinico-ui.min.css
• mkclinico-ai-context-lite.md
• integracion-producto-demos-y-version.md

Con IAs, el CSS no sustituye el .md (detalle en el lite, CDN frente a contexto).

Los archivos .md indican que los demos /demo-* son referencia de composición (orden de bloques); las IAs deben copiar estructura y clases del DS, no la lógica de la guía Next.js. Misma idea para personas en Para desarrolladores → Demos como referencia de composición.

• Pedido vago: replicar un demo

  Cuando solo dicen «copia el demo» o equivalente: la IA debe pedir qué ruta /demo-* si no está claro, y devolver composición + clases DS (no el código Next completo). Pega este bloque como TAREA o combínalo con el prompt base.

  Demos a pantalla completa (ancla en la guía)Sin demo en ruta aparte

  Snippet mínimo

  Texto

  Copiar todo

  TAREA Replicar la composición de un demo MKClinico (Design System) según la guía / mkclinico-ai-context-lite.md. DEBE - Misma jerarquía de bloques y clases DS que el demo indicado abajo (solo maqueta: markup + clases documentadas). - Datos de ejemplo clínicos genéricos (pacientes, citas, etc.). - Si el destino NO es el monorepo de la guía: HTML + <link rel="stylesheet" href="https://cdnmk3.masterkey.cl/assets/css/mkclinico-ui.min.css"> al inicio. NO - Copiar hooks, estado, rutas ni lógica del código fuente Next.js de la guía. - Inventar clases que no estén en el contexto .md. INDICA EL DEMO (una ruta) Ej.: /demo-formato-2 | /demo-nuevo-formulario-herramientas | /demo-contenedor-plantillas | /demo-layout | /demo-constructor-formulario | … NOTA (funcionalidad después) Si luego piden interacción que no venía en esta TAREA: el demo sigue siendo referencia de UX/comportamiento; la implementación la escribe su proyecto en su stack. La IA debe decírselo al usuario en una frase y mantener clases DS.

• Pantalla con shell (layout)

  Navbar lateral, barra superior y panel principal con título y botón de acción. En React, preferir el componente LayoutPantalla.

  Layout de pantalla (ancla en la guía)Demo LayoutPantalla (nueva pestaña)

  Snippet mínimo

  TSX

  Copiar todo

  import LayoutPantalla from "@/app/components/LayoutPantalla"; <LayoutPantalla titulo="Pacientes" navItems={menuItems} activeItemId="pacientes" botonAccion={{ label: "Nuevo paciente", onClick: () => {} }} usuario={{ nombre: "Usuario", opciones: [] }} > {/* contenido del panel */} </LayoutPantalla>

• Listado con tabla y acciones

  Tabla con columnas alineadas mediante --tabla-cols y celdas de acción (ver, editar, eliminar). La demo de layout muestra el shell; la estructura de tabla está en la guía.

  Tablas (ancla en la guía)Demo con shell de pantalla (nueva pestaña)

  Snippet mínimo

  HTML

  Copiar todo

  <div class="tabla-container"> <div class="tabla" style="--tabla-cols: 40px 1fr 1fr 1fr 88px 88px 88px;"> <div class="tabla-header"> <div class="tabla-cell"></div> <div class="tabla-cell">Nombre</div> <div class="tabla-cell">RUT</div> <div class="tabla-cell">Estado</div> <div class="tabla-cell" style="justify-content:center">Ver</div> <div class="tabla-cell" style="justify-content:center">Editar</div> <div class="tabla-cell" style="justify-content:center">Eliminar</div> </div> <!-- tabla-row, tabla-cell… --> </div> </div>

• Formulario con campos y estados

  Campos con etiqueta, estados de error y advertencia del DS. La demo a pantalla completa sugiere /demo-contenedor-plantillas (maqueta de ficha + lienzo). Pantallas tipo armador (paleta + rejilla): guía Layout → constructor de formulario y demo /demo-constructor-formulario (React en este repo; no confundir con solo HTML+CDN sin contexto .md).

  Input con título (ancla en la guía)Demo contenedor plantillas (nueva pestaña)

  Snippet mínimo

  HTML

  Copiar todo

  <div class="input-con-titulo-campo"> <label class="input-con-titulo-label" for="campo-nombre">Nombre completo</label> <input id="campo-nombre" class="input-campo" type="text" placeholder="Ej. Ana Pérez" /> </div> <!-- input-error / input-warning en el input según validación -->

• Modal de confirmación

  Diálogo sin botón de cierre en X: título, mensaje y dos acciones (btn-modal-primario / btn-modal-secundario). No hay ruta demo dedicada; el artículo incluye vista previa y código.

  Modal de confirmación (ancla en la guía)Sin demo en ruta aparte

  Snippet mínimo

  HTML

  Copiar todo

  <div class="modal-overlay modal-overlay--open" role="dialog" aria-modal="true"> <div class="modal-confirmacion"> <h2 class="modal-titulo">¿Deseas continuar?</h2> <p class="modal-subtitulo">Esta acción no se puede deshacer.</p> <div class="modal-footer"> <button type="button" class="btn-modal-primario">No, continuar</button> <button type="button" class="btn-modal-secundario">Sí, salir</button> </div> </div> </div>

• Lista con paginación

  Navegación entre páginas después de un listado o tabla. En la guía Next.js se documenta el componente Paginacion.

  Paginación (ancla en la guía)Sin demo en ruta aparte

  Snippet mínimo

  TSX

  Copiar todo

  import Paginacion from "@/app/components/Paginacion"; <Paginacion paginaActual={1} totalPaginas={10} onCambioPagina={(p) => {}} />