Ein internes Admin-Tool erstellen
Ein internes Tool in Minuten fertigstellen
Jedes Produktteam hat einen Rückstand an „Könnte mal jemand schnell einen Admin-Bildschirm bauen?"-Anfragen. Als PM musst du nicht länger in der Warteschlange stehen. Mit KI und ein bisschen Tailwind kannst du genau das interne Tool prototypisieren, das dein Ops-Team braucht.
In dieser Lektion baust du ein übersichtliches Admin-Panel: eine Datentabelle mit Einträgen und Aktionsschaltflächen sowie ein einfaches Formular zum Hinzufügen von Einträgen. Das ist das Brot-und-Butter-UI interner Tools – und sobald du es selbst skizzieren kannst, kannst du dem Entwicklungsteam einen funktionierenden Prototyp übergeben statt eines vagen Figma-Entwurfs.
Bleib pragmatisch. Interne Tools müssen nicht hübsch sein – sie müssen klar, schnell und für dein Team nutzbar sein.
Anweisungen
Füge eine Seitenüberschrift (h1) mit dem Titel „User Admin Panel" in einem zentrierten Container-Div hinzu
Tipp: Verwende: `<div class="max-w-4xl mx-auto p-8"><h1 class="text-3xl font-bold mb-6">User Admin Panel</h1></div>`
Wo kommt das hin?
<!-- Build your admin panel here -->Schreib es in Zeile 11 — unter diesem Kommentar, nach dem Code, den du schon ergänzt hast.
Füge eine Datentabelle mit Kopfspalten (Name, Role, Actions) und mindestens einer Datenzeile hinzu
Füge Aktionsschaltflächen „Edit" und „Delete" in die Tabellenzeilen ein
Füge ein „Eintrag hinzufügen"-Formular mit Texteingabefeldern und einer Senden-Schaltfläche hinzu
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Füge eine Seitenüberschrift (h1) mit dem Titel „User Admin Panel" in einem zentrierten Container-Div hinzu