Saltar al contenido

Crea una herramienta interna de administración

Principiante~12 min0/4 pasos

Publica una herramienta interna en minutos

Todo equipo de producto acumula peticiones del tipo «alguien debería hacernos una pantalla de administración rápida». Como PM, ya no tienes que esperar tu turno. Con IA y un poco de Tailwind, puedes prototipar exactamente la herramienta interna que tu equipo de operaciones necesita.

En esta lección construirás un panel de administración limpio: una tabla de datos que lista elementos con botones de acción, más un formulario sencillo para «añadir elemento». Esta es la interfaz básica de las herramientas internas, y cuando sepas esbozarla tú mismo, podrás entregar a ingeniería un prototipo funcional en lugar de un Figma impreciso.

Sé pragmático. Las herramientas internas no necesitan ser bonitas: necesitan ser claras, rápidas y usables por tu equipo.

Instrucciones

1

Añade un encabezado de página (h1) titulado "Panel de administración de usuarios" dentro de un div contenedor centrado

Pista: Usa: `<div class="max-w-4xl mx-auto p-8"><h1 class="text-3xl font-bold mb-6">Panel de administración de usuarios</h1></div>`

¿Dónde va esto?

<!-- Construye tu panel de administración aquí -->

Escríbelo en la línea 11: debajo de ese comentario, después del código que ya añadiste.

2

Añade una tabla de datos con columnas de encabezado (Nombre, Rol, Acciones) y al menos una fila de datos

3

Añade botones de acción Editar y Eliminar dentro de las filas de la tabla

4

Añade un formulario de «añadir elemento» con campos de texto y un botón de envío

Tu código

html
13 líneas
1
2
3
4
5
6
7
8
9
10
11
12
13

Vista previa en vivo

Vista previa en vivo