Кому нужен этот промт и как он работает?
Этот промт предназначен для веб-разработчиков, дизайнеров, маркетологов и всех, кто хочет быстро получить готовую структуру простого сайта с основными разделами: «О нас», «Услуги», «Контакты» и ссылками на соцсети.
Он помогает сэкономить время и силы, автоматически создавая три файла: HTML с разметкой, CSS с таблицей стилей и JavaScript для плавной прокрутки по якорям. Благодаря этому вы получите основу сайта, которую можно сразу дополнять и изменять под свои задачи.
Промт работает так: вы указываете информацию о компании, название сайта, список услуг, контакты и ссылки на соцсети, а нейросеть генерирует готовый код, который уже включает разделы и функционал, обеспечивающий удобную навигацию по сайту.
Готовый промт
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
В роли опытного разработчика HTML/CSS/JavaScript создайте три файла для сайта: index.html с разметкой, styles.css с таблицей стилей и script.js с JavaScript-кодом для плавной прокрутки к якорям. Включите следующие разделы и элементы: - Название сайта: {{ название сайта }} - Раздел "О нас" с содержанием: {{ информация о компании }} - Раздел "Услуги" с перечислением: {{ список услуг }} - Раздел "Контакты" с информацией: - Адрес: {{ адрес }} - Телефон: {{ телефон }} - Электронная почта: {{ email }} - Ссылки на соцсети: - Facebook: {{ ссылка на Facebook }} - Twitter: {{ ссылка на Twitter }} - Instagram: {{ ссылка на Instagram }} - LinkedIn: {{ ссылка на LinkedIn }} - YouTube: {{ ссылка на YouTube }} - Дополнительные пользовательские требования: {{ дополнительная информация }} |
Как использовать промт и на что обращать внимание
Перед использованием промта подготовьте все необходимые данные: название сайта, тексты для разделов и актуальные ссылки на соцсети.
Подставляйте информацию в фигурные скобки {{ }} вместо шаблонных значений, сохраняя форматирование.
- Проверяйте корректность и полноту предоставленных данных — ошибки в ссылках или контактной информации повлияют на итоговый сайт.
- Если нужны дополнительные разделы или особые стили, укажите это в блоке «Дополнительные пользовательские требования».
- В сложных случаях с большим объемом информации результат нейросети может потребовать лёгкой доработки вручную.
- Учитывайте, что при большом количестве услуг или социальных ссылок стиль и расположение элементов может нуждаться в подгонке.
Примеры использования
Пример 1. Создание сайта для небольшой компании, которая предлагает IT-услуги.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
В роли опытного разработчика HTML/CSS/JavaScript создайте три файла для сайта: index.html с разметкой, styles.css с таблицей стилей и script.js с JavaScript-кодом для плавной прокрутки к якорям. Включите следующие разделы и элементы: - Название сайта: «IT Solutions» - Раздел "О нас" с содержанием: «Мы — команда профессионалов в сфере IT, предоставляющая качественные услуги по разработке и поддержке ПО.» - Раздел "Услуги" с перечислением: «Веб-разработка, Мобильные приложения, Техническая поддержка» - Раздел "Контакты" с информацией: - Адрес: «г. Москва, ул. Ленина, 10» - Телефон: «+7 495 123-45-67» - Электронная почта: «info@itsolutions.ru» - Ссылки на соцсети: - Facebook: «https://facebook.com/itsolutions» - Twitter: «https://twitter.com/itsolutions» - Instagram: «https://instagram.com/itsolutions» - LinkedIn: «https://linkedin.com/company/itsolutions» - YouTube: «https://youtube.com/itsolutions» - Дополнительные пользовательские требования: «Добавьте адаптивную верстку и светлую цветовую схему.» |
Этот пример поможет быстро получить сайт для небольшой IT-компании с удобной навигацией и основной информацией.
Пример 2. Создание посадочной страницы для услуги косметологии с важным акцентом на контакты и соцсети.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
В роли опытного разработчика HTML/CSS/JavaScript создайте три файла для сайта: index.html с разметкой, styles.css с таблицей стилей и script.js с JavaScript-кодом для плавной прокрутки к якорям. Включите следующие разделы и элементы: - Название сайта: «BeautyCare» - Раздел "О нас" с содержанием: «Профессиональные косметологические услуги с индивидуальным подходом к каждому клиенту.» - Раздел "Услуги" с перечислением: «Уход за кожей, Массаж лица, Антивозрастные процедуры» - Раздел "Контакты" с информацией: - Адрес: «г. Санкт-Петербург, пр. Невский, 50» - Телефон: «+7 812 987-65-43» - Электронная почта: «contact@beautycare.ru» - Ссылки на соцсети: - Facebook: «https://facebook.com/beautycare» - Twitter: «https://twitter.com/beautycare» - Instagram: «https://instagram.com/beautycare» - LinkedIn: «https://linkedin.com/company/beautycare» - YouTube: «https://youtube.com/beautycare» - Дополнительные пользовательские требования: «Сделайте акцент на раздел "Контакты" с крупным шрифтом и кнопкой обратного звонка.» |
Этот вариант поможет маркетологам и косметологам быстро получить красивый landing page с важной контактной информацией и удобной структурой.
Пример вывода нейросети
✅ В ответе нейросеть создаст три файла:
1. index.html с семантической разметкой, включающей заголовок с названием сайта, структурированные разделы с текстом и ссылками, а также навигацию с якорями.
2. styles.css с базовыми стилями для оформления шрифтов, цветов и расположения элементов — поддерживается адаптивность.
3. script.js, где реализован скрипт плавной прокрутки по кликам на пункты меню и ссылки на якоря.
В итоге пользователь получает готовую основу сайта, которую можно сразу загрузить на хостинг и использовать или доработать.
Примечание: результат приблизительный, детали могут меняться в зависимости от содержимого и дополнительных запросов.
Итог: зачем использовать этот промт?
Использование этого промта позволит быстро получить полноценную структуру сайта из трех ключевых файлов без необходимости самому писать код с нуля. Это облегчает старт работы над проектом и экономит время, особенно если нужно получить базовый сайт с понятным дизайном и функционалом плавной прокрутки.
Главное преимущество: Быстрая генерация готовой основы сайта с разделами и плавной прокруткой для дальнейшей быстрой доработки.
