Сайт без дизайнера · 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, анимированную абстракцию, интерактивную сцену. Сцену можно встроить в сайт по ссылке или экспортом в код.
бесплатно для старта
Каркас страницы: секции, блоки, формы. Кнопка «Copy prompt» под каждым.
spline.design3D-сцены и объекты для hero. Берите 1 эффект, не перегружайте страницу.
Что не путать
21st.dev даёт плоские UI-секции под любой бизнес: магазин, лендинг, услуги. Spline даёт 3D-вау-элемент, который ставится поверх. Целый сайт интернет-магазина целиком на Spline вы не найдёте: это редактор 3D, а не галерея готовых страниц. Связка простая: каркас с 21st.dev плюс один 3D-акцент со Spline.
② Как выбрать дизайн
Три минуты до промта.
Зайдите на 21st.dev и найдите тип блока
Откройте 21st.dev и через поиск или категории найдите нужный блок: hero, pricing, features, testimonials, footer, contact form. Смотрите глазами, листайте, пока что-то не зацепит.
Нажмите «Copy prompt»
У понравившегося компонента есть кнопка Copy prompt. Она копирует готовое описание этого дизайна в формате, который понимает Claude. Это и есть «чужой дизайн», упакованный в текст. Сохраните его, скоро вставите в промт.
(Опционально) подберите 3D со Spline
Если хотите дорогой hero: на spline.design в разделе Community найдите сцену, нажмите Export и возьмите либо публичную ссылку на сцену, либо код для встройки. Эту ссылку тоже дадите Claude. Хватит одного 3D-объекта.
Совет по выбору
Не собирайте сайт из 10 разных дизайнов: получится мешанина. Выберите один блок, чей стиль нравится больше всего, и попросите Claude держать все остальные секции в этом же стиле. Единый стиль читается как «дорого», разнобой как «сделал сам».
③ Промт Claude
Главный шаг. Сначала вопросы, потом код.
Открываете Claude (в чате или в Claude Code в папке проекта) и вставляете промт ниже. Ключевая идея: Claude не бросается писать код сразу. Сначала он задаёт вопросы про ваш бизнес, потом показывает архитектуру, и только потом собирает. Так дизайн адаптируется под вас, а не остаётся демо-шаблоном с чужими текстами.
Я делаю сайт для своего бизнеса и нашёл готовый дизайн, который мне нравится. Вот он: [ВСТАВЬ СЮДА то, что скопировал кнопкой «Copy prompt» с 21st.dev. Если есть 3D со Spline — добавь ссылку на сцену.] Прежде чем писать код, выполни 3 шага строго по порядку. ШАГ 1. ЗАДАЙ МНЕ ВОПРОСЫ. Не начинай, пока не поймёшь мой бизнес. Спроси по одному блоку, дождись ответов: - ниша и что я продаю (продукт или услуга); - кто мой клиент и какую его проблему я решаю; - главный оффер и цена; - какое ОДНО действие должен сделать посетитель (позвонить, оставить заявку, купить, записаться); - что у меня уже есть из контента: тексты, фото, логотип, фирменные цвета; - тон бренда (премиум, дружелюбный, строгий, дерзкий). ШАГ 2. ПОКАЖИ АРХИТЕКТУРУ. На основе моих ответов предложи план: - какие страницы и секции нужны и в каком порядке; - куда хорошо ложится взятый дизайн, а что под мою задачу надо переделать; - стек по умолчанию: Next.js + Tailwind, статическая страница без бэкенда (если бэкенд реально не нужен). Покажи план списком и спроси, ок ли, прежде чем писать код. ШАГ 3. АДАПТИРУЙ, НЕ КОПИРУЙ. Когда план утвердим, собери сайт: - взятый дизайн используй как основу стиля, но замени все демо-тексты на реальные под мой бизнес; - убери лишние секции, добавь недостающие (форма заявки, контакты, оффер); - подгони цвета и шрифты под мой бренд; - сделай адаптив под телефон; - для фото поставь явные заглушки и подпиши, что туда загрузить. В конце запусти сайт локально и дай ссылку. Дальше будем править по секциям.
Почему «сначала вопросы» так важно
Если просто сказать «сделай мне сайт по этому дизайну», Claude оставит демо-тексты вроде «Your Company» и «Lorem ipsum», а структуру под чужую задачу. Получится красиво, но не про вас. Вопросы в начале превращают шаблон в ваш сайт: с вашим оффером, вашей ценой и одним понятным действием для клиента.
Что Claude спросит и сделает
- Задаст блок вопросов про нишу, клиента, оффер и цель сайта
- Предложит структуру секций и спросит подтверждение
- Соберёт страницу на взятом дизайне с вашими текстами
- Встроит 3D со Spline в hero, если вы его дали
- Сделает адаптив и запустит локально, покажет ссылку
Антипаттерны
Где ломается результат.
Просить сайт без ответов на вопросы
Если пропустить шаг с вопросами, Claude соберёт красивый, но пустой шаблон с демо-текстами. Дайте ему ответить на вопросы про бизнес, это 5 минут, которые меняют всё.
Смешивать 10 разных дизайнов
Hero из одного стиля, цены из другого, отзывы из третьего — получается визуальный хаос. Возьмите один стиль и держите в нём всю страницу.
Ждать от Spline целый лендинг
Spline — это 3D-объекты и сцены, а не готовые страницы магазинов. Берите оттуда один акцент в hero, а каркас сайта стройте на секциях 21st.dev.
Перегружать страницу 3D
Три тяжёлые 3D-сцены = сайт грузится 10 секунд и тормозит на телефоне. Один аккуратный 3D-элемент выглядит дорого. Десять выглядят сломано.
Не указать одно целевое действие
Если у сайта нет понятной цели (заявка, звонок, покупка), он красивый, но бесполезный. Скажите Claude, что должен сделать посетитель, и он выстроит страницу вокруг этого.
6 недель практики
Обучение по нейросетям
6 недель живой практики с наставником: промпты, артефакты и автоматизация под ваш бизнес.
Новое · бесплатный старт
Академия AGINE
Игровой тренажёр: прокачай своего Claude, на выходе каждого урока забери готовый артефакт под бизнес.
Бесплатно
Бесплатный вебинар по нейросетям
Живой эфир: покажем, как применить это в вашем деле, и ответим на вопросы.
Читать дальше