Vai al contenuto

Costruisci uno Strumento Admin Interno

Principiante~12 min0/4 passaggi

Lancia uno Strumento Interno in Pochi Minuti

Ogni team di prodotto ha un backlog pieno di richieste del tipo «qualcuno dovrebbe costruirci una schermata admin veloce». Come PM, non devi più aspettare il tuo turno. Con l'AI e un po' di Tailwind, puoi prototipare esattamente lo strumento interno di cui il tuo team operativo ha bisogno.

In questa lezione costruirai un pannello admin pulito: una tabella dati che elenca elementi con pulsanti di azione, più un semplice modulo «aggiungi elemento». Questa è l'interfaccia base degli strumenti interni, e una volta che sai abbozzarla da solo, puoi consegnare all'ingegneria un prototipo funzionante invece di un Figma vago.

Rimani pragmatico. Gli strumenti interni non devono essere belli — devono essere chiari, veloci e utilizzabili dal tuo team.

Istruzioni

1

Aggiungi un'intestazione di pagina (h1) con il titolo «User Admin Panel» all'interno di un div centrato

Suggerimento: Usa: `<div class="max-w-4xl mx-auto p-8"><h1 class="text-3xl font-bold mb-6">User Admin Panel</h1></div>`

Dove va scritto?

<!-- Build your admin panel here -->

Scrivilo alla riga 11: sotto quel commento, dopo il codice che hai già aggiunto.

2

Aggiungi una tabella dati con colonne di intestazione (Name, Role, Actions) e almeno una riga di dati

3

Aggiungi i pulsanti di azione Edit e Delete all'interno delle righe della tabella

4

Aggiungi un modulo «aggiungi elemento» con campi di testo e un pulsante di invio

Il tuo codice

html
13 righe
1
2
3
4
5
6
7
8
9
10
11
12
13

Anteprima dal vivo

Anteprima dal vivo