Aller au contenu

Créer un outil d'administration interne

Débutant~12 min0/4 étapes

Livrez un outil interne en quelques minutes

Chaque équipe produit a un backlog de demandes du type «quelqu'un devrait nous construire un écran d'admin rapide». En tant que PM, vous n'avez plus à faire la queue. Avec l'IA et un peu de Tailwind, vous pouvez prototyper exactement l'outil interne dont votre équipe ops a besoin.

Dans cette leçon, vous allez construire un panneau d'administration épuré : un tableau de données listant des éléments avec des boutons d'action, ainsi qu'un simple formulaire «ajouter un élément». C'est le pain quotidien des interfaces d'outils internes, et une fois que vous savez l'esquisser vous-même, vous pouvez remettre à l'ingénierie un prototype fonctionnel plutôt qu'un Figma vague.

Restez pragmatique. Les outils internes n'ont pas besoin d'être beaux — ils doivent être clairs, rapides et utilisables par votre équipe.

Instructions

1

Ajoutez un titre de page (h1) intitulé «User Admin Panel» dans un div centré

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

Où faut-il écrire ça ?

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

Écrivez-le à la ligne 11 — sous ce commentaire, après le code que vous avez déjà ajouté.

2

Ajoutez un tableau de données avec des colonnes d'en-tête (Name, Role, Actions) et au moins une ligne de données

3

Ajoutez des boutons d'action Modifier et Supprimer dans les lignes du tableau

4

Ajoutez un formulaire «ajouter un élément» avec des champs de texte et un bouton d'envoi

Votre code

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

Aperçu en direct

Aperçu en direct