Готовый промпт · На русском

Сборка CLAUDE.md

Ты собираешь окончательный справочный файл дизайн-системы CLAUDE.md. Этот файл будет находиться в корне проекта и служить единственным источником достоверных сведений для…

Готовый промпт

Скачать шаблон .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 следует обновить
в соответствии с реальностью — никогда не наоборот. Он документирует то, что ЕСТЬ,
а не то, что ДОЛЖНО БЫТЬ (для этого существует отдельная дорожная карта).

Что сделать после копирования

Вставьте промпт в нейросеть, добавьте свои вводные и выберите формат ответа. Для фото или видео понадобится модель с поддержкой этой задачи. Проверьте результат и уточните запрос при необходимости.