Не шаблонный сайт в Claude Code за вечер: 4 шага через Refero Styles

Каждый день в Telegram-канале - что нового в вайб-кодинге: инструменты, примеры, ошибки. Подпишись, чтобы быть в курсе.

Почему сайты от Claude Code выглядят как шаблон Tailwind?

В январе я начинал маленький побочный проект - звонилку для холодных продаж Piratix. Открыл пустой репо, попросил Claude Code собрать главную страницу. Получил классику: тёмный фон slate-950, фиолетовый акцент purple-500, заголовок жирным sans-serif, под ним три карточки с одинаковыми тенями. Тот же макет, что у первого выхода ChatGPT, у первого Lovable, у первого v0. Я переписал промпт пять раз, добавил «modern», «premium», «не как у всех» - ничего не изменилось. Страница всё равно выглядела как из набора Tailwind UI Templates.

Этот эффект разобран в статье на Хабре «Сайты от ИИ выглядят как сайты от ИИ» (ник автора - ab429), там это сформулировано прямо:

Причину этого ещё ёмче описывает Pasquale Pillitteri в статье про ИИ-дизайн:

То есть Claude не «не знает» как делать красиво. Он знает, как делает большинство, и воспроизводит это большинство. Чтобы получить не-усреднённый результат, агенту нужно дать конкретные ограничения: какие цвета взять, какие шрифты, какой spacing, какие компоненты считать каноничными.

И вот тут включается дизайн-система как контекст. Не «сделай красиво», а «сделай в этом конкретном стиле, вот его параметры». Эту разницу хорошо описывает Nicolas Deville в заметках про Refero Styles:

Refero Styles закрывает этот разрыв через готовый артефакт - файл DESIGN.md с параметрами реальных продуктов.

Что такое Refero Styles?

На главной странице styles.refero.design написано прямо: «открой 2000+ дизайн-систем, читаемых ИИ-агентами, от ведущих продуктовых сайтов». В каталоге - бренды, которые задают визуальный стандарт: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Они извлечены не вручную - команда Refero (фаундер Mike Bespalov, ник на Product Hunt - mishkadoing) запускает скрипт, который анализирует реальный CSS и markup сайта, и упаковывает результат в структурированный markdown. Сама библиотека styles.refero.design - бесплатная.

Nicolas Deville даёт максимально точное определение продукта:

Ключевое слово - «структурированные». В файле нет скриншотов, нет описания «в стиле минимализма». Там markdown с конкретными hex-цветами, точными pt-размерами шрифтов, единицами spacing, правилами для компонентов. ИИ-агент читает этот файл и работает с конкретикой, а не с моими попытками описать вкус словами.

Поддерживаемые инструменты команда Refero перечисляет на странице ai-agents так: «Cursor, Claude Code, Codex, v0, и Lovable». То есть DESIGN.md работает как универсальный артефакт - один файл, который подходит всем основным ИИ-агентам для разработки.

Что лежит в одном DESIGN.md?

Сама команда Refero на странице design-md-template описывает структуру файла так:

То есть структура файла обычно такая:

Дополнительно создатели подчёркивают принцип, который решает 80% проблем с ИИ-дизайном:

То есть hex-код #5E6AD2 сильнее, чем «как у Linear». Точное значение font-size: 13px / line-height: 18px сильнее, чем «компактный текст». Конкретика побеждает интерпретацию.

Практикум по вайб-кодингу

+Твой второй мозг

3 вечера - стек, метод, первый проект

Старт 23–25 июня  ·  2 000 ₽

Записаться →

DESIGN.md в репо - это не картинка для команды. Это кирпичик Второго мозга твоего проекта: структурированное знание, которое ИИ читает при каждом запросе. На практикуме за 3 эфира я показываю всю связку: ИИ-клон (Skills под твою методологию) + Второй мозг (business/, DESIGN.md, CLAUDE.md) + Контекст-инжиниринг (Plan Mode, /compact). Это 3 кита, без которых ИИ галлюцинирует.

Как сделать сайт в стиле Linear за 4 шага?

Эти 4 шага я гоняю каждый раз, когда начинаю новый сайт. Не «4 шага вообще», а конкретная последовательность с одной командой на каждый шаг.

1. Поставить Claude Code

   Нативный установщик одной командой: curl -fsSL https://claude.ai/install.sh | bash (рекомендованный путь из официальной документации). На macOS работает brew install --cask claude-code, на Windows - winget install Anthropic.ClaudeCode. Если уже стоит, проверь версию: claude --version (нужна 2.1.178+ - в этой версии появились Tool(param:value) permissions и блокировка опасных git-команд в auto-mode). Войди под аккаунтом: claude запустит wizard. Claude Code входит в подписку Pro ($17/мес при годовой оплате или $20/мес помесячно).

2. Открыть Refero Styles и выбрать бренд

   Зайди на https://styles.refero.design, открой каталог. Главный критерий выбора - близость к твоему продукту, а не «нравится по картинке». Делаешь SaaS-панель - смотри Linear, Vercel, Notion. Делаешь финтех - смотри Stripe, Mercury, Column. Делаешь продукт для участников - смотри Duolingo. Открываешь карточку бренда, нажимаешь «Copy DESIGN.md».

3. Положить DESIGN.md в проект как контекст

   Создаёшь файл docs/DESIGN.md в корне проекта и вставляешь скопированное. Дальше открываешь CLAUDE.md и добавляешь одну строку: @docs/DESIGN.md. Это директива импорта - Claude Code подгружает содержимое в контекст при старте сессии. Подробнее про импорты в CLAUDE.md - в гайде про один файл инструкций для Claude Code, Codex и Cursor.

4. Дать промпт на конкретную страницу

   Не «сделай красиво». Конкретно: «Используя DESIGN.md из контекста, собери главную страницу для SaaS продукта по управлению задачами. Структура: hero с заголовком и подзаголовком, две CTA-кнопки (primary и secondary), под ним - блок из 3 фич с иконками, ниже - блок отзывов. Используй точно цвета и типографику из DESIGN.md, не выдумывай свои.»

После четвёртого шага Claude собирает страницу. У меня в среднем уходит 8-12 минут на главную - и она реально выглядит близко к стилю выбранного бренда. Не пиксель-в-пиксель копия, но узнаваемая эстетика: те же шрифты, та же палитра, тот же spacing-ритм, те же микро-решения в кнопках.

Создатели Refero на странице ai-agents/design-resources формулируют тот же 3-шаговый принцип чуть короче:

Моя 4-шаговая последовательность - это та же логика, плюс явный шаг с установкой Claude Code и явным импортом в CLAUDE.md.

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

Создатели Refero дают этот совет на странице guide прямо в первом шаге - выбирать референс не только по имени бренда, а по плотности, тону и аудитории.

Что это означает на практике. У Apple и Linear - разные стили, но обе работают для SaaS-панелей с большим количеством информации на экран. Если ты выбираешь только потому, что «Apple - круто», но твой продукт - финансовая панель для бухгалтерии - получишь шрифты SF Pro, спокойную палитру, много воздуха - и в итоге пользователь увидит четыре строки данных там, где их должно быть тридцать. Apple для презентаций и портфолио, а не для плотных операционных интерфейсов.

Простая карта выбора по типу продукта:

Если совсем сомневаешься - бери Linear. У него самая универсальная база: нейтральная палитра, читабельная типографика (Inter / Söhne), сдержанный spacing. Сайт на основе Linear будет выглядеть профессионально на 9 типах продуктов из 10.

Зачем DESIGN.md в твоём Втором мозге?

Я держу DESIGN.md рядом с CLAUDE.md в каждом проекте, который веду через ИИ-агентов. У этого файла нет статуса «временного для одной задачи». Это постоянный канон, на который опираются все будущие сессии. Через месяц я попрошу Claude добавить новую страницу в проект - он откроет тот же DESIGN.md и сделает в том же стиле. Через полгода я отдам проект другому участнику команды - тот тоже запустит Claude и получит согласованный результат, потому что DESIGN.md лежит в репо.

Принцип Второго мозга в дизайне работает так: решение принято один раз - палитра, типографика, ритм spacing. Дальше любой ИИ-агент берёт это как данность.

Хорошо это сформулировал автор статьи про Open Design и Claude Code на Хабре:

То есть дизайн живёт в виде кода (markdown - это код), а не в виде Figma-файла, который ИИ не читает. Когда дизайн - это файл в репо, его читает Claude Code, читает Codex, читает любой будущий инструмент. Когда дизайн - в Figma, он живёт в отдельной плоскости и в каждую сессию его нужно переводить руками.

Я в СмыслоКод для нескольких побочных проектов уже завёл такую структуру:

project/
├── CLAUDE.md            (импортирует @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (визуальный канон, скопировано из Refero)
│   ├── ARCHITECTURE.md  (структура проекта)
│   └── BRAND.md         (тон голоса, словарь)
└── ...

Эти три файла - один из вариантов реализации Второго мозга. DESIGN.md отвечает за визуал, ARCHITECTURE.md - за структуру, BRAND.md - за голос. Любой ИИ-агент с доступом к репо получает все три как контекст.

Что такое Refero MCP и refero_skill?

Refero Styles - это базовый слой (DESIGN.md как файл). Вторая волна - это интеграции, которые делают доступ к библиотеке «нативным» для ИИ-агентов. Их две.

Refero MCP (официальный). Это серверный API на https://api.refero.design/mcp, к которому Claude Code подключается через bearer token. Дальше агенту доступны 150 000+ экранов и 6 000+ user flow из реальных продуктов. Поставить можно через скилл:

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

После установки Claude в начале каждой сессии запускает «дизайн-ресёрч» как обязательный первый шаг: смотрит, какие визуальные решения подходят под задачу, и при необходимости предлагает три варианта направления, заблокированных под выбранный референс. По состоянию на 23 июня 2026 в репозитории refero_skill - 67 коммитов и 135 звёзд. Свежий продукт, активная разработка.

Альтернативный open-source MCP. Если не хочешь зависеть от платного API Refero, есть проект faridjafarlee/refero-styles-mcp-server, который ходит в публичную часть styles.refero.design. У него 4 инструмента:

Я в СмыслоКод пока работаю по простому пути: захожу на сайт руками, копирую DESIGN.md, кладу в файл. MCP полезен, когда работа с дизайн-системами становится регулярной - например, ты ведёшь несколько клиентских проектов и переключаешься между визуальными канонами каждый день. Подробнее про подключение MCP-серверов к Claude Code - в гайде про NotebookLM и MCP.

Какие 4 ошибки ломают workflow?

Эти четыре ошибки я наблюдал и у себя, и в чате когорт практикума. Каждая выглядит безобидно, но каждая возвращает результат в стандартный шаблон Tailwind.

Ошибка 1. Промпт «сделай modern». Это самый частый паттерн ошибки. Открывают Claude Code, пишут «сделай мне сайт для SaaS, modern style, premium look». Получают тёмный фон плюс фиолетовый акцент. Слово «modern» в обучающей выборке коррелирует со всеми посадочными страницами 2022-2024 года, которые делались по одному шаблону. Без точных параметров из DESIGN.md «modern» = «средний».

Ошибка 2. Вставить DESIGN.md в чат как сообщение. Иногда люди копируют DESIGN.md в окно чата Claude Code, говорят «вот стиль, используй». Это работает один раз - до конца сессии. Дальше открыл новую сессию (или ушёл на другую задачу, /clear) - контекст потерян. Если хочешь, чтобы стиль был постоянным, файл должен лежать в репо и быть импортирован в CLAUDE.md. Подробнее, почему CLAUDE.md - точка постоянного контекста, в гайде про память Claude.

Ошибка 3. Выбрать стиль по «нравится». Тебе нравится визуал Apple. Берёшь DESIGN.md от Apple. Делаешь панель управления для агентства недвижимости с 30 объектами на экране. Получаешь огромные паддинги, sans-serif шрифт, много пустоты - и пользователю не помещается ни одного объекта без скролла. Apple подходит для минималистичных портфолио и презентаций продукта, не для плотных операционных интерфейсов. Команда Refero на странице guide подчёркивает тот же принцип: выбирай референс по плотности, тону и аудитории, а не только по имени бренда.

Ошибка 4. Не упомянуть DESIGN.md в самом промпте. DESIGN.md может лежать в репо, импортирован через CLAUDE.md, агент его видит. Но если в промпте написать «собери сайт», Claude может выбрать стандартный путь без явной отсылки к файлу. Я в каждом промпте на дизайн добавляю строку: «Используй точно цвета, шрифты и spacing из docs/DESIGN.md. Не выдумывай свои значения - бери из файла.» Это даёт гарантию, что агент пойдёт через DESIGN.md, а не мимо.

Этот паттерн хорошо разобрала Лиза Демченко в статье на UX Collective про написание DESIGN.md для Claude (май 2026). Она проанализировала десятки реальных DESIGN.md файлов и собрала skill для Claude Code, который превращает написание дизайн-системы в строгий пошаговый процесс. Её главный вывод: один файл может содержать одни и те же поля, но разный уровень специфичности - и только конкретные значения превращают агентский результат из «прочитал» в «следует».

Nicolas Deville формулирует общий принцип всех этих ошибок прямо:

Точные токены - это hex-коды, pt-размеры, единицы spacing в DESIGN.md. Естественный язык - это «modern», «premium», «clean», «как у Apple». Точные токены работают, свободные слова - нет.

Что делать дальше?

Сейчас у тебя в руках базовый workflow: Claude Code + DESIGN.md от Refero + 4 шага = не-шаблонный сайт. Это закрывает 70% потребностей. Оставшиеся 30% - это случаи, когда нужно ещё точнее, ещё быстрее, ещё с проверкой.

Три направления, куда можно идти после освоения базы:

1. Frontend Design Skill. Это официальный скилл для Claude Code, который добавляет визуальную обратную связь. Агент делает скриншот собранной страницы через Puppeteer, смотрит на неё своими «глазами» (vision-моделью), сравнивает с DESIGN.md и сам предлагает корректировки. Это цикл «промпт → код → скриншот → критика → промпт» в автоматическом режиме. Полезен, когда страница сложная и за одну итерацию не угадать.

2. Refero MCP в продакшн-режиме. Когда ведёшь 3-5 проектов параллельно, ставить DESIGN.md руками для каждого утомительно. Refero MCP даёт refero_match_style - команду, которая по описанию проекта подбирает 3 подходящих стиля и предлагает выбор. Это ускоряет начало нового проекта с 30 минут до 3.

3. Связка с Контекст-инжинирингом. DESIGN.md - один из артефактов контекста. Рядом с ним обычно живёт ARCHITECTURE.md (структура проекта), BRAND.md (тон голоса), business/audience.md (целевая аудитория). Все они в CLAUDE.md импортируются. Когда Claude собирает страницу, он опирается и на визуал, и на аудиторию, и на структуру продукта. По сути это контекст-инжиниринг - системная работа с тем, что положишь агенту перед запросом.

Когда задача шире одного проекта и нужна связка, которая делает Claude стабильным на любом сайте, одного файла мало. Это уже методология, в которой DESIGN.md - кирпичик, рядом с ним лежат ИИ-клон (Skills под твою методологию работы), Второй мозг (business/ + docs/), и Контекст-инжиниринг (Plan Mode, /compact, импорты). Записывайся на практикум - за 3 эфира собираю всю связку на твоём проекте.

Полная схема по вайб-кодингу за вечер: ИИ-клон + Второй мозг + Контекст-инжиниринг. 3 эфира, 2 000 ₽. Записи остаются у тебя.

Практикум по вайб-кодингу

+Твой второй мозг

3 вечера - стек, метод, первый проект

Старт 23–25 июня  ·  2 000 ₽

Записаться →

Новые материалы - дайджестом, без спама

Гайды выходят регулярно. Подпишись, чтобы не пропускать: пришлю подборку в Telegram или на email. Раз в неделю или каждый день - выбираешь сам.

Подписаться в Telegramили на email