Сборка CLAUDE.md
Ты собираешь окончательный справочный файл дизайн-системы CLAUDE.md. Этот файл будет находиться в корне проекта и служить единственным источником достоверных сведений для…
Подставьте свои данные
Поля необязательны. Заполненные значения попадут в текст при копировании, остальные шаблоны сохранятся.
Ты собираешь окончательный справочный файл дизайн-системы CLAUDE.md.
Этот файл будет находиться в корне проекта и служить единственным источником
достоверных сведений для любого ИИ-помощника (или разработчика-человека), работающего с этой кодовой базой.
## Входные данные
- **Архитектура токенов:** [Результат этапа 2]
- **Документация компонентов:** [Результат этапа 3]
- **Метаданные проекта:**
- Название проекта: ${name}
- Технологический стек: [Next.js 14+ / React 18+ / Tailwind 3.x / и т. д.]
- Версия Node: ${version}
- Менеджер пакетов: [npm / pnpm / yarn]
## Структура CLAUDE.md
Собери итоговый файл со следующими разделами В УКАЗАННОМ ПОРЯДКЕ:
### 1. Идентичность проекта
- Название, описание и позиционирование проекта
- Краткое описание технологического стека (одна таблица)
- Обзор структуры каталогов (устройство src/)
### 2. Краткая справочная карточка
Сжатая шпаргалка — самая часто нужная информация с первого взгляда:
- Основные цвета со значениями hex (максимум 6)
- Набор шрифтов
- Шкала отступов (визуальное представление: 4, 8, 12, 16, 24, 32, 48, 64)
- Контрольные точки
- Значения радиуса скругления границ
- Значения теней
- Карта z-index
### 3. Дизайн-токены — Полный справочник
По уровням (примитивные → семантические → компонентные).
Для каждого токена: имя, значение, переменная CSS, эквивалентный класс Tailwind.
Используй таблицы для удобства быстрого просмотра.
### 4. Типографическая система
- Таблица типографической шкалы (название, размер, насыщенность, line-height, letter-spacing, использование)
- Правила адаптивности
- Стратегия загрузки шрифтов
### 5. Цветовая система
- Полная палитра с описанием образцов (название, hex, контекст использования)
- Таблица соответствий семантических цветов
- Соответствия для тёмной темы (если применимо)
- Примечания о соответствии требованиям к коэффициенту контрастности
### 6. Система компоновки
- Спецификация сетки
- Ширина контейнеров
- Система отступов с визуальной шкалой
- Поведение на контрольных точках
### 7. Библиотека компонентов
[Вставь результат этапа 3 для каждого компонента]
### 8. Движение и анимация
- Таблица именованных пресетов (название, длительность, функция изменения скорости, использование)
- Правила: когда анимировать, а когда нет
- Ограничения производительности
### 9. Соглашения о коде
- Шаблоны именования файлов
- Порядок импортов
- Шаблон структуры файла компонента
- Соглашение о порядке классов CSS (при использовании Tailwind)
- Используемые подходы к управлению состоянием
### 10. Правила и ограничения
Жёсткие правила, которые нельзя нарушать:
- «Никогда не используй цвета hex напрямую — всегда ссылайся на токены»
- «Все интерактивные элементы должны иметь видимые состояния фокуса»
- «Минимальная область касания: 44x44px»
- «У всех изображений должен быть alt-текст»
- «Никаких значений z-index вне заданной шкалы»
- [Добавь правила, специфичные для проекта]
## Требования к оформлению
- Используй таблицы Markdown для всех соответствий токенов и значений
- Используй блоки кода для всех примеров кода
- Каждый раздел должен быть самодостаточным (понятным без прокрутки к другим разделам)
- Включи в начало оглавление с якорными ссылками
- Максимальная длина строки: 100 символов для удобства чтения
- Предпочитай явные значения отсылкам «см. выше»
## Ключевое правило
Этот файл должен быть АВТОРИТЕТНЫМ ИСТОЧНИКОМ. Если между
CLAUDE.md и фактическим кодом возникает неоднозначность, CLAUDE.md следует обновить
в соответствии с реальностью — никогда не наоборот. Он документирует то, что ЕСТЬ,
а не то, что ДОЛЖНО БЫТЬ (для этого существует отдельная дорожная карта).Текст доступен бесплатно по CC0 1.0. Источники и лицензии.
Что сделать после копирования
Вставьте промпт в нейросеть, добавьте свои вводные и выберите формат ответа. Для фото или видео понадобится модель с поддержкой этой задачи. Проверьте результат и уточните запрос при необходимости.