В каждом новом проекте приходилось заново объяснять AI-агенту структуру Storybook и требования к компонентам. Чтобы не повторять эту работу вручную, систематизировал процесс в наборе связанных MD-файлов — шаблоне, который задаёт агенту воспроизводимый порядок сборки дизайн-системы.
Главное правило шаблона: не задавать пользователю вопросы, ответы на которые можно надёжно найти самостоятельно — в проекте, Figma, PDF, изображениях или существующем интерфейсе.
Стартовая инструкция задаёт агенту порядок анализа и сборки системы
Шаблон ведёт агента от анализа проекта и входных материалов к foundations, токенам, атомам, составным компонентам, шаблонам страниц, документации и автоматическим проверкам. На выходе получается рабочая дизайн-система в коде, готовая к использованию в продукте.
- Сначала агент читает мастер-спецификацию, дерево документации, локальные инструкции и код, дизайн- и брендовые материалы.
- Затем определяет контекст и пользователей, платформу и технологии, источники дизайна, палитру и типографику, компоненты, UX-паттерны и accessibility, данные и способ публикации Storybook.
Компоненты строятся по зависимостям: от токенов и атомов — к устойчивым композициям и полноценным шаблонам страниц (Foundations → Atoms → Molecules → Organisms → Templates). Сложные компоненты собираются из уже определённых атомов, сохраняя общий API, состояния, accessibility-паттерны и согласованное поведение между уровнями.
Каждый компонент получает единый паспорт: atomic level, purpose, anatomy, variants, states, behavior, accessibility, API, stories, tests. Storybook показывает не только статичные примеры, а варианты, размеры, состояния, темы, длинный контент и адаптивное поведение — и может запускаться на localhost параллельно с продуктом для согласования и проверки.
Foundations → Atoms → Molecules → Organisms → Templates
Единое дерево документации объединяет foundations, компоненты, шаблоны, Storybook, тестирование, governance и инструкции запуска нового проекта — постоянное оглавление, к которому обращается и агент, и любой участник команды.
Структура документационного шаблона
Ниже — не мокап для витрины, а компоненты действующего продукта: образовательной платформы для агроклассов, которую спроектировал и довёл до рабочего Storybook по этому шаблону. Палитра, типографика, формы, статусы и карточки — часть одной системы, а не набор картинок.
Палитра Agro-edu — примитив-шкалы с привязкой к брендбуку
Компоненты Agro-edu: палитра, иконки, типографика, статусы, карточки и формы, собранные из одной библиотеки
- Единообразие: общие компоненты и UX-паттерны уменьшают расхождения между экранами.
- Предсказуемость: документация и Storybook фиксируют состояния и правила применения.
- Воспроизводимость: новый проект не требует заново объяснять агенту структуру системы — шаблон переносится между проектами.
Связанные кейсы: Дизайн-система для MES и Работа с AI-агентами (перенос дизайн-системы Agro-edu в Figma через Codex и MCP).