Шаблон QuoteKit: лендинг сервиса коммерческих предложений

QuoteKit это готовый шаблон из галереи Zugo: лендинг сервиса для коммерческих предложений плюс кабинет за кнопкой входа. На витрине есть пример готового предложения, блок возможностей, порядок работы в три шага, тарифы и призыв, а в кабинете список предложений со статусами. Клон бесплатный, правка стоит 3 кредита.

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

Что внутри шаблона QuoteKit?

Шаблон закрывает связку, которую SaaS-продукты собирают чаще всего: продающая страница и демонстрация внутреннего экрана. Обе части живут в одном проекте и правятся одинаково, текстом в чате.

Пример предложения на первом экране это сильный ход. Вместо абстрактного описания посетитель сразу видит документ с названием проекта, и понимание продукта наступает за секунду. Такую деталь с чистого промпта заказывают редко, а она делает половину работы.

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

Что здесь работает, а что нарисовано?

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

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

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

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

Кому подходит QuoteKit?

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

Подходит для проверки идеи до разработки. Собрать витрину, показать интерфейс, повесить форму на ранний доступ и посмотреть, сколько людей оставит почту, дешевле, чем писать продукт вслепую.

Не подходит, если вы не делаете сервис, а сами отправляете предложения клиентам. Тогда вам нужна не витрина сервиса, а рабочий инструмент, и логичнее начинать с шаблона приложения, а не с лендинга.

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

Взять шаблон или собрать лендинг с нуля?

Арифметика такая. Сборка по описанию стоит 6 кредитов и даёт страницу ровно по вашему тексту, вместе со всем, что вы забыли упомянуть. Клон бесплатный, и вы платите только за отличия от каркаса, который уже видели работающим.

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

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

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

Как переделать шаблон под свой продукт?

Сначала смысл, потом оформление. Каждая правка стоит 3 кредита, и переделывать один блок дважды невыгодно.

1. Замените название и обещание. Одна правка меняет имя продукта по всей странице и переписывает первый экран.
2. Подставьте свой пример. Документ на первом экране должен выглядеть как ваш реальный результат, а не как чужой.
3. Перепишите три шага. Порядок работы должен совпадать с тем, как продукт используют на самом деле.
4. Поставьте настоящие цены. Демонстрационные тарифы на опубликованной странице это обещание, которое вы не давали.
5. Настройте форму. Заявка должна куда-то приходить: письма отправляет коннектор Resend.
6. Опубликуйте. Проект живёт на адресе вида имя.zugo.run, свой домен подключается поверх на платных тарифах.

Второй шаг чаще всего пропускают, и зря. Именно пример документа отвечает на вопрос «а что я получу», и подмена его на свой стоит одной правки, а убеждает сильнее, чем переписанные заголовки.

Сколько стоит довести шаблон до публикации?

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

Тарифы Zugo: Free даёт 5 кредитов, Pro стоит $25 в месяц и включает 200 кредитов, Business стоит $99 в месяц. Каждая сборка перед выдачей запускается в песочнице, и вариант, который не открылся, вам не отдаётся.

Страница цен заслуживает отдельной работы, а не одной строки в общем запросе. Что на ней должно быть и в каком порядке, разобрано в статье страница тарифов для SaaS нейросетью.

Какие правки просят чаще всего?

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

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

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

И почти всегда всплывает поведение на телефоне. Список документов с фильтрами на узком экране ведёт себя иначе, чем на ноутбуке, и об этом стоит попросить прямо: «на мобильном показывай фильтры в одну строку с прокруткой, а карточки в один столбец».

Где границы шаблона?

Документооборота внутри нет. Шаблон показывает интерфейс работы с предложениями, но не создаёт, не хранит и не подписывает документы. Это отдельная система, и её нельзя изобразить правкой вёрстки.

Подпись и оплата это внешние сервисы. Электронная подпись требует стороннего решения, оплата подключается коннектором Stripe. Ни то, ни другое не появляется из одного промпта.

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

Первый шаг простой: откройте галерею на zugo.dev, клонируйте QuoteKit и подставьте на первый экран пример своего документа вместо демонстрационного. Дальше сразу станет видно, ваш это каркас или нет.