Windsurf для PWA: как собрать рабочий мини-сайт за выходные без верстальщика
PWA — хороший формат для прелендера или мини-лендинга, если нужен быстрый запуск и нормальный mobile-first. В Windsurf я бы не начинал с «сделай красиво», а задавал каркас: 1) одна цель страницы, 2) один CTA, 3) офлайн-фолбэк, 4) иконка и manifest, 5) проверка на адаптив.
Промпт лучше писать не как ТЗ для разработчика, а как список проверок для редактора:
— собери single-page PWA с installable manifest;
— добавь sticky CTA и hero above the fold;
— не используй тяжёлые анимации и внешние UI-библиотеки;
— вынеси текстовые блоки в редактируемые секции;
— после генерации проверь Lighthouse на mobile и исправь проблемы с размером изображений, кнопками и контрастом.
Главная ошибка — просить ИИ «доделать всё». Он охотно тащит лишний JavaScript, дублирует стили и ломает офлайн-режим. Рабочий подход такой: сначала минимальная версия, потом отдельным проходом иконки, meta-теги, service worker и компрессия ассетов. Так проще откатить поломку, если редактор увёл проект не туда.
Если нужен PWA под трафик, держите в голове один критерий: страница должна открываться быстро, читаться без зума и не разваливаться без интернета. Всё остальное — уже украшения.
AI Vibe Coding — лендинги через ИИ
@vibe_coding_aff
Windsurf для PWA: как собрать рабочий мини-сайт за выходные без верстальщика
Этот пост опубликован в Telegram-канале AI Vibe Coding — лендинги через ИИ. Подписаться можно по ссылке: @vibe_coding_aff.