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

Набор промптов для извлечения дизайн-системы

Ты — старший инженер по дизайн-системам, проводящий детальный исследовательский аудит существующей кодовой базы. Твоя задача — извлечь все заложенные в коде дизайнерские…

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

Скачать шаблон .md
Ты — старший инженер по дизайн-системам, проводящий детальный исследовательский аудит существующей кодовой базы. Твоя задача — извлечь все заложенные в коде дизайнерские решения, явные и неявные.

## Контекст проекта
- **Фреймворк:** [Next.js / React / и т. д.]
- **Подход к стилизации:** [Tailwind / CSS Modules / Styled Components / и т. д.]
- **Библиотека компонентов:** [shadcn/ui / собственная / MUI / и т. д.]
- **Расположение кодовой базы:** [путь или «загруженные файлы»]

## Область извлечения

Проанализируй всю кодовую базу и извлеки следующие сведения в структурированный JSON-отчёт:

### 1. Цветовая система
- Все используемые значения цветов (hex, rgb, hsl, переменные CSS, классы Tailwind)
- Группировка: основные, второстепенные, акцентные, нейтральные, семантические (успех/предупреждение/ошибка/информация)
- Отметь несогласованности (например, 3 разных серых цвета для границ)
- Укажи варианты прозрачности и соответствия для тёмной темы, если они есть
- Извлеки фактические определения переменных CSS и их резервные значения

### 2. Типографика
- Семейства шрифтов (загружаемые шрифты, цепочки запасных шрифтов, импорты Google Fonts)
- Размеры шрифта (каждый уникальный используемый размер в px/rem/классах Tailwind)
- Насыщенность шрифта, используемая для каждого семейства
- Межстрочные интервалы в сочетании с каждым размером шрифта
- Значения межбуквенного интервала
- Стили текста как используемые сочетания (например, «heading-large» = Inter 32px/700/1.2)
- Правила адаптивной типографики (размеры для мобильных устройств и настольных компьютеров)

### 3. Отступы и компоновка
- Шкала отступов (каждое используемое значение margin/padding/gap)
- Ширина и максимальная ширина контейнеров
- Система сетки (столбцы, межколонники, контрольные точки)
- Определения контрольных точек
- Слои z-index и их назначение
- Значения радиуса скругления границ

### 4. Перечень компонентов
Для каждого найденного переиспользуемого компонента:
- Название компонента и путь к файлу
- Интерфейс props (типы TypeScript, если доступны)
- Визуальные варианты (размер, цвет, состояние)
- Используемые токены внутренних отступов и размеров
- Зависимости от других компонентов
- Число использований в кодовой базе (приблизительно)

### 5. Движение и анимация
- Длительности переходов и функции изменения скорости
- Ключевые кадры анимации
- Переходы между состояниями hover/focus/active
- Шаблоны переходов между страницами
- Анимации, зависящие от прокрутки (если используется библиотека вроде Framer Motion или GSAP)

### 6. Иконки и ресурсы
- Система иконок (Lucide, Heroicons, собственные SVG и т. д.)
- Используемые размеры иконок
- Варианты фавикона и логотипа

### 7. Отчёт о несогласованностях
- Повторяющиеся значения, которые должны стать токенами (например, `#1a1a1a` используется 47 раз, но не задан переменной)
- Противоречащие друг другу подходы (например, размеры одних кнопок определяются отступами, а других — фиксированной высотой)
- Отсутствующие состояния (компоненты без состояний hover/focus/disabled)
- Недостатки доступности (нет обводки фокуса, недостаточный цветовой контраст)

## Формат вывода

Верни один JSON-объект с такой структурой:
{
  "colors": { "primary": [], "secondary": [], ... },
  "typography": { "families": [], "scale": [], "styles": [] },
  "spacing": { "scale": [], "containers": [], "breakpoints": [] },
  "components": [ { "name": "", "path": "", "props": {}, "variants": [] } ],
  "motion": { "durations": [], "easings": [], "animations": [] },
  "icons": { "system": "", "sizes": [], "count": 0 },
  "inconsistencies": [ { "type": "", "description": "", "severity": "high|medium|low" } ]
}

Пока НЕ пытайся ничего упорядочивать или улучшать.
НЕ предлагай названия токенов или реструктуризацию.
Просто извлеки то, что существует, в точности как есть.

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

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