← arturr_cityблогтелеграм

промпт для создания сайта в нейросети: шаблоны, правки и ошибки

14 октября 2026 · 9 мин

промпт для создания сайта — это короткое тз из шести частей: для кого сайт, что он продаёт, какие на нём блоки, откуда берутся тексты, какой стиль и какие ограничения. одной волшебной фразы, после которой выходит готовый сайт, нет: первый промпт даёт черновик, а сайт получается в правках. ниже четыре шаблона под копирование, порядок правок после первого результата и формулировки, которыми я доводил этот сайт в claude code.

почему готовые промпты из интернета дают одинаковые сайты

в выдаче по этому запросу в основном списки «скопируй и вставь»: лендинг кафе, интернет-магазин, портфолио. внутри почти всегда одно и то же — шрифт inter, три карточки с иконками, отзывы, футер. модель честно собирает ровно это, и получается сайт, который ты уже видел сотню раз.

в документации anthropic это названо прямо: без указаний модели скатываются к шаблонным решениям, и выходит то, что пользователи называют «ai slop», ии-слоп. причина простая: если в промпте нет ничего твоего, модели не на что опереться, кроме среднего по интернету. поэтому шаблон ниже — это каркас, а работают в нём только твои данные вместо скобок.

второе, чего почти нигде нет, — что делать после первого ответа. а именно там проходит большая часть работы.

из чего состоит промпт для создания сайта

в гайде anthropic есть «золотое правило»: покажи промпт коллеге, который ничего не знает о задаче. если он растеряется, растеряется и модель. для сайта это значит, что в промпте должны быть ответы на шесть вопросов.

  1. кто аудитория. не «все», а конкретно: кто приходит, с какой проблемой, с телефона или с компьютера. от этого зависят тон текста, размер кнопок и то, что стоит на первом экране.
  2. что продаём и какое одно действие нужно. заявка, звонок, покупка, сообщение в телеграм. одна цель на страницу, иначе модель разложит пять кнопок равного веса.
  3. структура. список страниц или блоков по порядку. так ты управляешь логикой, а не получаешь «hero — услуги — отзывы» по умолчанию.
  4. тексты: свои или «напиши». если пишешь сам — вставь их. если просишь модель — дай факты: цены, сроки, адрес, опыт. без фактов она их придумает, и на сайте окажутся выдуманные отзывы и цифры.
  5. стиль и референсы. настроение в двух-трёх словах, конкретный шрифт, три-пять цветов и скриншот или ссылка на то, что нравится.
  6. ограничения. сначала мобильная версия, скорость загрузки, чистый html, css и js без лишних библиотек, куда потом положишь сайт.

к ограничениям полезно добавить причину. в документации anthropic отдельный раздел про контекст: если объяснить, зачем правило, модель лучше понимает цель и сама переносит его на похожие случаи. «без библиотек, потому что сайт будет лежать на простом хостинге и его будет править другой агент» работает лучше, чем просто «без библиотек».

и ещё один совет оттуда же: говори, что делать, а не чего не делать. вместо «не пиши длинно» — «абзац не длиннее трёх строк на телефоне». запрет оставляет модели угадывать, что ты хочешь взамен.

шаблоны: промпт для создания сайта под четыре задачи

это не магические фразы: любой промт для создания сайта в нейросети работает, только если вместо скобок стоят твои данные. шаблоны подходят для claude code, lovable и любого агента, который пишет код. если ещё не выбрал инструмент, сначала прочитай разбор нейросеть для создания сайтов: от этого зависит, где потом будет жить сайт.

лендинг услуги

сделай одностраничный сайт для [услуга] в [город].
кто приходит: [кто клиент, что у него болит]. смотрят в основном с телефона.
цель страницы одна: человек оставляет заявку или пишет в телеграм.

блоки по порядку:
1. первый экран: что делаем и для кого, кнопка «[текст кнопки]»
2. услуги с ценой «от»: [список услуг с ценами]
3. как проходит работа, 4 шага
4. примеры работ: [что есть — фото, ссылки]
5. частые вопросы: [3–5 вопросов, которые реально задают клиенты]
6. форма: имя, телефон, комментарий

тексты напиши сам, но только из фактов выше. цены, сроки, отзывы и цифры не придумывай:
где фактов не хватает, поставь [заглушку] и перечисли все заглушки в конце.
стиль: [2–3 слова о настроении], шрифт [название], цвета [3–5 hex-значений].
ограничения: сначала мобильная версия, чистый html, css и js без библиотек,
у картинок заданы размеры и ленивая загрузка.
если чего-то не хватает, сначала задай мне до 5 вопросов, потом пиши код.

портфолио

сделай сайт-портфолио для [профессия].
его смотрят [заказчики / работодатели] и за минуту решают, звать ли меня.
главное — работы, текста минимум.

страницы:
— главная: имя, одна строка о том, что я делаю, сетка работ
— страница работы: большие фото, задача в двух предложениях, что я сделал, итог
— обо мне и контакты на одной странице

работы: [названия и путь к папке с фото].
фото не обрезай под один размер, сохраняй пропорции.
референс по духу: [ссылка или скриншот]. нравится [что именно: воздух, крупные фото, тихий шрифт].
не копируй его, сделай своё в том же настроении.
шрифт [название], цвета: фон [hex], текст [hex], акцент [hex].
одна заметная анимация на главной, остальное спокойно.

сайт-визитка компании

сделай сайт-визитку компании [название]: [чем занимается] в [город].
задача: человек из поиска или с визитки убеждается, что компания настоящая, и звонит.

страницы: главная, услуги, о компании, контакты.
в шапке каждой страницы телефон, на мобильном он звонит по нажатию.
факты для текстов: [год основания, адрес, часы работы, что делаем, чем отличаемся].
всё, чего нет в этом списке, не выдумывай.
у каждой страницы свой title и description и один h1.
адрес и часы работы — текстом, не картинкой.
стиль строгий, цвета из логотипа: [hex], шрифт [название].
фото только мои из папки [путь], стоковых людей не добавляй.
сайт должен открываться на любом хостинге без сборки.

страница продукта

сделай страницу продукта [название]: [что это в одном предложении].
покупатель: [кто]. сравнивает нас с [аналоги], сомневается в [главное возражение].

блоки по порядку:
1. первый экран: название, обещание в одну строку, цена [цена], кнопка «[действие]»
2. как это работает: 3 шага со скриншотами из папки [путь]
3. что входит: короткий список
4. ответ на возражение «[возражение]»
5. вопросы и ответы: [список]
6. ещё раз цена и кнопка

текст короткий: абзац не длиннее трёх строк на телефоне.
стиль по духу как [референс], но свой: шрифт [название], палитра [hex-значения],
одна яркая деталь на всю страницу.
сначала опиши словами план блоков, шрифт и цвета. код пиши после моего «да».

обрати внимание на последние строки. просьба сначала задать вопросы или показать план — приём из документации lovable и claude code: агент уточняет то, о чём ты не подумал, до того как напишет сотни строк. в lovable для этого советуют режим плана, в claude code можно попросить агента расспросить тебя и записать итог в отдельный файл со спецификацией.

как вести диалог после первого результата

первый ответ — черновик. дальше работает короткий цикл: посмотрел, нашёл одну проблему, написал одну правку. вот порядок, в котором я правлю.

  1. смотрю на телефоне и на компьютере. выписываю всё, что не так, но отправляю не списком, а по одному.
  2. одна правка — одно сообщение. в документации lovable это сказано прямо: одно осмысленное изменение за раз, потом проверка. десять правок в одном сообщении агент выполнит наполовину, и ты не поймёшь, какая что сломала.
  3. скриншот вместо описания. claude code принимает картинки: их можно вставить из буфера или перетащить в окно. в документации есть хороший приём: вставить скриншот, попросить агента снять скриншот своего результата, сравнить и перечислить отличия.
  4. границы правки. «поменяй только шапку, остальное не трогай». у lovable хорошая правка состоит из трёх частей: что сделать, где и что должно остаться нетронутым. у anthropic есть готовая формулировка против самодеятельности: менять только то, о чём попросили явно или без чего задача не решится.
  5. сломалось — сначала причина. «найди, почему съехало, и сначала скажи мне». так агент не переписывает полсайта ради одной кнопки.
  6. две неудачные попытки — новый заход. документация claude code советует: если поправил одно и то же дважды и не вышло, контекст забит неудачными попытками. очисти его командой /clear и начни с промпта получше, в который уже вошло то, что ты понял. остановить агента на ходу можно клавишей Esc, откатить разговор и код — двойным Esc или командой /rewind.
  7. сквозные правила — в файл. то, что действует на весь сайт, не надо повторять в каждом сообщении. в claude code это claude.md, его агент читает в начале каждой сессии. в lovable ключевые слова стиля советуют сохранить в знания проекта.

как я правил этот сайт

arturr_city целиком собран ии в claude code. вот реальные формулировки, которыми я его доводил:

они короткие, потому что каждая — про одно свойство и про весь сайт сразу. агенту не нужно гадать, к какому блоку это относится. исключение — «без ии-слопа»: эта фраза срабатывает лучше, если добавить, что именно убрать, например градиенты и одинаковые карточки с иконками. весь путь сборки по шагам — в статье вайбкодинг сайт: как я собрал этот сайт в claude code.

как задать дизайн, чтобы не вышел шаблонный ии-сайт

отдельная нейросеть для создания дизайна сайта нужна не всегда: агент, который пишет код, держит стиль, если стиль задан словами и картинкой. у anthropic для макетов есть и отдельный инструмент, claude design — холст, где claude рисует и правит дизайн. но и в обычном чате всё решают четыре вещи.

референсы по духу, а не для копии

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

свой шрифт и палитра

в документации anthropic перечислено, что выдаёт ии-сайт: заезженные шрифты вроде inter, roboto, arial и системных, фиолетовые градиенты на белом, предсказуемые раскладки. в навыке frontend-design, который anthropic выложила для claude code, советуют до кода зафиксировать 4–6 цветов с названиями и hex-значениями.

забавно, что мой «эпловский» шрифт как раз системный. противоречия нет: шаблон — это то, что модель выбрала сама по умолчанию. если ты осознанно выбрал шрифт под настроение сайта, это уже решение, а не дефолт.

меньше текста и одна яркая деталь

ии любит писать много и ставить анимацию на каждый блок. в том же навыке есть хороший принцип: одна запоминающаяся вещь на странице, всё вокруг спокойно. а появление каждого раздела со сдвигом снизу там прямо названо признаком ии-сайта. проси короче: абзац в три строки на телефоне, заголовок в одну.

реальные фото

стоковые улыбающиеся люди и сгенерированные лица выдают шаблон быстрее любого шрифта. свои фото, даже снятые на телефон, делают сайт настоящим. ии лучше отдать то, что у него получается хорошо: фоны, орнаменты, обработку, вырезку.

типовые ошибки в промптах для сайта

у google в гайде по промптам есть ещё один полезный совет: если ответ не тот, переформулируй или поменяй порядок частей в промпте. иногда модель лучше слышит ту же мысль, сказанную по-другому.

вопросы

в какой нейросети писать промпт для сайта?

в той, которая пишет код и показывает результат: claude code, lovable, другие агенты. шаблоны выше работают в любой из них. как устроен lovable и как собрать в нём первый сайт, разобрано в обзоре lovable.

какой длины должен быть первый промпт?

такой, чтобы коллега без контекста понял задачу, — это правило из документации anthropic. обычно это один экран: шесть частей из списка выше. всё остальное лучше добавлять правками, когда видишь результат.

нужно ли писать «ты опытный веб-дизайнер»?

по документации anthropic роль фокусирует поведение модели, и даже одно предложение заметно. но аудитория, цель и факты о бизнесе дают больше, чем роль. если выбирать, на что потратить строку, — на факты.

что делать, если ии ломает то, что уже работало?

в каждой правке пиши, что трогать нельзя. держи проект в git, а в claude code откатывайся через /rewind. если одна и та же правка не выходит дважды — /clear и новый промпт с учётом того, что уже понял.

можно ли показать нейросети картинку вместо описания?

да, и это быстрее слов. в claude code скриншот вставляется из буфера или перетаскивается в окно. в документации lovable описано, как добавить картинку по ссылке и как указать на конкретный элемент прямо в превью, а потом описать правку.

промпт собирает сайт, но не приводит на него людей. мой seo-набор для claude code находит спрос в вордстате, пишет статьи под реальные запросы и чинит сайт. стоит 499 ₽, или 2 кофе.

посмотреть seo-набор

источники

читать дальше