Перейти к содержимому

Создайте внутренний инструмент администратора

Начинающий~12 мин0/4 шаги

Запустите внутренний инструмент за минуты

У каждой продуктовой команды есть бэклог запросов в духе «кто-нибудь должен сделать нам быстрый экран администратора». Как PM, вам больше не нужно стоять в очереди. С помощью AI и немного Tailwind вы можете создать прототип именно того внутреннего инструмента, который нужен вашей операционной команде.

В этом уроке вы создадите аккуратную панель администратора: таблицу данных со списком элементов и кнопками действий, а также простую форму «добавить элемент». Это основа пользовательского интерфейса внутренних инструментов, и как только вы сможете набросать её самостоятельно, вы сможете передать инженерам рабочий прототип вместо расплывчатого Figma.

Будьте прагматичны. Внутренние инструменты не обязаны быть красивыми — они должны быть понятными, быстрыми и удобными для вашей команды.

Инструкции

1

Добавьте заголовок страницы (h1) с текстом «User Admin Panel» внутри центрированного контейнера div

Подсказка: Используйте: `<div class="max-w-4xl mx-auto p-8"><h1 class="text-3xl font-bold mb-6">User Admin Panel</h1></div>`

Куда это писать?

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

Пишите в строке 11 — под тем комментарием, после уже добавленного кода.

2

Добавьте таблицу данных с заголовками столбцов (Name, Role, Actions) и хотя бы одной строкой данных

3

Добавьте кнопки действий «Edit» и «Delete» внутри строк таблицы

4

Добавьте форму «добавить элемент» с текстовыми полями и кнопкой отправки

Ваш код

html
13 строки
1
2
3
4
5
6
7
8
9
10
11
12
13

Живой просмотр

Живой просмотр