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

Сайты, которые Claude Code пишет «из коробки», выглядят одинаково: тёмный фон, фиолетовый градиент, sans-serif-заголовок, три карточки с одинаковыми тенями. Тот же макет, что был у первого v0, первого Lovable, первого выхода ChatGPT. Причина простая: без дизайн-системы агент рисует среднее арифметическое всех шаблонов интернета. Чинится это одним файлом.

Берёшь готовый DESIGN.md от Apple, Linear, Stripe или ElevenLabs с бесплатной библиотеки Refero Styles, кладёшь его в проект и просишь Claude писать по этому стилю. Всего в каталоге 2000+ систем. Ниже разберём по шагам: где взять файл, куда его положить, какую строку дописать и какой промпт дать агенту, чтобы страница перестала выглядеть как ИИ-шаблон.

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

Claude Code без явного контекста про цвета, шрифты и spacing рисует усреднённый интерфейс из обучающей выборки. А выборка - это весь интернет на Tailwind, shadcn/ui и тысячах одинаковых посадочных страниц. Модель берёт самый частотный паттерн и выдаёт его. Отсюда и тёмный фон slate-950, и акцент purple-500, и три карточки под копирку.

Возьмём типичный старт нового проекта. Открываешь пустой репозиторий, просишь агента собрать главную страницу. Получаешь классику: тёмный фон, фиолетовый градиент, жирный sans-serif-заголовок, под ним карточки с одинаковыми тенями. Переписываешь промпт пять раз, добавляешь «modern», «premium», «не как у всех» - результат не меняется. Страница всё равно из набора Tailwind UI.

Эффект давно описан. Формулируют его так:

ИИ берёт самый частотный паттерн из обучающей выборки, и вы получаете среднее арифметическое всех шаблонов интернета.

- разбор на Habr, habr.com

Причину ещё точнее объясняет заметка про ИИ-дизайн: инструменты уровня Cursor, Codex и Stitch никогда не видели ни одного конкретного дизайна, они видели статистическое среднее всех дизайнов, опубликованных в сети. То есть Claude не «не умеет» красиво. Он знает, как делает большинство, и воспроизводит большинство.

Чтобы получить не-усреднённый результат, агенту нужны конкретные ограничения: какие цвета взять, какие шрифты, какой spacing, какие компоненты считать каноничными. И вот тут включается дизайн-система как контекст. Разницу между «свёрстай страницу» и «свёрстай страницу в стиле панели Linear» хорошо описывает автор заметок про Refero:

Разрыв между «свёрстай страницу» и «свёрстай страницу в стиле панели управления Linear» огромный, когда работаешь с ИИ-агентами для кодинга.

- Nicolas Deville, notes.nicolasdeville.com

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

Что такое Refero Styles

Refero Styles - библиотека из 2000+ дизайн-систем, снятых с реальных сайтов и упакованных в файлы DESIGN.md. Каждая система - это бренд: Apple, Stripe, Linear, Notion, Vercel, Airbnb, ElevenLabs, Cursor. Заходишь на styles.refero.design, выбираешь бренд, копируешь markdown-файл и вставляешь его в свой проект как контекст для Claude Code, Cursor, Codex, v0 или Lovable.

В каталоге бренды, которые задают визуальный стандарт: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Извлекают их не руками. Команда запускает скрипт, который анализирует реальный CSS и разметку сайта и упаковывает результат в структурированный markdown. Сама библиотека бесплатная.

Точное определение продукта звучит так:

Курируемая библиотека дизайн-систем, извлечённых с реальных сайтов и упакованных в структурированные файлы DESIGN.md.

- Nicolas Deville, notes.nicolasdeville.com

Ключевое слово - «структурированные». В файле нет скриншотов и описания «в стиле минимализма». Там markdown с конкретными hex-цветами, точными размерами шрифтов в пикселях, единицами spacing, правилами для компонентов. Агент читает файл и работает с конкретикой, а не с твоими попытками описать вкус словами. Поддержку команда перечисляет коротко: Cursor, Claude Code, Codex, v0 и Lovable. Один файл подходит всем основным ИИ-агентам для разработки.

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

В одном файле собраны все базовые слои дизайн-системы: палитра в hex с тёмным и светлым режимом, типографика (шрифт, шкала размеров, веса, межстрочные), правила spacing (8px-сетка или другой ритм), описание компонентов (кнопки, карточки, формы), правила motion (анимации, easing) и «brand voice» - тон сообщений. Размер файла от 100 до 400 строк markdown.

Структуру команда описывает так: начни с тона продукта и принципов дизайна, потом определи цвета, типографику, spacing, компоненты, layout, motion, доступность и правила «не используй». Разложим по секциям, что внутри и зачем это агенту.

Есть принцип, который снимает большую часть проблем с ИИ-дизайном:

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

- команда Refero Styles, styles.refero.design

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

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

Схема короткая: ставишь Claude Code, открываешь styles.refero.design, выбираешь бренд, копируешь DESIGN.md в docs/DESIGN.md, в CLAUDE.md добавляешь строку про этот файл и просишь агента собрать страницу. От пустого проекта до рабочей главной уходит около 30 минут. Тут важно: это конкретная последовательность с одной командой на каждый шаг, а не абстрактные «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 - нужна свежая, в новых версиях появились точечные разрешения на инструменты и блокировка опасных git-команд в авто-режиме. Дальше запусти claude, он проведёт по входу под аккаунтом. Claude Code входит в подписку Claude Pro - примерно $20/мес (при годовой оплате чуть дешевле). Если ставишь впервые и хочешь без спешки разобрать установку по шагам с картинками, держи под рукой отдельный разбор как собрать сайт нейросетью с нуля.

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

Зайди на 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 работает точкой сборки для всех правил проекта, и импорты в нём - штатный способ подтянуть отдельные документы.

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

Не «сделай красиво». Конкретно, с прямой отсылкой к файлу:

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

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

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

Смотри на плотность и тон продукта, имя бренда тут вторично. SaaS-инструмент для команды с плотным UI и большим количеством данных - Linear или Vercel. Финансовый продукт, где важны доверие и точность - Stripe, Mercury, Column. Потребительский продукт с теплом и эмоцией - Duolingo, Notion, Airbnb. ИИ или dev-tool с минимализмом и тёмной темой - ElevenLabs, xAI, Modal. Сомневаешься - бери Linear как универсальный безопасный выбор.

Почему это важно. У Apple и Linear разные стили, но оба работают для SaaS-панелей с большим объёмом информации. А теперь возьмём обратный случай. Тебе нравится визуал Apple, ты берёшь его DESIGN.md и делаешь финансовую панель для бухгалтерии. Получаешь шрифты SF Pro, спокойную палитру и много воздуха - и пользователь видит четыре строки данных там, где их должно быть тридцать. Apple хорош для минималистичных портфолио и презентаций продукта, а не для плотных операционных интерфейсов.

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

Совсем сомневаешься - бери Linear. У него самая универсальная база: нейтральная палитра, читабельная типографика, сдержанный spacing. Сайт на его основе выглядит профессионально на девяти типах продуктов из десяти. Если после стиля хочется дособрать саму визуалку без дизайнера, есть подборка ИИ-инструментов для дизайна без дизайнера под каждый стык - от первого экрана до токенов.

Зачем держать DESIGN.md в постоянном контексте проекта

DESIGN.md - не разовый артефакт под одну задачу. Это часть постоянного контекста проекта, как CLAUDE.md и папка business/. Пока файл лежит в репозитории, любой сессии Claude, любому участнику команды, любому новому агенту (Codex, Cursor, Gemini CLI) доступен один и тот же визуальный канон. Решение принято один раз - палитра, типографика, ритм spacing. Дальше любой агент берёт это как данность.

Через месяц ты попросишь добавить новую страницу - агент откроет тот же файл и сделает в том же стиле. Через полгода отдашь проект другому человеку - он запустит Claude и получит согласованный результат, потому что файл лежит в репозитории. Хорошо это сформулировал разбор про Open Design и Claude Code:

Design-as-code в буквальном смысле, а не в маркетинговом.

- Arseniy Savin, habr.com

То есть дизайн живёт в виде кода (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

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

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

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

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

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

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

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

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

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

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

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

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

Общий принцип всех четырёх ошибок формулируют так:

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

- Nicolas Deville, notes.nicolasdeville.com

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

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

Базовый workflow у тебя в руках: Claude Code плюс DESIGN.md от Refero плюс четыре шага - и сайт перестаёт быть шаблоном. Это закрывает большую часть задач. Дальше есть куда расти, если нужно точнее, быстрее или с автопроверкой. Три направления.

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

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

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

Чек-лист: что у тебя теперь есть

• Стоит Claude Code свежей версии, вход под аккаунтом выполнен
• Выбран бренд под тип продукта, а не «по картинке», и скопирован его DESIGN.md
• Файл лежит в docs/DESIGN.md, в CLAUDE.md прописан импорт @docs/DESIGN.md
• Промпт на страницу конкретный и с прямой отсылкой «возьми цвета и spacing из DESIGN.md»
• Собрана первая главная в узнаваемом стиле бренда, без тёмного фона и фиолетового акцента по умолчанию
• Понятно, какие четыре ошибки откатывают результат в шаблон, и как каждую обойти
• Ясно, куда расти дальше: Frontend Design Skill, Refero MCP, связка с остальным контекстом проекта