01 · Выбери
Найди стиль
Смотри не только на цвет. Проверь типографику, плотность, формы карточек и настроение.
Бесплатная инструкция · DESIGN.md
Один файл, чтобы ИИ не придумывал дизайн с нуля.
Выбери стиль сайта, скачай его визуальные правила и передай ИИ вместе с проектом. Ниже — как сделать это в Flashbag, Claude Code и Codex.
DESIGN.mdsource of truth
colors
type
spacing
buttons
cards
Кратно · практичные ИИ-системы
Меньше рутины. Больше жизни.02 · Передай
Добавь DESIGN.md
Положи файл рядом с проектом или прикрепи его к задаче как главный визуальный ориентир.
03 · Собери
Дай ИИ контекст
Добавь тексты, фото и ограничения. ИИ применит язык дизайна к твоему сайту, а не скопирует чужой.
Перед стартом
Подготовь два файла и папку с материалами.
Сам DESIGN.md не знает, о чём твой сайт. Ему нужны твои тексты, фотографии и текущий проект — если сайт уже существует.
Где взять стиль
Refero Styles
Открой понравившийся пример, прочитай описание и скачай DESIGN.md. Для тестового редизайна Кратно я выбрала стиль Superpower.
Выбрать стиль ↗Минимальная структура
Сложи всё в один проект
мой-сайт/ ├── DESIGN.md ├── тексты.md ├── images/ └── файлы-сайта/
Пошагово
Выбери, где собираешь сайт.
Логика везде одна: дать ИИ доступ к проекту, попросить сначала прочитать DESIGN.md, а затем применить систему к твоему контенту.
Открой отдельный чат для сайта
Если сайт уже есть, выбери агента, у которого есть доступ к папке проекта. Для нового сайта начни с пустой рабочей папки.
Добавь источники
Прикрепи DESIGN.md, тексты и изображения. Если работаешь с существующим сайтом, укажи его папку как источник.
Отправь готовый промт
Возьми промт ниже. Замени текст в квадратных скобках, но оставь требования про адаптивность, проверку и отдельное согласование публикации.
Смотри preview, а не только скриншот
Попроси ссылку на локальную версию для компьютера и телефона. Сначала проверь лицо на фото, длину заголовков, меню, кнопки и горизонтальный скролл.
Положи DESIGN.md в корень проекта
Файл должен лежать рядом с основными файлами сайта. Так Claude Code сможет прочитать его прямо из рабочей папки.
Запусти Claude Code в этой папке
cd путь/к/проекту claude
Сошлись на файле в задаче
Начни запрос со слов: «Сначала полностью прочитай @DESIGN.md». Затем вставь готовый промт ниже.
Закрепи правило для следующих сессий
В корневом CLAUDE.md добавь импорт и короткое правило. Тогда дизайн-система будет подхватываться при каждом новом запуске.
@DESIGN.md ## Визуальные изменения - Считай DESIGN.md главным источником правил для цветов, типографики, сетки и компонентов. - Не публикуй сайт без отдельного подтверждения.
Открой папку сайта в Codex
Это может быть приложение, расширение для редактора или CLI. Важно, чтобы рабочей папкой был корень проекта, где лежит DESIGN.md.
Дай прямую инструкцию
Напиши: «Сначала полностью прочитай DESIGN.md, затем изучи текущую структуру сайта». После этого вставь готовый промт ниже.
Закрепи правило в AGENTS.md
Codex автоматически читает AGENTS.md. Добавь туда короткое правило — не нужно копировать весь DESIGN.md второй раз.
## Дизайн - Перед любыми визуальными изменениями прочитай DESIGN.md полностью. - Считай его главным источником правил для цветов, типографики, сетки и компонентов. - Не публикуй сайт без отдельного подтверждения.
Попроси проверку результата
Codex должен показать путь или ссылку на результат и перечислить проверки. Для сайта попроси desktop и mobile preview, проверку ссылок, меню и переполнения по ширине.
Можно копировать
Готовый промт для всех трёх инструментов.
Он подходит и для нового сайта, и для редизайна. Замени только четыре фрагмента в квадратных скобках.
site-redesign-prompt.txt
Ты работаешь над [новым сайтом / редизайном существующего сайта] для [что это за проект]. Сначала полностью прочитай DESIGN.md. Затем изучи текущие файлы проекта, тексты и изображения. Используй DESIGN.md как главный источник визуальных правил: - извлеки из него цвета, типографику, сетку, отступы, формы, кнопки, карточки и характер изображений; - перенеси визуальный язык на мой контент, но не копируй чужие логотипы, тексты, фотографии и бренд; - не добавляй новые цвета, шрифты, тени и скругления без причины; - сохрани существующие тексты, ссылки и функции, если я отдельно не попросил изменить их; - сделай страницу адаптивной для компьютера и телефона; - используй мои фотографии из [папка или имена файлов]; - основные страницы: [перечень страниц]; - главное действие на сайте: [что должен сделать посетитель]. Сначала коротко перечисли правила, которые ты извлёк из DESIGN.md, и план изменений. После этого сразу собери рабочую версию. Перед финалом проверь: 1. нет ли горизонтального скролла; 2. полностью ли видны лица на фотографиях; 3. работают ли меню, кнопки и ссылки; 4. читается ли текст на мобильном; 5. нет ли ошибок в консоли. Покажи preview для компьютера и телефона. Ничего не публикуй и не отправляй в main без моего отдельного подтверждения.
!
DESIGN.md — это не готовый шаблон сайта.
Он задаёт визуальную систему, но не знает твой продукт, структуру и контент. Чем точнее исходные тексты и фотографии, тем меньше ИИ будет заполнять пробелы случайными решениями.
Перед публикацией
Проверь четыре вещи глазами.
DESIGN.md сильно улучшает старт, но последняя проверка всё равно остаётся за человеком.
Сайт узнаваемо твой: со своими текстами, фото и логикой, а не дубль референса.
Открой главные страницы на компьютере и телефоне. Не доверяй только одному скриншоту.
Проверь меню, кнопки, формы, ссылки и путь посетителя от первого экрана до результата.
Лица не обрезаны, заголовки не вылезают, карточки не ломают сетку, горизонтального скролла нет.
Следующий шаг
Выбери стиль. Всё остальное уже есть выше.
Сохрани эту страницу, скачай один DESIGN.md и протестируй его сначала на одной странице — так быстрее понять, подходит ли тебе визуальное направление.