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

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

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

Цифры

Идея целиком

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

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

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

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

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

21st.dev ↗ Каркас страницы: секции, блоки, формы. Кнопка «Copy prompt» под каждым.

spline.design ↗ 3D-сцены и объекты для hero. Берите 1 эффект, не перегружайте страницу.

Что не путать

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, что должен сделать посетитель, и он выстроит страницу вокруг этого.

Блок призыва к действию (CTA)