Один файл - и Claude верстает в стиле настоящего бренда, а не как получится

Выбери бренд под свой проект

Куда нажать. Открой designmd.app/library (весь каталог с фильтрами по стилю и эпохе) или сразу designmd.app/brands (только разборы реальных компаний)

Что увидишь. Карточки: имя, категория стиля, три коротких тега и маленькое превью. На /brands - список настоящих брендов: Vercel, Atlassian, Nubank, Clerk, Mintlify, Resend, Nuxt и другие

Что это даёт. Выбираешь не абстрактный «красивый стиль», а конкретный визуальный язык, уже проверенный на живом продукте

Скачай или скопируй файл

Куда нажать. Открой карточку выбранного бренда. На странице - палитра цветов, шрифты и блок с двумя кнопками: Download DESIGN.md и Copy DESIGN.md

Что увидишь. Либо файл сохранится на компьютер, либо весь текст файла скопируется в буфер обмена - выбирай что удобнее

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

Положи файл в корень проекта

Куда нажать. Сохрани файл под именем DESIGN.md в главной папке проекта, там же, где лежит файл CLAUDE.md (если такого файла ещё нет, создай пустой рядом)

Что увидишь. В списке файлов проекта появился DESIGN.md на одном уровне с CLAUDE.md, не внутри вложенных папок

Что это даёт. Claude Code читает файлы из корня проекта в первую очередь. Файл, спрятанный глубоко в подпапках, агент может не найти сам

Впиши одну строку в CLAUDE.md

Куда нажать. Открой CLAUDE.md и добавь строку:

Что увидишь. Обычная строка текста в файле, который Claude Code читает при старте каждой сессии

Что это даёт. Значок @ перед именем файла не украшение, это прямая ссылка на файл. Без него агент прочитает «DESIGN.md» как случайные буквы, а не как команду открыть файл

Дай агенту обычную задачу

Куда нажать. Попроси то, что просил бы всегда: «сделай главный экран», «собери карточку товара», «сверстай форму регистрации» - без напоминаний про стиль

Что увидишь. Агент сам подтягивает цвета, шрифты и отступы из DESIGN.md, не спрашивая, какой дизайн ты хочешь

Что это даёт. Интерфейс в выбранном стиле за минуты, а не за вечер правок и споров «нет, не то, попробуй ещё»

Проверь, что стиль реально подхватился

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

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

Что это даёт. Уверенность, что дизайн-система реально работает, а не просто лежит в проекте мёртвым файлом

Если стиль не подхватился

Три вещи, которые проверить по порядку:

1. Файл лежит не в корне проекта, а в подпапке - перенеси в корень, рядом с CLAUDE.md
2. В строке ссылки забыт значок @ перед именем файла - без него ссылка не работает
3. Задача была дана агенту до того, как строка попала в CLAUDE.md - начни новый диалог с агентом после правки файла