Claude Code 
OpenDesign Как проектировать интерфейсы с Claude Code в OpenDesign: CLAUDE.md и skill Frontend Design как ограничения, одна задача настроек рабочего пространства от брифа до проверенного файла, и где заканчивается обмен файлами с Figma.
«Настройки рабочего пространства, следующие
нашим токенам, а не шаблону.»
ТРИ СПОСОБА НАЧАТЬ С ЭТИМ РУКОВОДСТВОМ ПО CLAUDE CODE
Это руководство: бриф, референсы, правила дизайна и проверенный результат в HTML.
Читать это руководство НАСТРОЙКАВот полный путь от чистой машины до Claude Code, способного создавать и проверять UI.
Перейти к настройке СРАВНЕНИЕЧем Claude Code отличается от Codex, Cursor для дизайн-работы, и когда выбрать другой workflow.
Посмотреть сравнениеОдна полная дизайн-задача в Claude Code
Одна задача, показанная от начала до конца: бриф и ограничения, которые вы передаёте, артефакт, который вы получаете, и проверки, которые вы всё равно выполняете перед завершением. Интерфейс ниже — иллюстративный пример, созданный для этой страницы, а не записанный запуск Claude Code.
БрифСпроектируйте область настроек рабочего пространства для небольшой SaaS-команды: общие настройки, участники, уведомления и оплата. Используйте токены из CLAUDE.md; никаких вручную подобранных значений. Должно работать на десктопе и на телефоне.
data-od-idПишете бриф, выбираете дизайн-систему и определяете критерии приёмки.
Планирует макет, пишет HTML, CSS и JavaScript и корректирует по запросу.
Предоставляет дизайн-систему и skill, рендерит превью и сохраняет каждую версию как файл в проекте.
Перед передачей проверяются визуальная иерархия, отступы по сетке 8px, оба брейкпоинта и каждое взаимодействие.
Подменю, форма и действия расположены на сетке 8px; закреплённая панель сохранения никогда не перекрывает поле.
Заголовки групп важнее подписей; акцент отмечает включённые тумблеры и ничего больше.
Вложенная навигация становится сегментированным переключателем; тумблеры сохраняют область нажатия 44px; кнопка сохранения растягивается на всю ширину.
Пройдите по всем полям через Tab, переключите тумблер, отмените и подтвердите запрос о несохранённых изменениях.
Fit
Совместимость
В этом руководстве рассматривается Claude Code при подключении через desktop-приложение OpenDesign. Опубликованные источники проверены 6 сентября 2026 года.
Claude Code — это агентный инструмент командной строки от Anthropic: вы описываете задачу на естественном языке, и он читает, пишет и запускает код в вашем проекте, пока задача не будет выполнена. Эта страница о проектировании интерфейсов с Claude Code через OpenDesign, а не о собственном интерфейсе Claude Code. Заметки по настройке OpenDesign перечисляют доступных агентов.
API-ключ Anthropic (BYOK) или подписка Claude. Авторизуйтесь с помощью своего API-ключа Anthropic (BYOK) или подписки Claude — ничего не проксируется через нас. Эта страница не гарантирует квоту или цену.
Поверхности: терминал CLI, расширения VS Code / Cursor / JetBrains, десктопное приложение, веб. Проверьте страницу загрузки для десктопных сборок. Требования Node.js и pnpm в исходном quickstart относятся к запуску из исходного кода, а не к установке десктопного пакета. Минимальная совместимая версия Claude Code: здесь не проверена.
Следуйте инструкциям по подключению, показанным вашей установленной версией, затем запустите небольшую задачу. Убедитесь, что Claude Code справился с ней и что артефакт открывается. Одной загрузки недостаточно для установления рабочего подключения.
Начните с десктопного приложения
Сначала загрузите, завершите настройку Claude Code для вашей установленной версии, затем проверьте небольшой результат. Вам не нужно собирать OpenDesign из исходного кода, чтобы пройти этот путь.
Выберите пакет для вашего компьютера, установите его и откройте приложение.
Скачать OpenDesignСледуйте инструкциям Claude Code в вашей установленной версии. Авторизуйтесь с помощью своего API-ключа Anthropic (BYOK) или подписки Claude — ничего не проксируется через нас.
anthropics/skills — skill frontend-design# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex
# 2. Start it in your project and sign in on first run
cd your-project
claude # sign in with your Claude subscription or API keyИз заметок по настройке Claude Code в опубликованном руководстве; актуальную команду проверяйте в документации производителя.
Используйте небольшой бриф, чтобы оценить весь цикл, включая одну доработку.
Создайте экран настроек с формой профиля и подтверждением сохранения. Используйте мои правила дизайна. Проверьте на ширинах для десктопа и мобильных устройств.
Чтобы запустить OpenDesign из исходного кода, следуйте техническому quickstart.
Рабочий процесс дизайна в Claude Code
Та же задача с экраном настроек, пройденная от брифа до проверенного файла. Каждый шаг описывает, что предоставляете вы, что делает Claude Code, что добавляет OpenDesign и что вы проверяете.
Простой язык, от трёх до шести строк. Укажите аудиторию, задачу экрана и платформы.
Дизайн-система и несколько строгих правил. Именно это отличает результат в стиле бренда от универсального вида.
Claude Code пишет самодостаточный HTML-файл: разметку, стили, интерактивность и стабильные хуки.
Файл отображается внутри OpenDesign при указанных вами ширинах. Именно здесь оценивается дизайн.
data-od-id для комментариев и правок.Запрашивайте изменения, указывая на элементы в предпросмотре. Каждая правка — это новый файл; ничего не перезаписывается тихо.
Ресурсы
Руководства, документация и разборы по дизайну с Claude Code, перечисленные в опубликованном гайде.
Типы продуктов, которые Claude Code может создавать в OpenDesign — по одному skill на тип.
Токены бренда и компоненты, которые нужно привязать до того, как Claude Code начнёт что-либо генерировать.
Отправные точки для презентаций, лендингов и экранов продукта.
Ограничения
Вопросы и ответы
Начните с небольшой задачи, оцените результат обмена, а затем переходите к реальному брифу. Выберите вариант, соответствующий вашей настройке; страница не определяет её автоматически.