Если коротко: вы описываете страницу словами — «визитка мастера маникюра, три раздела, тёплые бежевые тона, кнопка «Записаться» ведёт в телеграм» — и получаете в ответ не совет и не макет, а работающий сайт, открытый прямо в переписке. Его видно в сообщении, по нему можно кликать. Дальше вы правите его репликами: «кнопку крупнее», «убери второй блок», «шапку темнее». Никакого кода руками.
Здесь Profile — мы делаем Schai GPT и рассказываем про него по коду, а не по обещаниям. Поэтому ниже будет и то, как это устроено внутри, и то, чего такая страница принципиально не умеет: второе важнее первого, если вы собираетесь на этом что-то построить.
Что происходит после фразы «сделай лендинг про…»
Отдельной кнопки «собрать сайт» в интерфейсе нет, и это осознанно. Умение живёт в общем реестре инструментов ассистента рядом с поиском, календарём и генерацией картинок, и ИИ берёт его сам, когда в разговоре звучит «сделай сайт», «нужен лендинг», «свёрстай страницу про…», «оформи промо-страницу». Для вас это обычная реплика в чате, а не вход в отдельный редактор.
Дальше ваше описание уходит модели — той самой, что выбрана в селекторе чата. Отдельной «модели для сайтов» нет: работает тот же движок, что отвечает вам в разговоре. И возвращает он не куски и не объяснения, а один самодостаточный HTML-документ целиком: CSS лежит в `<style>` в шапке, скрипты — если они вообще нужны — в `<script>` перед закрытием `<body>`. Один файл, никаких «папки с проектом».
Самое жёсткое условие в задании модели — никаких обращений наружу. Запрещены внешние таблицы стилей, подключение шрифтов с чужих доменов, внешние скрипты и картинки по ссылке: страница должна открыться полностью офлайн, без единого сетевого запроса. Вместо фотографий — CSS-градиенты, сплошные цвета, простые встроенные SVG-иконки и эмодзи. И поверх этого стоит подстраховка на сервере: если модель всё-таки протащит в код внешний импорт шрифтов, он вырезается из документа перед показом. Это не теория — так однажды и случилось на проверке, после чего фильтр и появился.
Ещё одно требование прописано в задании прямым текстом: обязательный тег `<meta name="viewport" content="width=device-width, initial-scale=1">` и адаптивная вёрстка под телефон и десктоп. Это не косметика. Без этого тега мобильный браузер рисует страницу в виртуальном окне шириной около 980 пикселей, а потом сжимает результат под экран, и медиазапросы под узкие экраны просто не срабатывают — сайт выглядит как уменьшенная десктопная копия.
Как страница попадает в переписку и сколько там живёт
Превью в чате — не картинка и не скриншот. Готовый HTML кладётся в атрибут `srcdoc` встроенного фрейма, то есть браузер рисует настоящую страницу внутри сообщения: работают ссылки, ховеры, анимации, скрипты. Фрейм при этом запущен в песочнице. Атрибут `sandbox` по умолчанию запрещает всё и снимает ограничения по одному ключевому слову, и мы разрешаем ровно три вещи: скрипты, всплывающие окна и отправку форм. Сгенерированная страница не может залезть в ваш чат и не может утащить вашу сессию.
Под превью две кнопки. «Открыть в новой вкладке» собирает из того же HTML объект в памяти браузера и открывает его отдельной вкладкой; ссылка на этот объект отзывается через минуту — иначе браузер держал бы данные занятыми до перезагрузки страницы. «Скачать HTML» ведёт на наш маршрут выдачи файлов, который отдаёт документ с правильным типом содержимого и корректным русским именем файла.
Сам файл к этому моменту уже лежит в хранилище: путь вида `docs/<время истечения>_<идентификатор>.html`, запись в реестре временных объектов, срок жизни — 24 часа. Ссылка на скачивание подписана и протухает ровно через те же сутки, а отдельная фоновая задача регулярно вычищает из хранилища всё просроченное. Модель хранения простая и честная: сутки на то, чтобы забрать файл.
Отдельная деталь, про которую стоит знать заранее. Сама вёрстка сохраняется вместе с сообщением в истории чата в этом браузере. На сервер, в синхронизируемую между устройствами историю, уезжает только текст переписки. Откроете тот же чат на телефоне — увидите ответ ассистента, но живого превью там не будет. Ещё одна причина скачать файл, если страница вам действительно нужна.
Почему правка репликой не пересобирает страницу заново
Создание и правка — два разных инструмента, и разница между ними принципиальнее, чем кажется. Правка берёт последний созданный в этом разговоре сайт, целиком отдаёт модели его текущий HTML и просит внести именно названное изменение, а всё остальное оставить как было. Формулировка в задании буквально такая: не переписывай сайт с нуля и не меняй то, о чём не просили.
Понять, зачем так, проще от обратного. Представьте, что каждая правка — это новая генерация по исходному описанию. Вы просите «кнопку крупнее» и получаете другой заголовок, другую палитру, другой порядок разделов — вообще другой сайт, у которого просто крупная кнопка. После третьей реплики от вашей страницы не осталось бы ничего. Правка поверх существующей вёрстки делает разговор накопительным: каждая реплика добавляется к результату, а не обнуляет его. Именно поэтому «доводить напильником» тут работает, а не превращается в лотерею.
Есть и защита от путаницы в обратную сторону. Инструмент правки работает, только если сайт в этой беседе уже создавался. Если вы начали новый чат и сразу просите «поменяй кнопку на синюю», ассистент так и скажет: в этом разговоре сайта ещё не было, давайте сначала соберём страницу. Он не станет молча выдумывать, что именно вы правите.
Если правка ушла не туда
Модель на каждой правке возвращает весь документ заново, поэтому изредка вместе с нужным изменением уезжает что-то соседнее. Тут помогают три вещи.
Первое: каждая версия остаётся в переписке отдельным сообщением — со своим превью и своей ссылкой на скачивание. Предыдущий вариант никуда не делся, он просто выше по чату.
Второе: команды «откатить» нет. Базой для следующей правки всегда служит последняя версия, так что испорченное чинят следующей репликой: «верни прежний цвет заголовка», «сделай отступы как были».
Третье: правки лучше давать по одной. «Сделай кнопку крупнее, поменяй шрифт, добавь отзывы и убери футер» — это четыре независимых изменения за один проход, и шанс, что все четыре лягут точно, заметно ниже, чем у четырёх коротких реплик подряд.
Как описать сайт, чтобы он получился с первого раза
Главный принцип: модель не угадывает то, чего вы не сказали, — она это придумывает. Каждая неназванная деталь превращается в решение, принятое за вас: нейтральный заголовок, средне-синяя палитра, кнопка «Узнать больше», которая ведёт в никуда. Хорошее описание — это не длинное описание, а описание, в котором закрыты решения.
Что стоит назвать
Назначение и для кого → «визитка частного мастера», «страница одного мероприятия», «памятка для новых сотрудников»
Разделы по порядку → буквально списком: приветствие, услуги с ценами, отзывы, контакты
Обязательный текст → имена, цены, даты, адреса, слоган — всё, что нельзя сочинять; если текст у вас уже есть, вставьте его целиком
Куда ведут кнопки → кнопка на странице — это ссылка, и адрес нужно дать: телеграм, телефон, почта
Тон → «спокойно, без восклицательных знаков», «дерзко и коротко», «строго, как инструкция»
Цвета и настроение → «бежевый и тёмно-коричневый», «тёмный фон, крупная типографика»
Название страницы → оно попадёт и в заголовок вкладки, и в имя файла
И сразу оговорка, чтобы не потерять время: форму с отправкой заявки на почту заказывать бессмысленно. У страницы нет сервера, которому эту заявку отправлять, а внешние скрипты из кода вырезаются. Кнопка-ссылка работает, форма-отправка — нет.
Четыре формулировки, которые работают
Визитка мастера. «Сделай одностраничный сайт-визитку для мастера маникюра. Разделы по порядку: приветствие с именем «Алина Т.» и фразой «Маникюр, который держится четыре недели»; услуги с ценами — маникюр 2500, педикюр 3000, покрытие 1500; три коротких отзыва; контакты. Кнопка «Записаться» ведёт на мой телеграм t.me/пример. Тон спокойный, без восклицаний, цвета бежевый и тёмно-коричневый.»
Страница мероприятия. «Промо-страница концерта: название «Ночной разбор», 14 ноября, клуб «Причал», начало в 20:00, вход 1200 рублей. Сверху крупная дата, ниже описание в три предложения, ниже состав участников — четыре имени, внизу как добраться. Кнопка «Билеты» ведёт на ссылку, которую я дам следующей репликой. Тёмный фон, крупная типографика, без картинок.»
Лендинг курса. «Одностраничник для курса по монтажу для начинающих. Блоки: заголовок с обещанием результата, для кого это, программа из шести уроков списком, цена 9900 и рассрочка, частые вопросы — пять штук, кнопка «Записаться» ведёт в телеграм. Тон честный, без «успей», «только сегодня» и прочего давления.»
Внутренняя страница. «Свёрстай страницу-памятку для новых сотрудников кофейни: что взять в первый день, график смен таблицей, шесть правил зала списком, контакты управляющего. Никаких продающих формулировок, оформление как у служебной инструкции, светлый фон, крупный шрифт — её будут открывать с телефона.»
Общее у всех четырёх — там ни разу не сказано «сделай красиво». Зато сказано, что за чем идёт, какие цифры настоящие и куда ведёт кнопка. Такое описание модель превращает в страницу почти без потерь; «сделай мне лендинг, ну ты понял» — нет.
Честные границы: это не хостинг и не конструктор
У получившейся страницы нет адреса в интернете. Есть превью в чате, вкладка, открытая из памяти вашего браузера, и ссылка на скачивание, живущая сутки. Эта ссылка — способ забрать файл, а не адрес сайта: тот, кому вы её перешлёте, скачает HTML-документ, а не откроет страницу в браузере. Чтобы получился настоящий сайт, файл нужно разместить самому — на любом хостинге, со своим доменом. К этому он вполне готов: документ самодостаточный, без внешних зависимостей, открывается двойным кликом и одинаково работает без интернета.
Чего страница не умеет по устройству инструмента: принимать заявки и регистрации — некому их обрабатывать; считать посетителей — счётчик аналитики это внешний скрипт, а внешние скрипты вырезаются; показывать ваши фотографии — вместо них градиенты, SVG и эмодзи, свои снимки вы подставите сами после скачивания; быть больше одной страницы — второй страницы просто нет. Размер тоже ограничен: до 60 000 знаков HTML, а модели задан ориентир примерно в полторы тысячи строк. Это осознанный потолок: одна страница, а не приложение.
Про шрифты стоит сказать отдельно, потому что это чаще всего удивляет. Своих шрифтов у страницы нет — только системные стеки вроде `"Segoe UI", Arial, sans-serif`. Так и должно быть при запрете на внешние домены, и это не костыль: MDN прямо рекомендует всегда заканчивать список шрифтов обобщённым именем, потому что гарантий наличия конкретного шрифта на устройстве не существует. Красивый фирменный шрифт вы подключите сами — после того, как скачаете файл.
Когда это не тот инструмент
Одностраничник — только один из нескольких ответов на «сделай мне…», и ассистент разводит их по описаниям инструментов. Если нужен бот, скрипт-автоматизация или небольшой сервис из нескольких файлов, работает другое умение: оно отдаёт проект архивом, с кодом каждого файла прямо в чате и инструкцией по запуску. Туда же уходит и «многостраничный сайт с базой данных и личным кабинетом» — это уже проект, а не быстрая страница.
Если же результат нужен не в браузере, а файлом — договор, смета, отчёт, таблица, которую отправят почтой, — это вообще другая ветка: Word, Excel или PDF. Признак простой: вы собираетесь это открыть или показать? Открыть в браузере — страница. Отправить, распечатать, положить в папку — документ.
И третья развилка — когда сайт нужен по-настоящему: с доменом, почтой на домене, формой заявок, аналитикой и поддержкой. Тогда страница из чата остаётся полезной как прототип: на ней удобно показать подрядчику структуру и тон, вместо того чтобы объяснять словами. Но саму работу она не заменяет, и цену вопроса лучше знать заранее.
Как это выглядит в разговоре целиком
Сделай одностраничный сайт для гончарной мастерской: приветствие, три курса с ценами, галерея из шести карточек, контакты. Кнопка «Записаться» ведёт на t.me/пример. Тёплые землистые цвета, спокойный тон.
В ответ приходит короткая реплика ассистента — «Готово, собрал сайт» — и под ней открытая страница, по которой можно скроллить и кликать прямо в сообщении. Плюс кнопки «Открыть в новой вкладке» и «Скачать HTML».
Кнопку «Записаться» сделай крупнее и перекрась в терракотовый.
Приходит та же самая страница: те же тексты, та же галерея, тот же порядок блоков — изменилась кнопка. Предыдущая версия при этом осталась выше в переписке, со своим превью и своей ссылкой.
Добавь внизу раздел с тремя отзывами и убери телефон из контактов, оставь только телеграм.
И снова та же страница, теперь с отзывами и без телефона. Весь разговор — три реплики и ноль строк кода. Дальше файл скачивается и, если нужно, уезжает на хостинг.
Коротко
Описали словами — получили работающую страницу с живым превью прямо в переписке; кода не требуется.
Всё лежит в одном HTML-файле без внешних зависимостей: открывается офлайн, шрифты системные, вместо фото — градиенты и SVG.
Правки вносятся репликами, и каждая правка меняет существующую вёрстку, а не пересобирает страницу заново, — иначе разговор не накапливался бы.
Версии остаются в чате отдельными сообщениями; отката нет, поэтому неудачную правку чинят следующей репликой, а изменения дают по одному.
Файл и ссылка на него живут 24 часа, превью хранится только в этом браузере — если страница нужна, её скачивают.
Это не хостинг: домена, форм с отправкой и аналитики здесь нет. Для бота или многостраничного сайта — проект архивом, для договора или отчёта — документ.
Пока нет комментариев