инструкция · сайт
Семь признаков, по которым сайт, собранный нейросетью, видно ещё до полной загрузки. И что говорить Клоду, чтобы ни один из них не появился
* Эта страница собрана тем же способом, что описан ниже: блоки мягко появляются при прокрутке, сверху идёт полоса прочитанного. Если в настройках твоего телефона или компьютера включено «уменьшение движения», анимаций не будет - страница просто останется статичной, читать это не мешает
Откуда берутся близнецы. Нейросеть учили на миллионах одинаковых лендингов. Попроси её «сделай красивый современный сайт» - и она честно выдаст усреднённое по всему интернету: сине-фиолетовый градиент, стеклянные карточки, искры возле каждого «AI»
Это лечится. Не магией и не другой нейросетью, а точными словами в запросе. Здесь - вся сборка от начала до конца, и на каждом шаге фраза, которая убирает очередной признак клона
Порядок действий, если коротко:
Уже пользуешься Claude Code? Тогда блок «для новичка» ниже можешь не открывать - он про установку, папки и лимиты. А вот три пункта после него нужны всем: навык, образец и сама команда
Главное, из-за чего у людей не получается. В обычном чате на claude.ai нейросеть выдаёт код текстом в окне. Сама она ничего не сохраняет: файлы на твоём компьютере не появляются, и открыть готовый сайт ей нечем
В Claude Code она делает это сама: создаёт файлы в твоей папке, складывает их как надо и открывает результат в браузере. Разница не в уме нейросети, а в руках: там она только советует, здесь - делает
Где это делается. Все шаги ниже - в VS Code: это бесплатная программа, внутри которой живёт Claude Code. Подойдёт и отдельное приложение Claude для компьютера, там то же самое, просто окна выглядят иначе
Технически да, и честно скажу как: копируешь выданный код, вставляешь в простой текстовый редактор (Блокнот на Windows, TextEdit на Mac), сохраняешь файл с именем вроде index.html и открываешь его двойным щелчком - сайт откроется в браузере
Почему я всё равно не советую этот путь новичку:
Коротко: через чат можно сделать одну простую страничку и помучиться. Всё, что дальше в этой инструкции, рассчитано на Claude Code
VS Code - бесплатная программа, в которой обычно пишут код. Нам она нужна не для кода: это дом, внутри которого живёт Claude Code. Ставится один раз, а дальше ты просто пишешь в ней Клоду обычными словами
Почему именно она:
У Claude Code есть версия в браузере, по адресу claude.ai/code. На вид то же самое, но внутри всё иначе: она работает не с твоим компьютером, а в облаке
Почему для нас это не годится:
Поэтому - программа на компьютере, не браузер
Установка и оплата - это отдельный сюжет, и здесь он не разбирается. Причина честная: одна ошибка на этом этапе стоит денег, а способы оплаты из России меняются чуть ли не каждый месяц - любая инструкция устаревает быстрее, чем ты до неё дойдёшь
Так что порядок такой: сначала ставишь программу и оплачиваешь подписку, а сюда возвращаешься, когда Claude Code открывается и готов к работе. Всё, что ниже, рассчитано ровно на этот момент
Самый частый ступор новичка: программа открылась, а куда печатать - непонятно
Сначала надо вызвать самого Клода. Открыл VS Code, а его панели не видно - это нормально, она не появляется сама. Способ, который работает всегда: в верхнем меню Terminal - New Terminal, внизу откроется чёрное окно, набери в нём слово claude и нажми Enter
Клод поздоровается прямо в этом окне. Вот сюда, в самый низ, ты и пишешь
Пишешь обычными словами, по-русски, как пишешь человеку. Никаких специальных команд учить не нужно: всё, что дальше в этой инструкции, просто копируешь и вставляешь
Отправил - и смотришь, что отвечает. Он пишет, что делает, и иногда переспрашивает
Он попросит разрешение создать файлы. Это нормально, соглашайся. Сайт - это и есть файлы, без них ничего не соберётся. Сломать компьютер он при этом не может: работает только в той папке, которая открыта
Первым делом спросит про доверие к папке - «Do you trust the files in this folder?». Своей папке - да, выбирай ответ, который начинается с «Yes»
Не собирай сайт «где попало» - потом не найдёшь. Порядок такой:
my-site, или своё - foto-studia, anna-coach. Слова разделяй дефисом, не пробеломПочему это важно. Клод работает только с той папкой, которая открыта. Откроешь наугад что-то другое - он соберёт сайт там, и завтра ты его не найдёшь. Одна папка на один сайт, и всё остаётся на местах
Как вернуться к работе завтра. Открываешь программу, открываешь ту же папку my-site - и говоришь: «продолжаем работу над сайтом, покажи, что уже собрано». Ничего не теряется, всё лежит файлами на твоём компьютере
На тарифе Pro есть лимит: наработаешь много за короткое время - программа скажет, что лимит исчерпан, и предложит подождать. Это не поломка и не потеря работы. Всё собранное остаётся на месте. По документации Anthropic на сентябрь 2026 лимит сессии обновляется каждые пять часов, и сверх него есть недельный - время следующего обновления Клод показывает сам, когда упрёшься
ui-ux-pro-max - файл с правилами дизайна: отступы, шрифты, композиция, что с чем сочетается. Без него Клод верстает «как получится», с ним - по правилам. Это половина лечения от близнецов
Поставь его первым делом, до сборки сайта. Ставится один раз и дальше работает всегда, во всех твоих проектах
Скопируй эту строку и отправь Клоду. Он всё сделает сам:
Клод попросит разрешение запустить команду - разрешай. Установка займёт полминуты, в конце он напишет, что навык добавлен
Просто попросить «найди и установи навык» - не сработает. Клод не умеет искать навыки сам, ему нужна точная команда: та, что выше. Поэтому не переписывай её своими словами, а скопируй как есть
Больше навыков ставить не надо. Их существует много, и соблазн набрать побольше велик - но на старте это только путаница. Один этот навык закрывает дизайн целиком. Освоишься, захочешь копнуть глубже - тогда спросишь Клода «какие ещё навыки помогут с сайтом», и он подскажет
Клод не умеет читать мысли: без образца он соберёт сайт «на свой вкус», а вкус у него усреднённый по интернету - тот самый близнец. Образец нужен, чтобы задать направление
Способов два, и они разные по силе:
Начни со скриншота - он проще. Ключ можно подключить потом, он никуда не денется
Первый экран - это то, что видно сразу при открытии сайта, до прокрутки. Его называют hero-секцией
Почему именно он, а не вся страница целиком: первый экран задаёт стиль всему остальному. Клод берёт оттуда шрифты, отступы, палитру и достраивает остальные блоки в той же логике. Дашь ему скриншот всей длинной страницы - получит кашу из десятка разных блоков и не поймёт, что именно копировать. Один экран - один понятный образец
Три каталога, где смотреть. Смотреть и делать скриншоты можно во всех трёх без всякой регистрации:
| 21st.dev | Готовые первые экраны, разложены по видам. Начни отсюда: там ровно то, что нужно, без лишнего |
| land-book.com | Большая галерея живых сайтов. Есть раздел Sections - отдельно первые экраны, шапки, блоки с ценами |
| onepagelove.com | Только одностраничники - ровно формат визитки. Удобно, если хочешь увидеть сайт целиком, а не кусок |
Плюс два очевидных источника, про которые забывают: сайт конкурента, который тебе нравится, и твоя собственная старая страница, если хочется «то же самое, только по-человечески»
Как выбирать, если глаз не намётан. Не ищи «самый красивый». Ищи по трём признакам:
| Mac | Cmd + Shift + 4, потом выделить мышкой нужный кусок. Картинка сама упадёт на рабочий стол |
| Windows | Win + Shift + S, выделить кусок, потом сохранить на рабочий стол |
Важно: положи картинку внутрь папки сайта. Не на рабочий стол, а именно в ту папку, которая открыта в программе - my-site. Клод видит только её содержимое, всё что снаружи для него не существует
Перетащи файл мышкой в папку. Дай ему простое имя латиницей: obrazec.png. Пробелы и русские буквы в имени убери - на них Клод спотыкается чаще всего
21st.dev умеет не только показывать картинки - он может отдавать Клоду сами блоки: первый экран, меню, карточки, подвал. Тогда сайт собирается не «по мотивам скриншота», а из готовых кусков, которые уже выглядят дорого
Нужен бесплатный ключ. Разбираться самой не надо, попроси Клода провести:
Это не обязательный шаг. Сайт соберётся и по скриншоту. Подключение делается один раз и пригодится дальше, но если сейчас хочется просто получить результат - пропусти и иди к команде ниже
Копировать чужой сайт один в один не нужно. Образец задаёт ощущение: сколько воздуха, какие шрифты, как расставлены блоки. Содержание всё равно будет твоё - иначе получится тот же близнец, только чужой
Про квадратные скобки в командах. Там, где стоит [твоё дело] - это место для твоего текста. Скобки нужно стереть вместе с подсказкой внутри и написать своё. Было про [твоё дело] - стало про студию детской фотографии. Оставишь скобки - Клод соберёт сайт про «твоё дело» буквально
Короткий вариант - если хочется просто попробовать прямо сейчас:
Рабочий вариант. То же самое плюс запреты на семь признаков близнеца и требование показать структуру до кода. Он длиннее не для красоты: каждая лишняя строка убирает один способ получить сайт-клон
Последняя строка про «покажи структуру до кода» - не украшение. Без неё Клод сразу уходит собирать, и если он понял тебя не так, переделывать придётся целиком
Про анимации, чтобы не запутаться в названиях. Motion - это готовый набор переходов, из-за которых сайт выглядит дорого: блоки мягко появляются при прокрутке, кнопки отзываются на курсор. Раньше библиотека называлась Framer Motion, сейчас просто Motion - если увидишь оба названия в интернете, это одно и то же
Название запоминать не нужно: в команде мы просто просим «плавные анимации», а чем их сделать - Клод решит сам под твой сайт. Если после сборки кажется, что всё слишком скачет, скажи: «убавь анимации, оставь только мягкое появление блоков»
Так же, как собирается сайт, словами собираются боты, таблицы и небольшие программы под свою работу. На бесплатном практикуме ИИ-Лагерь каждый шаг показывают на экране - Посмотреть практикум
Самый заметный. Если первый экран залит переливом из синего в фиолетовый - дальше можно не смотреть, это дефолт нейросети
Полупрозрачные блоки с размытием под ними. Красиво ровно до момента, когда видишь их на каждом втором сайте
Всё набрано примерно одним размером и одной толщиной. Глазу не за что зацепиться, непонятно, что тут главное
Иконка-звёздочка рядом с любым упоминанием нейросети, как будто она что-то значит. Не значит ничего, просто примета жанра
В шапке стоит название, напечатанное шрифтом по умолчанию. Выглядит как заглушка, которую забыли заменить - потому что это она и есть
Карточки с идеальными лицами из бесплатных фотостоков и придуманными именами. Самый дорогой признак: на нём теряют доверие, а не просто вкус
Отзывы есть настоящие - отдай их текстом как есть, с реальными именами. Клод сам расставит их по карточкам. Просить его «придумай отзывы» не надо: получишь ровно тех мифических людей, из-за которых сайт и не работает
Контрольная проверка. На компьютере сайт выглядит прилично, открываешь с телефона - блоки наезжают друг на друга, текст обрезан, кнопка уехала за край
Не пропускай этот шаг. Больше половины людей откроют твой сайт с телефона. Если он там развалится, остальные шесть пунктов уже не важны
Место, где новички теряются: Клод начинает задавать вопросы, а что говорить - непонятно. Основные, с готовыми ответами
| Спрашивает про доверие к папке (Do you trust the files…) | Спрашивает, доверяешь ли ты папке, из которой запущен. Своей папке - да, соглашайся |
| Просит разрешение создать файл или папку | Разрешай. Он не может собрать сайт, не создавая файлы. Опасного тут нет |
| «Для кого сайт, какая главная задача?» | Обычными словами: «для тех, кто ищет [твою услугу], главное действие - написать мне в Телеграм» |
| «Какие разделы нужны?» | Не знаешь - так и скажи: «предложи сам, я посмотрю и поправлю» |
| «Какой текст поставить?» | На первом заходе можно «поставь черновой, я заменю». Только не оставляй навсегда: выдуманные цифры и достижения на живом сайте не нужны |
| Показал структуру и ждёт | Прочитай список разделов. Нравится - «да, собирай». Лишнее - «убери раздел X, добавь Y» |
Второе место, где все зависают: Клод спрашивает, какой текст ставить, а в голове пусто. Для визитки достаточно четырёх кусков, и все они короткие
| Заголовок первого экрана | Что ты делаешь и для кого, одной строкой. Не «Добро пожаловать», а «Помогаю мамам в декрете вернуться к работе» |
| Строка под заголовком | Одно предложение: как именно и с каким результатом. «Разбираем твой опыт и собираем резюме, на которое отвечают» |
| Кнопка | Действие, а не «Подробнее». «Написать мне в Телеграм», «Записаться на разбор» |
| Блок «обо мне» | Три-четыре предложения: кто ты, сколько лет в деле, чем отличаешься. Без списка регалий |
Не проси Клода придумать текст за тебя целиком. Он напишет гладко и ни о чём: «инновационные решения», «индивидуальный подход». Это второй способ получить близнеца - на этот раз близнеца по словам
Лучше расскажи ему своими словами, как рассказываешь другу, и попроси причесать:
Нет текста прямо сейчас - не страшно. Скажи: «поставь черновой текст, я заменю позже». Только не забудь заменить до того, как покажешь сайт людям: выдуманные цифры и достижения на живом сайте не нужны
Откроется вкладка с твоим сайтом. Выглядит как настоящий - но есть важная деталь
После каждой правки обновляй вкладку. Клод поменял файл, но открытая страница сама не перерисуется. Нажми Cmd+R на Mac или F5 на Windows - и увидишь новую версию. Не обновил - будешь смотреть на старую и думать, что правка не сработала
Пока это сайт только для тебя. Он лежит файлами на твоём компьютере, и по интернету его никто не откроет. Скинуть подруге ссылку на этом этапе не получится - у неё не откроется
Это нормальный порядок работы: сначала собираешь и правишь у себя, потом выкладываешь. Выкладывать имеет смысл, когда сайт уже нравится
Отдельно разбираться не нужно, это делается одной просьбой. Клод сам заведёт всё что нужно и проведёт по шагам:
На выходе получишь обычную ссылку - её можно ставить в шапку профиля и отправлять кому угодно. Бесплатного варианта хватает для визитки с головой
Это ничего не значит, и в ответ прилетит очередной шаблон. Говори конкретно: что не так и на что заменить
| Слабо | Сильно |
| «сделай красиво» | «спокойные цвета, много воздуха между блоками, крупный шрифт» |
| «мне не нравится» | «первый экран перегружен: оставь заголовок, одно предложение и кнопку, остальное вниз» |
| «скучно» | «добавь контраста: заголовок крупнее вдвое, кнопку заметным цветом» |
| «переделай всё» | «устраивает всё кроме блока с ценами - переделай только его» |
Испортил то, что нравилось:
Правит слишком много лишнего:
Сам не понимаешь, что не так:
Почему «сотри всё и начни заново» - плохая идея. Вместе с плохим уйдёт и то хорошее, что уже собралось, а следующая версия окажется не лучше, просто другой. Правь кусками: один блок за раз, смотришь результат, идёшь дальше
Слева то, что видно на экране, справа - что сказать Клоду. Ищи свою строку по тому, что случилось:
| Клод говорит, что не знает такого навыка | Значит навык не установлен. Вернись к разделу про навык и отправь ему команду установки целиком, слово в слово - своими словами это не работает |
| Не видит файл с образцом | Скорее всего картинка лежит не в той папке. Перетащи её внутрь папки сайта и скажи: «файл obrazec.png лежит в папке проекта» |
| Сайт открылся пустой белой страницей | «Страница пустая, посмотри ошибки в консоли и почини». Ошибки он читает сам |
| Анимации дёргаются и мешают | «Убавь анимации, оставь только мягкое появление блоков при прокрутке» |
| Убрал градиент - он вернулся в другом блоке | Скажи запрет разом на весь сайт: «нигде на странице не используй градиенты, только однотонные заливки» |
Не шедевр студии за миллион. Аккуратный сайт с собственным лицом: чистый первый экран, ровные шрифты, живые анимации, нормально открывается с телефона. Для визитки, страницы услуги или лендинга под запуск этого хватает
Главное - его не спутают с сотней таких же. А это и было задачей
Цена подписки и правила лимитов сверены с официальной справкой Anthropic:
Рублёвая сумма официальной справкой не задаётся: она зависит от курса и от посредника, поэтому названа как наблюдение на лето 2026, а не как цена навсегда
Один сайт по инструкции ты соберёшь. Дальше упрёшься в вопросы, которые текстом не закрыть: как поставить всё с нуля, как принимать оплаты, почему на сайт никто не заходит. Это разбирают на живом мероприятии, где рядом есть кого спросить
Хочешь познакомиться и научиться работать в Claude Code и Codex? Приходи на онлайн-практикум
За 3-4 дня ты пройдёшь путь от первого запуска Claude Code / Codex до готового продукта
Что именно получишь:
Инструкция собрана на живой сборке: все команды и фразы проверены в работе, а не переписаны из чужого поста