AGINE Guides

Сайт без дизайнера · Claude

Дорогой сайт. Чужой дизайн.
Ноль рублей.

Дизайнеры берут деньги за насмотренность: они знают, как должен выглядеть дорогой сайт. Но готовых дорогих дизайнов в открытом доступе тысячи, и они бесплатные. Этот гайд показывает простой путь: находишь понравившийся дизайн на 21st.dev или 3D-сцену на Spline, отдаёшь Claude один промт, и он адаптирует всё под твой бизнес.

0 ₽

за дизайн

20 мин

до первого экрана

2

источника дизайна

1

промт Claude

Идея целиком

За что на самом деле платят дизайнеру.

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

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

① Два источника дизайна

Разные инструменты для разных задач.

21st.dev

Готовые секции и блоки

Библиотека UI-компонентов: hero, цены, отзывы, фичи, формы, футеры. У каждого блока есть кнопка «Copy prompt» — она отдаёт готовый промт, который понимает Claude. Поиск бесплатный. Отсюда берётся каркас и стиль страницы.

бесплатно искать

Spline.design

3D-элементы и вау-эффект

Это не галерея лендингов, а 3D-редактор с большим Community готовых сцен и объектов. Берёте отсюда то, что делает сайт «дорогим»: 3D-объект в hero, анимированную абстракцию, интерактивную сцену. Сцену можно встроить в сайт по ссылке или экспортом в код.

бесплатно для старта

Что не путать

21st.dev даёт плоские UI-секции под любой бизнес: магазин, лендинг, услуги. Spline даёт 3D-вау-элемент, который ставится поверх. Целый сайт интернет-магазина целиком на Spline вы не найдёте: это редактор 3D, а не галерея готовых страниц. Связка простая: каркас с 21st.dev плюс один 3D-акцент со Spline.

② Как выбрать дизайн

Три минуты до промта.

1

Зайдите на 21st.dev и найдите тип блока

Откройте 21st.dev и через поиск или категории найдите нужный блок: hero, pricing, features, testimonials, footer, contact form. Смотрите глазами, листайте, пока что-то не зацепит.

2

Нажмите «Copy prompt»

У понравившегося компонента есть кнопка Copy prompt. Она копирует готовое описание этого дизайна в формате, который понимает Claude. Это и есть «чужой дизайн», упакованный в текст. Сохраните его, скоро вставите в промт.

3

(Опционально) подберите 3D со Spline

Если хотите дорогой hero: на spline.design в разделе Community найдите сцену, нажмите Export и возьмите либо публичную ссылку на сцену, либо код для встройки. Эту ссылку тоже дадите Claude. Хватит одного 3D-объекта.

Совет по выбору

Не собирайте сайт из 10 разных дизайнов: получится мешанина. Выберите один блок, чей стиль нравится больше всего, и попросите Claude держать все остальные секции в этом же стиле. Единый стиль читается как «дорого», разнобой как «сделал сам».

③ Промт Claude

Главный шаг. Сначала вопросы, потом код.

Открываете Claude (в чате или в Claude Code в папке проекта) и вставляете промт ниже. Ключевая идея: Claude не бросается писать код сразу. Сначала он задаёт вопросы про ваш бизнес, потом показывает архитектуру, и только потом собирает. Так дизайн адаптируется под вас, а не остаётся демо-шаблоном с чужими текстами.

промт — скопируйте и вставьте в Claude
Я делаю сайт для своего бизнеса и нашёл готовый дизайн, который мне нравится. Вот он:

[ВСТАВЬ СЮДА то, что скопировал кнопкой «Copy prompt» с 21st.dev. Если есть 3D со Spline — добавь ссылку на сцену.]

Прежде чем писать код, выполни 3 шага строго по порядку.

ШАГ 1. ЗАДАЙ МНЕ ВОПРОСЫ.
Не начинай, пока не поймёшь мой бизнес. Спроси по одному блоку, дождись ответов:
- ниша и что я продаю (продукт или услуга);
- кто мой клиент и какую его проблему я решаю;
- главный оффер и цена;
- какое ОДНО действие должен сделать посетитель (позвонить, оставить заявку, купить, записаться);
- что у меня уже есть из контента: тексты, фото, логотип, фирменные цвета;
- тон бренда (премиум, дружелюбный, строгий, дерзкий).

ШАГ 2. ПОКАЖИ АРХИТЕКТУРУ.
На основе моих ответов предложи план:
- какие страницы и секции нужны и в каком порядке;
- куда хорошо ложится взятый дизайн, а что под мою задачу надо переделать;
- стек по умолчанию: Next.js + Tailwind, статическая страница без бэкенда (если бэкенд реально не нужен).
Покажи план списком и спроси, ок ли, прежде чем писать код.

ШАГ 3. АДАПТИРУЙ, НЕ КОПИРУЙ.
Когда план утвердим, собери сайт:
- взятый дизайн используй как основу стиля, но замени все демо-тексты на реальные под мой бизнес;
- убери лишние секции, добавь недостающие (форма заявки, контакты, оффер);
- подгони цвета и шрифты под мой бренд;
- сделай адаптив под телефон;
- для фото поставь явные заглушки и подпиши, что туда загрузить.

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

Почему «сначала вопросы» так важно

Если просто сказать «сделай мне сайт по этому дизайну», Claude оставит демо-тексты вроде «Your Company» и «Lorem ipsum», а структуру под чужую задачу. Получится красиво, но не про вас. Вопросы в начале превращают шаблон в ваш сайт: с вашим оффером, вашей ценой и одним понятным действием для клиента.

Что Claude спросит и сделает

  1. Задаст блок вопросов про нишу, клиента, оффер и цель сайта
  2. Предложит структуру секций и спросит подтверждение
  3. Соберёт страницу на взятом дизайне с вашими текстами
  4. Встроит 3D со Spline в hero, если вы его дали
  5. Сделает адаптив и запустит локально, покажет ссылку

Антипаттерны

Где ломается результат.

Просить сайт без ответов на вопросы

Если пропустить шаг с вопросами, Claude соберёт красивый, но пустой шаблон с демо-текстами. Дайте ему ответить на вопросы про бизнес, это 5 минут, которые меняют всё.

Смешивать 10 разных дизайнов

Hero из одного стиля, цены из другого, отзывы из третьего — получается визуальный хаос. Возьмите один стиль и держите в нём всю страницу.

Ждать от Spline целый лендинг

Spline — это 3D-объекты и сцены, а не готовые страницы магазинов. Берите оттуда один акцент в hero, а каркас сайта стройте на секциях 21st.dev.

Перегружать страницу 3D

Три тяжёлые 3D-сцены = сайт грузится 10 секунд и тормозит на телефоне. Один аккуратный 3D-элемент выглядит дорого. Десять выглядят сломано.

Не указать одно целевое действие

Если у сайта нет понятной цели (заявка, звонок, покупка), он красивый, но бесполезный. Скажите Claude, что должен сделать посетитель, и он выстроит страницу вокруг этого.