escritorio

ultrahand: escritorio

Diseña pantallas de aplicaciones de escritorio y web como un artefacto interactivo de Claude. El artefacto es una ventana que puedes arrastrar a cualquier tamaño entre el mínimo y máximo que elijas, con ajustes predefinidos para portátiles, monitores y mitades acopladas comunes, y la disposición se reorganiza en vivo mientras arrastras. Cada regla que aplicas está en references/principles.md, y cada regla cita references/sources.md. Los tamaños, límites y clases de tamaño están en references/presets.md.

1. Recopilar requisitos

Pregunta solo por lo que no puedas deducir. Resuelve esto antes de dibujar:

• Plataforma: macOS, Windows, una aplicación web, o varias. Una aplicación nativa de macOS tiene una barra de menú; las aplicaciones de Windows y web obtienen una barra de comandos o barra de herramientas con desbordamiento.
• Alcance: una pantalla o un flujo. Para un flujo, enumera las pantallas y cómo las personas se mueven entre ellas: barra lateral, pestañas, lista a detalle, panel lateral, diálogo o nueva ventana.
• Tarea principal: la única función de cada pantalla y qué disposición se adapta mejor (lista-detalle, panel de soporte, feed, o un panel de documento único).
• Contenido real: nombres, longitudes, recuentos, conjuntos de columnas y las cadenas plausibles más largas. No diseñes con lorem ipsum.
• Estados de datos: qué se carga, qué puede estar vacío, y qué puede fallar o desconectarse, por panel.
• Límites de ventana: el tamaño mínimo de la ventana, el máximo y el ancho máximo del contenido. Por defecto, 640 × 480 para una aplicación nativa y 320 × 256 para una aplicación web (consulta presets.md).
• Entradas: puntero y teclado siempre; táctil si puede ejecutarse en dispositivos 2 en 1 o portátiles táctiles. ¿Qué comandos son lo suficientemente frecuentes como para merecer un atajo?
• Ventanas: una ventana, o varias (documentos, inspectores, paneles desacoplados).
• Restricciones: colores de marca, fuentes, un sistema de diseño existente o biblioteca de componentes.
• Tema: busca el tema del proyecto (design/THEME.md, *.tokens.json; consulta shared/theme/README.md) antes de elegir cualquier color, tamaño o espaciado. Si existe uno, diseña con él: ejecuta node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html, pasa --head theme.html a la construcción, usa solo sus propiedades personalizadas (var(--color-surface), var(--space-gap-group)), y reutiliza los componentes de su inventario. Cuando el diseño necesite algo que el tema no tenga, usa el token más cercano y enumera la adición en preguntas abiertas; no inventes un valor. Sin tema, sigue los puntos no negociables en shared/theme/rules.md y ofrece la habilidad theme.

2. Leer las referencias

Lee references/principles.md y references/presets.md antes de diseñar. Utiliza los patrones propios de la plataforma (barra de menú, barra de herramientas, barra lateral, vista dividida, menú contextual, hoja, NavigationView) en lugar de inventar otros nuevos.

3. Componer la pantalla

Componentes que pasan sus comprobaciones individualmente aún pueden sumar una pantalla desordenada. Antes de construir, planifica cómo forman secciones y cómo las secciones forman la pantalla, usando las reglas de composición del plugin en shared/composition/principles.md:

• Escribe el mapa de secciones. Para cada pantalla, enumera sus secciones (una barra de herramientas en como máximo tres grupos, una barra lateral, un panel de contenido y un inspector), la función única de cada una, sus miembros ordenados por frecuencia de uso, y su único énfasis. Di qué es contenido principal y qué es cromo: el contenido domina y el cromo se retira.
• Agrupa con espacio. Los espacios dentro de un grupo son claramente más pequeños que los espacios entre grupos; añade un contenedor solo cuando el espacio no pueda mostrar el grupo.
• Un aspecto por función, un énfasis por sección. Misma función, mismo estilo; los estados y etiquetas nunca parecen botones; el acento fuerte va a una cosa por sección, y los estados seleccionados usan un tratamiento más sutil.
• Mantenlo pequeño. Alrededor de tres tamaños de letra, un dato en un lugar, miembros frecuentes a la vista y los raros detrás de un menú. Cuando un cambio añade algo, reorganiza primero y añade solo lo que merece su lugar.

4. Construir el artefacto de lienzo

Construye sobre el lienzo redimensionable compartido del plugin (shared/canvas/; su README.md tiene el contrato completo). Escribe la pantalla como screen.html y la configuración propia del diseño como config.json, luego construye:

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/desktop/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<nombre del diseño>" --out index.html

Publica index.html como un artefacto.

• config.json establece title, states (por ejemplo, por defecto, cargando, vacío, error) y los limits del diseño: { minWidth, minHeight, maxWidth, maxHeight }. El lienzo te permite arrastrar cualquier tamaño entre ellos. Para una aplicación web, también establece "initialPreset": "browser".
• Ajustes predefinidos (de presets.md): portátiles (1366 × 768, 1536 × 864, MacBook 1440 × 900), monitores (1920 × 1080, 2560 × 1440), mitades acopladas (960 × 1080, 720 × 900) y una ventana de navegador (1280 × 720). Comprobaciones: tu ventana mínima, una ventana corta de 1366 × 600 y zoom al 400% a 320 × 256.
• Contrato de pantalla: un <template id="uh-screen"> con secciones [data-screen], y data-nav, data-nav-back y data-show-state para clics. Responde al tamaño con @container screen (width >= …), no con @media. Texto en rem; áreas de clic, iconos y medianiles en px, para que el texto al 200% agrande las palabras, no los controles. Colores con light-dark(). El comportamiento va en window.ultrahandSetup = function (canvas) { … }.
• Alternativas integradas: claro/oscuro, texto al 200%, selector de estado y objetivos táctiles (24 px mínimo para escritorio). Llama a canvas.refresh() después de abrir un menú o popover para que la superposición de objetivos lo vea.
• Haz que funcione como una aplicación de escritorio: estados al pasar el ratón, un menú contextual al hacer clic derecho (y Shift+F10), foco visible, navegación por Tab y flechas que funcione, sugerencias de atajos en menús y tooltips, paneles que se ocultan y muestran, y divisores que se arrastran. Nunca uses alert, confirm o prompt; dibuja diálogos en la pantalla.

5. Diseñar cada clase de tamaño

Trabaja de ancho a estrecho, y soluciona cada problema en el tamaño donde aparece:

1. Grande / extra grande (laptop-125, desktop-fhd): elige los paneles, la navegación, los grupos de la barra de herramientas y la densidad. Limita el ancho del contenido; el ancho extra va a los paneles, no a líneas más largas.
2. Expandido (snap-half, ~960): colapsa el inspector o panel secundario, convierte la barra lateral en un carril, y comienza a mover elementos de la barra de herramientas al desbordamiento en el orden planificado.
3. Mediano y tu mínimo (mac-half, la comprobación de ventana mínima): uno o dos paneles, un botón de menú o carril para la navegación, y cada comando aún accesible a través de menús.
4. Arrastra lentamente desde el máximo hasta el mínimo y viceversa. La selección, la posición de desplazamiento, el texto escrito y los paneles abiertos deben sobrevivir a cada punto de quiebre.

Luego ejecuta las comprobaciones: la ventana corta (barras fijas, foco no oculto) y, para aplicaciones web, zoom al 400% a 320 × 256 (una columna, solo desplazamiento vertical).

6. Autocomprobación antes de presentar

Revisa cada elemento. Corrige cualquier fallo, o nómbralo y di por qué es aceptable.

Composición (ejecuta la auditoría de composición, node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs", en el tamaño más grande y más pequeño, o comprueba visualmente):

• Desenfocada, la pantalla muestra las secciones previstas, y el contenido principal atrae la mirada primero. Sin punto brillante no intencionado.
• Cada sección tiene una función, sus miembros agrupados por función y frecuencia, con espacios entre grupos claramente mayores que los espacios dentro de ellos.
• Cada sección tiene como máximo un elemento fuertemente enfatizado; los estados seleccionados son sutiles.
• Un estilo por función: cuenta los estilos de control en cada sección y justifica cualquier extra. Ninguna etiqueta o estado parece un botón.
• Filas y secciones se alinean a bordes compartidos; alrededor de tres tamaños de letra en la pantalla.
• Ningún dato mostrado dos veces, y nada en pantalla que no sirva a una tarea aquí.
• Después de una ronda de cambios: enumera lo que añadió; la pantalla no está más ocupada de lo necesario.
• Solo valores del tema: sin colores sin procesar, sin espaciado fuera de la escala de 8 puntos, sin tamaños de letra fuera de la escala, y componentes del inventario reutilizados en lugar de reconstruidos (shared/theme/rules.md NN-1, NN-2, NN-6, EV-4).

Componentes y plataforma:

• El diseño declara su tamaño mínimo y máximo de ventana y su ancho máximo de contenido. Nada se superpone o recorta en el mínimo, y nada se estira en el máximo.
• La disposición cambia según el ancho de la ventana (Material 600 / 840 / 1200, o Windows 641 / 1008), no según el dispositivo. Cada función es accesible en todos los tamaños.
• Redimensionar reorganiza en vivo y mantiene selección, desplazamiento, entrada y paneles abiertos.
• Los paneles siguen una disposición canónica, los divisores se arrastran, los paneles se pueden ocultar mediante botón, menú y atajo, y ningún panel está vacío sin una explicación.
• El texto del cuerpo se mantiene en o por debajo de 80 caracteres por línea.
• Cada comando está en un menú (la barra de menú en macOS) o en el desbordamiento de la barra de herramientas; los elementos de menú no disponibles están deshabilitados, no ocultos; los comandos que requieren entrada terminan con "…".
• Los elementos de la barra de herramientas se desbordan en un orden planificado a medida que la ventana se estrecha, con como máximo tres grupos.
• El clic derecho abre un menú contextual breve y relevante, y cada uno de sus comandos también existe en otro lugar.
• Todo funciona con teclado sin trampas; el foco siempre es visible y nunca debajo de una barra fija; los atajos estándar no se reutilizan; los atajos se muestran en menús y tooltips.
• Nada está disponible solo al pasar el ratón. El contenido al pasar el ratón y con foco se puede descartar con Esc, es pasable y persistente; los tooltips no llevan información vital.
• Los objetivos tienen al menos 24 × 24 px (aproximadamente 40 × 40 donde es probable el táctil).
• Desplazamiento: solo el contenido se desplaza, sin áreas de desplazamiento anidadas en la misma dirección, los encabezados de tabla permanecen congelados, y ningún control crítico se encuentra en el borde inferior de la ventana.
• La edición usa el patrón más ligero que encaje: en línea para un campo, un panel lateral para un registro, una hoja o diálogo para una tarea corta que bloquea, una ventana o página para flujos largos. Las confirmaciones solo son para acciones destructivas e irreversibles; todo lo demás ofrece Deshacer.
• Cada arrastrar y soltar tiene una alternativa sin arrastre.
• La disposición sobrevive al texto al 200%, y el contraste es de al menos 4.5:1 para texto y 3:1 para UI en ambos modos claro y oscuro.
• Los estados de carga, vacío y error están diseñados para cada panel, no solo para la ventana.
• Aplicaciones web: funciona a 320 × 256 (zoom al 400%) sin desplazamiento bidireccional, y tiene un enlace de salto.

7. Presentar

Comparte el enlace del artefacto. En pocas líneas, indica el mapa de secciones (la función y énfasis de cada sección), los límites de la ventana y el ancho máximo del contenido, las decisiones clave y el principio detrás de cada una (cita la clave de la fuente), cómo cambia la disposición en cada clase de ancho, cualquier elemento de autocomprobación que aceptaste con una razón, y cualquier adición propuesta al tema (para la habilidad theme), y cualquier pregunta abierta.