Сайт не по шаблону в Claude Code: референсы вместо «красиво»

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

Дело в слове «красиво». У нейросети нет твоего вкуса, и на пустой запрос она выдаёт самое среднее, что видела. Чтобы получить своё, надо показать картинками, куда идти, и словами объяснить, что именно в этих картинках тебе нравится.

Про подбор цветов и шрифтов для бренда есть урок по слову ДИЗАЙН. Здесь про другое: как передать Claude Code направление через чужие сайты и не утащить их к себе целиком.

Что получишь

• папку из 3-5 скриншотов сайтов, которые тебе нравятся, и к каждому строчку, чем именно
• файл со стилем твоего сайта: цвета кодами, шрифты, как расположены блоки, какое настроение
• первый экран, где сразу видно твоё дело, а не шаблон
• проверку, что твой сайт не стал копией ни одного из референсов

Что нужно до старта

Если Claude Code ещё не стоит на компьютере, вот установка по шагам

• Claude Code. Это платная часть Claude: по странице тарифов на 28.10.2026 Claude Code входит в Pro ($20 в месяц помесячно или $17 в месяц при оплате за год), в бесплатном тарифе его нет. Удобнее всего через программу Claude на компьютере, вкладка Code. Для Claude из России нужен VPN
• Бриф и тексты сайта. Что продаёшь, кому, цены, контакты. Как их собрать, есть в уроке по слову ЛЕНДИНГ
• Свои фотографии. Работы, товар, мастерская, команда. Чужие фото из интернета на сайт не ставим
• Полчаса на прогулку по сайтам. Отбирать референсы глазами придётся самой

Сначала правило: референс показывает направление

Референс - это картинка, по которой ты объясняешь, чего хочешь. Сам он на твой сайт не переезжает.

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

Хорошая привычка: бери референсы из разных мест. Один сайт из своей ниши, один из совсем другой, один журнал или выставка. Когда смешиваешь три источника, копия не получится даже случайно.

Шаги

1. Собери 3-5 скриншотов

Открывай сайты, которые цепляют. Мастер маникюра может смотреть сайты кофеен и ювелирных мастерских. Строительная бригада - архитектурные бюро и мебельные фабрики. Фрилансер-дизайнер - галереи и сайты типографий.

Делай скриншот первого экрана, это всё, что видно до прокрутки. Если нравится какой-то блок ниже, его тоже отдельным снимком. Складывай в одну папку, например «референсы», рядом с папкой будущего сайта.

2. Под каждым запиши, что именно нравится

Одной строкой и конкретно. «Красиво» не годится.

Годится так: «фото во весь экран, текст поверх мелкий», «два цвета и всё, тёмно-зелёный и песочный», «много пустого места, кнопка одна», «заголовок огромный, шрифт с засечками». Запиши и то, что не нравится на том же сайте: «а вот серые карточки внизу скучные».

Если не можешь сформулировать, попроси помочь в следующем шаге.

3. Покажи референсы Claude и попроси разобрать

По документации Claude Code картинку можно перетащить прямо в окно или указать путь к файлу. Можно несколько картинок в одном разговоре.

Открываешь вкладку Code, выбираешь папку будущего сайта, перетаскиваешь скриншоты и пишешь:

Это референсы для сайта моего дела. Под каждым моя заметка, что мне в нём
нравится:
1. [заметка к первому скриншоту]
2. [заметка ко второму]
3. [заметка к третьему]

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

Прочитай разбор. Если Claude увидел не то, что ты, поправь: «нет, во втором мне нравится как раз фото, а шрифт там так себе».

4. Запиши стиль в отдельный файл

По нашему разбору создай файл style.md с описанием стиля МОЕГО сайта.
Моё дело: [одной строкой]

В файле:
- палитра из 4-6 цветов с кодами и где какой используется
- шрифты: для заголовков и для текста
- настроение тремя-четырьмя словами
- первый экран: что на нём и в каком порядке
- что запрещено: [то, что тебе не нравится]

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

Файл style.md - твоя договорённость с Claude. В новых разговорах просишь «работай по style.md», и объяснять всё заново не надо.

5. Найди своё для первого экрана

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

Предложи три варианта первого экрана для моего дела по style.md.
В каждом самым заметным должно быть то, что характерно именно для
[твоё дело], а не общая картинка. Мои фото лежат в папке [папка].
Опиши варианты словами, код пока не пиши.

Выбираешь один, можно смешать.

6. Сначала план, потом сайт

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

Собери одностраничный сайт по style.md и выбранному первому экрану.
Тексты возьми из brief.md, фото из папки [папка].
Один файл index.html, стили внутри. Язык русский.
Сначала покажи план блоков, потом делай.
Когда закончишь, открой сайт, чтобы я посмотрела.

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

7. Сверь с референсами и с шаблоном

Сделай скриншот своего первого экрана и положи рядом с референсами в тот же разговор:

Сравни мой первый экран (последний скриншот) с референсами.
1. Где он слишком похож на какой-то из них? Предложи, что поменять
2. Есть ли в нём приметы шаблонного сайта: одинаковые карточки
   с тенями, одно выделенное слово в заголовке, мелкие подписи капсом
   над заголовками, стрелочки у каждой ссылки? Убери то, что не несёт смысла

Список примет взят из официального навыка Anthropic по дизайну интерфейсов, frontend-design, он лежит в открытом репозитории anthropics/skills на GitHub. Как поставить его в Claude Code, написано в описании репозитория. Ставить необязательно, проверочного промпта выше хватает.

8. Проверь с телефона

Открой сайт на телефоне. Крупный заголовок и фото во весь экран на компьютере выглядят дорого, а на телефоне могут закрыть кнопку. Если что-то съехало, опиши словами, что видишь, и приложи скриншот с телефона.

Где обычно ломается

Получилась копия одного референса. Чаще всего, когда референс один. Возвращайся к шагу 1 и добавь ещё два из других ниш, потом перепиши style.md.

Claude взял текст или картинку с референса. Бывает, если на скриншоте крупный слоган. Ищи на своём сайте всё, чего ты не писала, и меняй на своё. Чужие фото и логотипы удаляй сразу.

Всё равно шаблонно. Значит, в style.md слишком общие слова. «Современно и стильно» ничего не говорит. Пиши «тёмно-зелёный, песочный, шрифт с засечками, фото дерева во весь экран».

Каждый новый разговор забывает стиль. Начинай с «прочитай style.md и работай по нему». Файл лежит в папке сайта, Claude его видит.

Лимит кончился на правках. Картинки и длинные разборы тратят лимит быстрее. Собирай замечания списком и отправляй разом.

Что дальше

Референсы, style.md и план до правок пригодятся не только для сайта: так же собирают обложки, презентации, карточки товара. Если хочешь освоить Claude спокойно, от первого чата до программы на компьютере, есть курс «Claude с нуля, 7 уроков».

Источники

1. https://code.claude.com/docs/en/common-workflows
2. https://code.claude.com/docs/en/desktop-quickstart
3. https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
4. https://claude.com/pricing

Ещё уроки