Мы все уже слышали про сотни промтов, которые могут создать полноценный App, и что скоро разработчики будут не нужны.
Но давайте попробуем сделать не то чтобы App, а просто интерактивную страничку.
Предположим, что я не умею кодить и даже не знаю html. Мы засечём время и посчитаем количество запросов, которые у меня уйдут на получение рабочей интерактивной html-странички.
Затем попробуем извлечь из нейросети тот самый заветный один промт, который сможет воссоздать такую же страничку с нуля.
Будем делать страничку, отображающую Leadership Development Framework от Гарварда. Это что-то вроде пирамиды Маслоу, только про развитие лидера. Я выбрал её, потому что сейчас как раз занимаюсь этим вопросом.
Будем использовать chatGPT 4o. Запасайтесь печеньками и начнём...
Сначала получаем контент для нашей странички, то есть просим рассказать теорию Leadership Development Framework от Гарварда.
Затем просим изобразить это в виде пирамиды. Я использую английский, потому что мне нужна была английская версия этой пирамиды.
ChatGPT сам понял, что лучше писать это в виде кода на Python — нас это устраивает, ну или, точнее, нам всё равно: ведь мы "не умеем кодить", и для нас что Python, что HTML — всё пустые слова.
Через пару промтов уже получаем какую-то визуализацию. Я не буду показывать каждое сообщение, иначе статья не войдёт в лимиты habr.
Наконец, говорим, что хотим интерактивную страничку.
Затем просим standalone HTML, чтобы всё было в одном файле. Тут я немного нарушаю правила нашего эксперимента, и применяю кое-какие знания о том, как всё устроено, но в код пока не лезу. Просто прошу "Make standalone html".
Получаем первую версию. ChatGPT решил, что будет достаточно самих названий уровней и краткого описания, а вот детально расписывать качества внутри каждого уровня руководства не стал. Ленится?
Забавно, но когда я корректировал грамматику текста в отдельном чате с нейросетью, она, имея уже чёткий промт только на коррекцию грамматики сообщения, этот промт нарушила и начала оправдывать своего собрата — другую нейросеть. :-)
Дальше просим:
Добавить полное описание к каждому уровню
Сделать полосы разной ширины, чтобы была пирамида
Сделать каждый уровень разворачивающимся по клику
Сделать лучше стиль и шрифты
Сделать карточку внутри каждого бара
Получаем первую версию, которую можно показать другу и сказать: «Смотри, я теперь делаю сайты!»
Из проблем:
Модель постоянно наровит перевернуть список уровней сверху вниз
Приходится вникать в детали, иногда прося прямо поменять конкретные шрифт
Самый крутой промт, который сразу сделал все лучше:
"ok, apply some design skills and make it looks more fancy, e.g now it is ugly a bit, change fonts, style, etc. Make it look fancy and as it was done by famous Design Studio"
Иногда не удается объяснить текстом, но помогает рисунок.
Нейросеть несколько раз ломает страницу, но чинит всё сама по запросу. Опять не удаётся объяснить ей текстом, чтобы разбила всё на отдельные карточки, но нас спасает картинка.
Спустя 10–20 промтов получаем версию, которую не стыдно показать заказчику.
Нейросеть теряет части предыдущего контекста и норовит сделать всё по-другому. Очень похожа на студента, который пытается сдать экзамен на халяву.
Добавляем интерактив с помощью промта: «now make stickers movable inside bar aka section».
Боремся за то, чтобы карточки внутри при передвижении не перекрывались.
Нейросеть периодически заходит в тупик, например, по теме collapsed bars (ломает разворачивание каждой категории) и не может починить. Поэтому иногда проще взять предыдущую рабочую версию и сказать: «Начни отсюда».
Один раз всё-таки пришлось проявить свои знания кода и спасти нейросеть от блуждания вокруг двух берёз.
Спустя ~25 промтов и час работы, получаем финальную версию, которая похожа на то, что нам было нужно.
Затем просим создать промт для создания такой штуки с нуля.
Пробуем созданный промт:
Build an interactive HTML visualization of the Harvard Leadership Development Framework structured as a pyramid, with 7 horizontal bars representing leadership stages, from top (narrowest) to bottom (widest). Each bar represents one leadership level and contains 6 colorful “sticker-style” cards representing categories:
Core logic
Characteristics
Leadership style
Focus
Strengths
Limitation
✨ Design and Interaction Requirements:
Pyramid layout:
Alchemist is at the top with the narrowest bar
Opportunist is at the bottom with the widest bar
Bars should be horizontally centered
Sticker design:
Each category is a separate card (styled like a Post-it)
Stickers have a slight random rotation
Stickers are styled with:
Light yellow background
Dashed border
Circular pin-like pseudo-element on top left
Click behavior:
Clicking a bar toggles its expansion (initially collapsed)
On first expand, stickers are:
Automatically laid out in a grid-like spread across the full width
Visually offset:
Left column nudged right randomly (up to ½ card width)
Right column nudged left
Center column nudged randomly left or right
Responsive layout:
On window resize, all open bars:
Recalculate layout so stickers fit the new width
Height of the bar auto-adjusts to fit additional rows if needed
Free positioning:
Stickers can be freely dragged inside the bar
When dropped:
They stay in position
Automatically push overlapping stickers out of the way
Data:
Each of the 7 leadership levels (Alchemist, Strategist, etc.) must include exact text for the 6 categories as described in the Harvard framework (I can provide this again if needed).
Implementation:
Use vanilla HTML/CSS/JS only (no libraries or frameworks)
All styles and logic should be contained in the same standalone HTML file
Code should be clean, well-organized, and editable
When complete, output a single .html file.Получаем полуфабрикат.
Ещё раз пробуем упаковать всё в промт: используем метод подачи самого рабочего HTML и упаковки из него, а также упаковки из нашего общения. Прибегаем к необходимости детального уточнения, что нужно упаковать и про что не забыть.
Получаем чуть лучшую версию, но всё равно далеко от идеала. Понимаем, чтобы упаковать действительно всё, нужно включить абсолютно все пункты в промт для извлечения промта, а это выглядит довольно утопично и практически невозможно без знания того, из чего состоит HTML.
Ссылка на созданную страницу https://aigentto.ru/html-prompt/
Выводы
Пока нельзя сделать одним промтом целый App.
Приходится вникать и использовать свои знания кода, когда нейросеть заходит в тупик.
В таком варианте нейросеть очень похожа на студента, которому нужно быстро сдать зачёт, ничего не понимая в теме — даже Junior на работе будет меньше тупить и больше стараться.
Разработчиков пока не заменят.
Про наши эксперименты с ИИ для замены разрабов и других профессий пишем в канале @aigentto.