Структура Figma
Страницы, наборы компонентов, варианты, нейминг, примеры и известные расхождения.
ven1aone ~ %Настройка Claude Design
Контекст дизайн-системы для Claude Design
Помогаю подготовить контекст дизайн-системы для Claude Design: инвентарь компонентов, дизайн-токены, правила использования, структуру Figma, ссылки на Storybook, примеры и ограничения — чтобы генерация UI перестала напоминать лотерею.
ven1aone ~ %Зачем это нужно
Claude Design работает лучше с продуктовым контекстом
Смысл работы — описать дизайн-систему явно: какие компоненты есть, когда их использовать, какие варианты допустимы, где живут токены и что Claude Design лучше не выдумывать.
ven1aone ~ %Входные материалы
С чем я работаю на входе
Текущая документация
Правила использования и внесения изменений, заметки по доступности и продуктовые паттерны.
Контекст кода
React-компоненты, стори в Storybook, структура пакетов, свойства, состояния и файлы токенов.
ven1aone ~ %Карта системы
Карта компонентов, токены и правила
Карта компонентов
Практичный инвентарь компонентов, вариантов, состояний, владельцев и рекомендованного использования.
Дизайн-токены
Цвет, типографика, отступы, радиусы, тени (elevation) и семантические токены, объяснённые так, чтобы ИИ-инструменты могли их переиспользовать.
Правила и ограничения
Что делать и чего не делать: требования по доступности, ограничения вёрстки и паттерны, которые генерировать не нужно.
ven1aone ~ %Результаты
Что получает команда
Markdown для ИИ
Файлы контекста для Claude Design и соседних ИИ-инструментов — по сути рабочие инструкции по вашей дизайн-системе.
Бриф по дизайн-системе
Короткий документ о вашем продуктовом языке: токены, компоненты, ограничения и главные договорённости.
Чек-лист внедрения
Список пробелов в Figma, Storybook, токенах, документации или React-компонентах — и что чинить в первую очередь.
Что важно учесть
- Claude Design всё равно может ошибаться. Контекст улучшает исходные данные, но каждый сгенерированный экран нужно проверять.
- За продуктовую логику и доступность по-прежнему отвечают люди — эту часть работы снять нельзя.
- Мне нужны настоящие компоненты и правила, о которых команда договорилась. Выдумывать систему на ходу я не буду.
FAQ
Нужна ли готовая дизайн-система до старта?
Нет. Можно начать с сырой библиотеки в Figma, недособранного Storybook или просто React-компонентов. Первым шагом разберём, что работает, чего не хватает, что дублируется и что опасно отдавать ИИ как контекст.
Можно ли подключить React-компоненты и Storybook?
Да. Контекст для Claude Design сильнее, когда он связан с React-компонентами, стори в Storybook, свойствами, состояниями и дизайн-токенами.
Это гарантирует, что ИИ будет генерировать хорошие экраны?
Гарантий здесь не даёт никто. Claude Design получает ясный контекст системы, ограничения и примеры — ревью становится проще, а случайные решения заметны сразу.
С чего начинается работа?
С короткого созвона и текущих материалов: Figma-библиотека, Storybook, документация или React-компоненты. Первый результат — карта системы с пометками, на что уже можно опираться, а что сначала привести в порядок.
Сколько это занимает?
Аудит — обычно 1–2 недели. Настройка контекста с картой компонентов, заметками по токенам и правилами для Figma и Storybook — 2–4 недели, в зависимости от размера системы.
Можно работать удалённо и асинхронно?
Да. Я живу на Кипре и работаю удалённо, часовой пояс EET. Большая часть общения — асинхронно, а по времени удобно пересекаться с Европой и восточным побережьем США.
Хотите обсудить такую работу?
Напишите в Telegram или LinkedIn. Если привычнее почта — пишите на неё, отвечаю и там.