Шаблон Northbound: сайт студии с клиентским порталом

Northbound это готовый шаблон сайта брендинг-студии из галереи Zugo. Публичная часть состоит из услуг, кейсов, описания процесса и блока связи, а за отдельным входом лежит клиентский портал с задачами, перепиской и счетами. Клон в проект бесплатный, кредиты не списываются, дальше правки идут по 300 кредитов.

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

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

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

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

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

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

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

Что умеет клиентский портал?

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

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

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

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

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

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

Особенно полезен шаблон тем, кто устал вести проекты в мессенджере. Даже витрина портала помогает продать идею клиенту: вы показываете, как будет выглядеть совместная работа, ещё до старта проекта.

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

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

Отдельная развилка: у вас агентство, но кейсов пока нет. Тогда сначала соберите витрину без раздела кейсов, а портал добавьте позже. Пустая сетка проектов вредит сильнее, чем её отсутствие. Более общий разбор сайта агентства есть в статье сайт агентства нейросетью.

Чем клон шаблона отличается от сборки с нуля?

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

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

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

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

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

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

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

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

Сколько стоит довести шаблон до боевого сайта?

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

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

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

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

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

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

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

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

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

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

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

Многостраничность считается отдельно. Если студии нужны настоящие отдельные страницы под каждую услугу, это уже платформа: 1 200 кредитов за первые три страницы и по 300 за каждую следующую. Чем такой формат отличается от одностраничника и когда он действительно нужен, разобрано в статье может ли ИИ сделать многостраничный сайт.

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

Начните с малого: откройте галерею на zugo.dev, клонируйте Northbound и перепишите блок процесса под то, как вы работаете на самом деле. Это самая быстрая проверка, ваш это каркас или нет.