HomeCasa Prompts

Especificación de diseño de una tabla de datos para un panel de gestión

Define una tabla de datos completa: orden y formato de columnas, ordenación, filtros, paginación o scroll virtual, acciones masivas, densidad, estados, versión móvil y accesibilidad. Pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Incluye 6 variables personalizables y se copia gratis en un clic.

Intermedio · Texto · Pendiente de revisión editorial

Pensado para:

Prompt

Actúa como diseñador de producto especializado en aplicaciones B2B con muchos datos.

Contexto:
- Producto: {{producto}}
- Entidad que muestra la tabla: {{entidad}}
- Columnas disponibles: {{columnas}}
- Tareas principales del usuario con esta tabla: {{tareas}}
- Volumen habitual de filas: {{volumen}}
- Plataforma: {{plataforma}}

Entregables:
1. Prioridad y orden de columnas según las tareas, con alineación (números a la derecha, texto a la izquierda), formato de fechas, importes y estados, y reglas de truncado con tooltip.
2. Cabecera: ordenación (por defecto y multicolumna si tiene sentido), cabecera y primera columna fijas, redimensionado y selección de columnas visibles.
3. Búsqueda y filtros: filtros rápidos, filtros avanzados, chips de filtros activos, «limpiar todo» y vistas guardadas.
4. Paginación, scroll infinito o virtualización: recomendación justificada para el volumen indicado.
5. Selección y acciones: acciones por fila, acciones masivas, selección de todas las filas frente a todas las de la página y confirmación de acciones destructivas.
6. Densidad (cómoda, compacta), altura de fila y espaciado.
7. Estados: carga con skeleton, vacío, sin resultados, error y datos parciales.
8. Comportamiento responsive o alternativa en pantallas pequeñas.
9. Accesibilidad: tabla semántica, aria-sort, navegación por teclado, foco visible y anuncios de cambios.
10. Tabla resumen de componentes y tokens necesarios para el sistema de diseño.

Restricciones:
- No inventes columnas ni datos de ejemplo que no estén en el contexto; usa [COMPLETAR].
- Justifica cada decisión con la tarea del usuario que resuelve.
- Si falta información clave (por ejemplo, qué acciones se pueden hacer sobre una fila), pregúntame antes.

Formato: especificación con encabezados numerados, tablas y un wireframe en texto de la tabla en su estado por defecto.

Cómo usarlo

  1. Lista las columnas reales y lo que el usuario hace con la tabla. 2. Revisa la recomendación de paginación con el equipo técnico. 3. Usa la tabla final de componentes para crear o actualizar el componente en tu sistema de diseño.

Ejemplo de uso

Entidad: pedidos · Columnas: número, cliente, fecha, importe, estado, transportista · Tareas: localizar incidencias y exportar · Volumen: 100-10.000 filas.

Resultado de ejemplo

1. Prioridad de columnas

OrdenColumnaAlineaciónFormatoTarea que apoya
1Nº de pedidoIzquierda, fijaMonoespaciada, enlaceLocalizar un pedido concreto
2EstadoIzquierdaEtiqueta con icono + textoDetectar incidencias
3ClienteIzquierdaTruncado con tooltipIdentificar el pedido
4FechaDerecha12/03/2025 · 14:05Ordenar por antigüedad
5ImporteDerecha1.234,50 €Revisar pedidos grandes
6TransportistaIzquierdaTextoAgrupar incidencias
7PaísIzquierdaNombre cortoFiltrar envíos

4. Paginación

Con hasta 10.000 filas y exportación a CSV, recomiendo paginación de 50 filas con selector de tamaño: mantiene la posición al volver de un pedido y deja claro qué se selecciona en acciones en bloque.

5. Selección

Al marcar todas: «50 pedidos de esta página seleccionados · Seleccionar los 2.340 que coinciden con el filtro». Las acciones destructivas piden confirmación indicando el número exacto.

Wireframe (estado por defecto)

[Buscar pedido…] [Estado ▾] [Transportista ▾] [País ▾]   [Vistas ▾] [Exportar CSV]
Filtros: (Con incidencia ×) (Últimos 7 días ×)  Borrar todo
☐ | Nº pedido ▲ | Estado      | Cliente     | Fecha      | Importe   | Transp. | País
☐ | [COMPLETAR] | ⚠ Incidencia | [COMPLETAR] | [COMPLETAR] | [COMPLETAR] | …       | …

…

Datos clave

Categoría
Diseño UI/UX · Dashboards
Tipo de resultado
Texto
Nivel
Intermedio
Pensado para
ChatGPT, Claude, Gemini y Microsoft Copilot
Verificado en
Pendiente de verificación editorial
Variables
Producto, Entidad, Columnas disponibles, Tareas principales, Volumen de filas y Plataforma
Idioma
Español
Precio
Gratis, sin registro
Actualizado
07/11/2026

Preguntas frecuentes

¿Paginación o scroll infinito en una tabla de datos?

En tablas de trabajo suele funcionar mejor la paginación o la virtualización, porque el usuario necesita volver a una fila concreta y ver el total. El prompt recomienda una opción según tu volumen y tareas.

¿Cómo se adapta una tabla compleja al móvil?

Normalmente se priorizan 2-3 columnas clave y se muestra el resto en una fila expandible o en una vista de tarjeta. La especificación te propone la alternativa más adecuada para tus tareas.

¿Para qué sirve este prompt?

Define una tabla de datos completa: orden y formato de columnas, ordenación, filtros, paginación o scroll virtual, acciones masivas, densidad, estados, versión móvil y accesibilidad.

¿Con qué herramientas de IA funciona?

Está pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.

¿Cómo personalizo el prompt?

Pulsa «Personalizar» y rellena las variables (Producto, Entidad, Columnas disponibles, Tareas principales, Volumen de filas y Plataforma). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.

¿Necesito experiencia para usarlo?

Es de nivel intermedio: conviene que conozcas el tema para aportar buen contexto y revisar el resultado con criterio.

¿Este prompt es gratis?

Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.

¿Puedo fiarme del resultado de la IA?

Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.

Prompts relacionados