Как сделать сайт через Claude без шаблонного ИИ-вида

Как сделать сайт через Claude и сохранить свой характер?

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

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

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

Какое действие должен сделать посетитель?

Перед первой командой запишите, кто открыл страницу, с каким вопросом и какое действие завершает посещение. Для консультации это может быть заявка, для статьи — скопированный промпт. Структура должна помогать дойти до этого действия.

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

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

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

Как выбрать структуру до оформления?

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

5 ноября мы попробовали уменьшить шрифты и отступы в прежнем оформлении. Я этот вариант отклонил. Белое поле, синий акцент и Golos вокруг авторских иллюстраций всё ещё выглядели шаблоном.

Из трёх структур я выбрал две для разных задач. Главная стала конвейером от рилса до продажи, раздел материалов получил поиск по задаче. «Полки задач» стали видом каталога без поискового запроса.

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

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

Откуда взять свой визуальный язык?

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

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

Заголовки и текст статей используют Literata, интерфейс и подписи — Golos Text, код — JetBrains Mono. В статье важны длинное чтение и различимость заголовков; в кнопке — короткая ясная надпись. Так шрифты помогают ориентироваться.

У фотографа характер сайта может идти от серий снимков, у мастерской — от изделий. Мои бумага и бирюза подходят моим сценам. Выберите собственную опору, затем проверьте: что потеряется, если заменить ваше имя чужим?

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

Какую форму дать каждому блоку?

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

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

Карточка полезна, когда объединяет самостоятельный объект для выбора или сравнения. Спросите о каждой рамке: что она объединяет и зачем отделяет от соседей? Если ответа нет, посмотрите вариант без неё.

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

Что должно быть видно до нажатия кнопки?

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

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

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

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

Что поручить навыку дизайна?

Поручите навыку порядок работы и проверку ограничений. В проекте я использую design-taste-frontend и impeccable. Задачу страницы и выбор между структурами оставляю за собой.

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

Направление и подходящий навык поможет выбрать Design Router. Когда направление выбрано, превратите его в задачу с критериями: что сохранить, что изменить и как проверить. Этот шаг разобран в статье «Задача агенту с критериями приёмки».

Какие 10 признаков проверить на своей странице?

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

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

Как запустить промпт-проверку?

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

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

Проверь мою страницу на шаблонные решения. Адрес: [URL]. Задача посетителя: [что он должен понять и сделать]. Принятые правила и запреты: [что сохранить].

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

Проверь десять признаков:
1. Общий текст, в котором имя можно заменить чужим.
2. Одинаковые карточки для процесса, доказательства и условий.
3. Конкурирующие цвета, градиенты и главные кнопки.
4. Иконки, которые только повторяют слова.
5. Обещания без фактов и источников.
6. Нечитаемый текст и случайные переносы.
7. Декоративные графики, выдаваемые за доказательство.
8. Анимация, которая мешает чтению или не учитывает уменьшение движения.
9. Сжатая настольная версия на телефоне, горизонтальный скролл, неудобное меню.
10. Неясное или несвязанное продолжение после основного действия.

Для каждого пункта дай статус: найдено / не найдено / нельзя проверить. Приведи конкретное место и наблюдение, объясни последствие для посетителя. Отделяй факт от предположения. По внешнему виду не определяй автора кода. Не считай сам факт наличия карточки или градиента дефектом.

Если есть браузер, проверь главное действие, меню, Tab и Escape. Не отправляй реальные заявки, не совершай покупки и не меняй опубликованную страницу. Для таких действий предложи безопасную тестовую проверку.

Выбери до пяти важных исправлений. Для каждого укажи приоритет, что сохранить, что поменять и как принять результат. Отдельно перечисли, что не смог проверить. Для редизайна предложи 2–3 структуры и дождись моего выбора. Пока только отчёт, код не меняй. Не выдумывай кейсы, цифры, отзывы и содержимое продукта.

Хорошее замечание содержит место, наблюдение, последствие и правку. Например: «В мобильном меню ссылка на заявку за правым краем; перенести пункты в вертикальный список». Такое замечание можно превратить в задачу и проверить после исправления.

Как принять страницу в браузере?

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

В правилах моего сайта три диапазона: до 680 пикселей, от 681 до 900 и выше 900. В среднем остаётся одна колонка. Сравнивать самостоятельные варианты рядом можно выше 900, когда для них хватает места.

Полоса текста статьи занимает 740 пикселей. Основной набор — 18 пикселей с межстрочным интервалом 1,8; на телефоне — 17 и 1,75. Агент может сверить страницу с этими числами, а я — оценить чтение.

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

Появление элементов у нас работает через общую настройку Motion for Vue с учётом уменьшения движения. Новое поведение исправляется в одном месте. При проверке посмотрите, доступен ли текст сразу и не отвлекает ли анимация от чтения.

Домен уже есть: Тильда или сайт с нуля?

Выбирайте площадку по функциям и готовности вести сайт после выпуска. Купленный домен — адрес, который можно направить на выбранную площадку. В справке Тильды описаны два способа подключения: её DNS-серверы или A-записи у регистратора; проверено 6 ноября 2026 года.

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

Проект с агентом стоит рассмотреть для собственных правил публикации, связанных инструментов или контроля над кодом. Тогда понадобятся проверка обновлений и возврат к рабочей версии. Выбрать помощника для такой работы поможет статья «Claude Code или Codex».

Можно ли сделать сайт нейросетью самому? Можно поручить агенту код и команды, а себе оставить выбор задачи и приёмку. Заранее уметь верстать необязательно; смотреть результат и подтверждать выпуск всё равно придётся.

Как продолжить работу в новой сессии?

Сохраните принятые решения в проекте. У меня это DESIGN.md: цвета с ролями, шрифты, ширина чтения, формы блоков, правила телефона и анимации. Причины спорных выборов лежат в журнале решений.

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

После промпта у вас будет список замечаний. Следующий шаг — поставить агенту задачу и принять исправление. В методичке «Свой сайт с агентом» есть критерии, Git, проверки, публикация по HTTPS и восстановление; нужны компьютер и Claude Code или Codex. Содержание и варианты доступа — по кнопке в финале.

Источники и границы

Разбор опирается на документы проекта по состоянию на 6 ноября 2026 года. Журнал и правила дизайна хранятся в закрытом репозитории. Ниже — названия документов и открытые ссылки.

• Мой сайт и DESIGN.md: палитра, шрифты, композиция и мобильные диапазоны.
• Решение 0160, 5 ноября 2026: конвейер на главной и поиск по задаче.
• Решение 0166, 5 ноября 2026: отдельная покупка, одна колонка и видимая цена.
• Design Router: выбор направления и навыков.
• Документация Claude Code: планирование и проверки, проверена 6 ноября 2026.
• Подключение домена в Тильде, проверено 6 ноября 2026.

Границы

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