Сайт дизайнера интерьеров без кода: сборка портфолио

Чтобы сделать сайт дизайнера интерьеров без кода, опишите в промпте состав услуг, этапы работы, стоимость за квадратный метр и структуру портфолио, а ИИ-билдер соберёт страницы сам. В Zugo одностраничный сайт стоит 6 кредитов и собирается примерно за минуту. Заявки уходят на почту через Resend, свой домен подключается сразу.

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

Почему дизайнеру мало ленты в соцсети?

Лента показывает картинки, но не отвечает на коммерческие вопросы. Сколько стоит, что входит в проект, сколько времени займёт, кто занимается закупкой и авторским надзором. Человек, готовый потратить существенную сумму, ищет эти ответы, и в ленте их нет.

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

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

И четвёртая: клиент почти всегда приходит по рекомендации и первым делом гуглит имя. Собственный сайт в этот момент работает как подтверждение, что вы существуете как практика, а не как хобби.

Что написать в промпте?

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

Сделай сайт дизайнера интерьеров [имя], город [город],
опыт [лет], [количество] реализованных проектов.
Услуги: [дизайн-проект под ключ, планировочное решение,
подбор мебели и отделки, авторский надзор, консультация].
Цены: дизайн-проект от [сумма] за квадратный метр,
консультация [сумма] за час, авторский надзор [сумма] в месяц.
Этапы: [замер и техзадание], [планировка], [визуализации],
[рабочая документация], [комплектация], [надзор].
Сроки: проект квартиры [недели], дом [недели].
Портфолио: проекты с полями площадь, стиль, срок, бюджет отделки,
слоты под фото до и после и под планировку.
Блоки: первый экран с одним крупным проектом и кнопкой заявки,
портфолио сеткой, услуги с ценами, этапы работы,
обо мне, отзывы, вопросы и ответы, контакты.
Главное действие: «Обсудить проект» открывает форму
с полями: площадь, город, срок, бюджет, контакт.
Валюта: доллары. Тон: сдержанный, профессиональный, без эпитетов.

Поле «бюджет» в форме заявки экономит вам недели. Оно отсеивает запросы, где ожидания и деньги не сходятся, ещё до первого разговора, и делает это вежливее, чем вы сможете сделать голосом.

Как устроить портфолио?

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

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

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

Общая логика страницы эксперта разобрана в материале сайт-портфолио нейросетью, там же про то, как не превратить блок «обо мне» в биографию.

Как принимать заявки и вести проекты?

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

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

Stripe закрывает предоплату за консультацию и первый транш за проект настоящим чекаутом. Для дизайнера это удобнее переписки про реквизиты и заметно ускоряет старт работы.

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

Сколько это стоит в кредитах?

Free даёт 5 кредитов, чего не хватает на один полный сайт: это разведка. Pro стоит $25 в месяц и даёт 200 кредитов, Business стоит $99 в месяц.

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

Как поддерживать сайт, когда появляются новые проекты?

Добавление проекта это одна правка за 3 кредита: «добавь в портфолио проект „квартира 78 метров, скандинавский стиль, срок четыре месяца" с тремя фотографиями и планировкой». Раз в квартал этого достаточно, чтобы сайт не выглядел заброшенным.

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

Если начинать с нуля не хочется, в Zugo есть 25 шаблонов, из них 5 игровых, и довести готовую структуру под своё портфолио обычно быстрее, чем описывать её с чистого листа.

Как готовить фотографии проектов для сайта?

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

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

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

Четвёртое: пары «было и стало» ставьте одинаковой точкой съёмки. Сравнение работает только тогда, когда видно тот же угол комнаты. Разные ракурсы превращают самый сильный аргумент дизайнера в две несвязанные картинки.

Если снимков профессиональной съёмки пока нет, лучше показать четыре проекта с хорошими кадрами, чем десять с телефонными.

Чего ИИ-билдер для дизайнера не сделает?

• Не заменит фотографии. Сайт дизайнера продают снимки интерьеров, и никакая генерация не заменит съёмку ваших реальных объектов.
• Не сделает 3D-тур. Панорамы, виртуальные обходы и встроенные модели это отдельный стек, а не блок на странице.
• Не станет системой ведения проекта. Сметы, ведомости, графики поставок и согласования это учётная работа. Часть можно собрать правками, но полноценная система проектного управления это другая задача.
• Не решит за вас позиционирование. Билдер оформит то, что вы написали. Если непонятно, для кого вы работаете, красивая страница это не исправит.

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

С чего начать?

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

Если вы работаете в паре с мебельным салоном или делаете комплектацию, посмотрите соседний сценарий в статье про сайт мебельного магазина. Свою версию описывайте на zugo.dev теми же словами, которыми объясняете услугу на первой встрече с заказчиком.