Ресурсы / Дизайн-системы

Дизайн-системы,
Готово для AI-агента.

Изучайте палитры, типографику, компоненты, макеты и полные руководства по дизайну. Сравнивайте визуальные направления, знакомьтесь с правилами и используйте подходящие примеры в своих проектах.

152 Существующие руководства126 Новые руководстваDESIGN.md + справочные материалы по токенам

Изучайте дизайн-системы и визуальные стили

278 элементов каталога
◒ AcmeОбзор   Настройки
НАСТРОЙКИ РАБОЧЕГО ПРОСТРАНСТВАМесто для вашей работы.
Acme Design
Закрытое рабочее пространство⌄

Radix Themes

Новое руководство

Практический справочник по интерфейсам продуктов: настраиваемые цвета, шкала типографики и отступов из девяти шагов, состояния компонентов и полное руководство для AI-агента.

Руководство из 9 глав
исследование интерфейса Adeo Mozaic

Adeo Mozaic

Новое руководство

Создайте практичный интерфейс управления количеством с шагом Mozaic в 16px, единообразными элементами управления высотой 48px, реальными SCSS-импортами и классами BEM. Планировщик материалов позволяет проверить ограничения, типизированные ошибки и локальную сводку материалов.

Руководство из 8 глав
исследование интерфейса Adobe Spectrum

Adobe Spectrum

Новое руководство

Изучите Spectrum v3 от React на примере таблицы творческих ресурсов с возможностью выбора и панели настройки экспорта. Разберитесь в темах Provider и масштабе полей ввода, поддерживаемых стилевых свойствах, коллекциях с ключами и различиях между v3 и более новой реализацией Spectrum 2.

Руководство из 9 глав
исследование интерфейса Agriculture Design System

Agriculture дизайн-система

Новое руководство

Создавайте многоэтапные сценарии обслуживания с помощью конкретных значений отступов AgDS, адаптивных свойств и модели статусов TaskList. Попробуйте подготовительный процесс, где этап проверки становится доступен только после выполнения предварительных условий.

Руководство из 8 глав
исследование интерфейса Alaska Airlines Auro

Alaska Airlines Auro

Новое руководство

Изучите тему Alaska от Auro на примере реальных семантических цветовых и типографических токенов, типографики на основе классов и встроенного компонента рейса. Две исходные записи о рейсах демонстрируют локальную фильтрацию и выбор, не изображая инвентарь авиакомпании или бронирование.

Руководство из 8 глав39 ссылок
исследование интерфейса Alberta Design System

Alberta дизайн-система

Новое руководство

Используйте встроенные веб-компоненты Alberta и опубликованные токены дизайна, чтобы создать полный контрольный список подготовки с доступными вариантами, вычисляемым прогрессом и понятными результатами проверки.

Руководство из 6 глав33 ссылки
исследование интерфейса Arco Design

Arco Design

Новое руководство

Создайте селектор разделов отчёта с управляемым компонентом Transfer от Arco. Изучите реальные шкалы отступов и размеров, принципы именования переменных CSS, семантические поверхности и различие между выбором строк и их перемещением.

Руководство из 8 глав37 ссылок
исследование интерфейса Ariakit

Ariakit

Новое руководство

Ariakit предоставляет неоформленные компоненты React с явно заданным общим состоянием и доступными составными элементами. Компонент combobox отделяет ввод текста от подтверждённого выбора, поэтому подходит для средств выбора с поиском; расположенный ниже справочник демонстрирует эту разницу на сгруппированных и недоступных результатах.

Руководство из 9 глав29 ссылок
исследование интерфейса Atlassian Design System

Atlassian дизайн-система

Новое руководство

Создайте доску планирования задач с семантическими токенами Atlassian, шкалой отступов с шагом восемь пикселей, реальными API Button, Lozenge и Toggle и необходимой настройкой стилизации Compiled. Откройте задачу, отфильтруйте доску и переместите локальный рабочий элемент, не путая выбор со статусом.

Руководство из 9 глав46 ссылок
исследование интерфейса Backbase Design System

Backbase дизайн-система

Новое руководство

Создайте фирменный сценарий проверки банковской операции с модулями Backbase для Angular, семантическим экспортом темы и явно заданными состояниями проверки. Сравните веб-API с отдельно описанными размерами для нативных платформ.

Руководство из 7 глав32 ссылки
исследование интерфейса Bits UI

Bits UI

Новое руководство

Bits UI предоставляет компоненты Svelte без предустановленной разметки, которые можно объединять с помощью встроенных частей и состояния Svelte 5. В примере сочетаются флажок с вычисляемым смешанным состоянием, независимо раскрываемые секции аккордеона и диалоговое окно проверки на основе портала; конфигурация стилизации приведена полностью.

Руководство из 9 глав28 ссылок
исследование интерфейса Bootstrap

Bootstrap

Новое руководство

Используйте Bootstrap 5.3.8 и его реальную шкалу отступов, семантические цвета, адаптивную сетку и API компонентов. Проверьте работающую форму бронирования, сводку ошибок, фильтр таблицы, модальное окно и переключатель цветовой схемы, а затем используйте приведённый код.

Руководство из 8 глав66 ссылок
исследование интерфейса Chakra UI

Chakra UI

Новое руководство

Справочник по Chakra UI v3: токены, семантические роли цветов, рецепты и составные компоненты форм. Изучите реальные шкалы отступов и типографики, а затем попробуйте встроенную форму профиля рабочего пространства с валидацией, имитацией ошибки сохранения и светлым и тёмным оформлением.

Руководство из 9 глав47 ссылок
исследование интерфейса Dell Design System

Dell дизайн-система

Новое руководство

Создайте поиск устройств с ограниченной областью поиска с помощью DDS v3: семантические цвета, адаптивная типографическая шкала, токены отступов и композиция InputGroup, поведение фильтрации которой задаётся приложением.

Руководство из 9 глав38 ссылок
исследование интерфейса Det Fælles Designsystem

Det Fælles Designsystem

Новое руководство

Изучите тему DKFDS для Дании, реальные шкалы Sass и доступные шаблоны таблиц на примере полного сравнения ресурсов с сортировкой по числам, поиском по отправленному запросу и восстановлением после пустого результата.

Руководство из 6 глав33 ссылки
исследование интерфейса DSFR

DSFR

Новое руководство

Изучите характерные для дизайн-системы французского государства типографику, сетку и аккордеон API в рамках её институционального назначения. Сравните поведение связанных и независимых раскрывающихся элементов на нейтральном учебном примере.

Руководство из 8 глав14 ссылок
изучение интерфейса Duet Design System

Duet дизайн-система

Новое руководство

Изучите цветовую и интервальную шкалы Duet от LocalTapiola на примере выбора диапазона дат: с датами в формате ISO, явной проверкой диапазона, методами управления фокусом компонентов и отдельной границей ответственности внешнего пикера с открытым исходным кодом.

Руководство из 8 глав39 ссылок
изучение интерфейса Elastic UI

Elastic UI

Новое руководство

Создайте исследовательский интерфейс журналов Elastic UI с проверенными шкалами Borealis, нативными элементами управления таблицей и поиском, фильтрацией по уровню серьёзности, локально сохраняемыми событиями и полным исходным кодом React.

Руководство из 8 глав43 источника
изучение интерфейса Emplifi Soul

Emplifi Soul

Новое руководство

Изучите контракт таблицы данных Soul, шестипиксельную шкалу отступов, многоуровневые роли цветов и компактную типографику Inter. Сравните массовый выбор, обозначение отсутствующих данных и строки итогов, а затем ознакомьтесь с проверенными точками входа частного пакета React.

Руководство из 7 глав44 источника
изучение интерфейса Esri Calcite

Esri Calcite

Новое руководство

Практическое руководство по Calcite для компактных пространственных инструментов: семантические поверхности и синие действия, панели проверки данных, нативные API полей ввода и полноценный локальный пример проверки сайта.

Руководство из 8 глав48 источников
изучение интерфейса Framework7

Framework7

Новое руководство

Нативный альбом эскизов Framework7 с настоящими действиями swipeout, явными значениями темы iOS, доступным с клавиатуры открытием меню действий и отфильтрованным списком, в котором завершённые исследования остаются до сброса.

Руководство из 9 глав26 источников
изучение интерфейса GitLab Pajamas

GitLab Pajamas

Новое руководство

Руководство Pajamas для технических процессов: настоящие семантические токены, адаптивные шкалы типографики и отступов, пошаговая панель проверки конвейера, понятный вывод ошибок и явно обозначенная локальная симуляция повтора.

Руководство из 8 глав43 источника
изучение интерфейса gluestack UI

gluestack UI

Новое руководство

Создайте контрольный список полевого набора с настоящими генераторами основных компонентов Button и Input из gluestack, явными семантическими цветами v5 и полным исходным кодом React Native Web. Изучите проверку данных, действия с клавиатуры, стабильную идентификацию элементов и локально вычисляемый прогресс сбора вещей.

Руководство из 8 глав33 ссылки
изучение интерфейса GOV.UK Design System

GOV.UK дизайн-система

Новое руководство

Создайте путь в стиле GOV.UK: ответьте на вопросы и проверьте ответы. Используйте актуальную типографическую шкалу v6, адаптивные отступы, функциональные цвета, связанную валидацию и конкретный пример интеграции Frontend.

Руководство из 8 глав37 ссылок
изучение интерфейса Headless UI

Headless UI

Новое руководство

Headless UI предоставляет неоформленные интерактивные компоненты React для диалоговых окон, списков вариантов и переключателей. В этом руководстве показано, как сочетать их нативное управление фокусом, выбором и всплывающими элементами с обычным CSS на примере процесса предоставления доступа к документу.

Руководство из 9 глав27 источников
изучение интерфейса HPE Grommet

HPE Grommet

Новое руководство

Смоделируйте резервирование вместимости с помощью примитивов компоновки Grommet, управляемых полей формы и числовых индикаторов. Продуманно используйте шкалу темы и не смешивайте базовую тему Grommet с отдельно устанавливаемой темой HPE.

Руководство из 9 глав38 ссылок
изучение интерфейса Rivet

Rivet

Новое руководство

Создавайте университетские страницы с настоящей шкалой токенов Rivet, анатомией компонентов HTML и нативным управлением с клавиатуры. Изучите компактную страницу с описанием мастер-класса и доступными вкладками с информацией о посещении.

Руководство из 8 глав21 источник
изучение интерфейса Infor Design System

Infor дизайн-система

Новое руководство

Создайте корпоративную форму обслуживания с настоящими состояниями полей ввода IDS, псевдонимами темы и точным идентификатором ресурса. Изучите актуальные токены общедоступной темы, закреплённый пакет Web Components и локальный процесс работы с черновиком, проверкой данных и сбросом.

Руководство из 7 глав53 источника
изучение интерфейса Ionic Framework

Ionic Framework

Новое руководство

Нативный интерфейс Ionic для настройки чтения с проверенными цветовыми ролями, геометрией диапазонов iOS и Material, настоящим поведением сегментов и переключателей и статьёй, которая реагирует на выбор шрифта, размера и фона.

Руководство из 9 глав25 ссылок
изучение интерфейса Digital Agency Design System

Digital Agency дизайн-система

Новое руководство

Создавайте удобные для чтения интерфейсы японских госуслуг с текстовыми ролями DADS, семантическими токенами и нативной анатомией компонентов HTML. Попробуйте рабочую форму поиска квитанции с ошибками формата, результатом «совпадений нет» и доступной для проверки записью о статусе.

Руководство из 8 глав17 источников
изучение интерфейса Kajabi Sage

Kajabi Sage

Новое руководство

Создайте панель обмена для авторов с понятным контекстом курса, наглядными действиями копирования и достоверным уведомлением о состоянии буфера обмена. Изучите анатомию компонентов Sage для Rails, опубликованные спецификации типографики и более новый внешний слой токенов Pine.

Руководство из 7 глав42 источника
изучение интерфейса Kobalte

Kobalte

Новое руководство

Kobalte предоставляет headless-компоненты для Solid, включая числовые поля с отдельными исходными и форматированными значениями, составную анатомию флажка и кнопки с состоянием нажатия. В руководстве эти примитивы связаны с сигналами Solid на примере масштабатора рецепта с вычисляемыми количествами и сбрасываемыми флажками ингредиентов.

Руководство из 9 глав29 ссылок
изучение интерфейса Maersk Design System

Maersk дизайн-система

Новое руководство

Изучите язык операционного интерфейса Maersk на примере настоящих ролей светлой темы, шкал заголовков и основного текста, вложенных скруглений и обработки идентификаторов. Пример поиска отправления показывает точное совпадение по номеру и доступную историю событий, не создавая впечатления доступа к данным текущей логистики.

Руководство из 8 глав37 ссылок
изучение интерфейса Melt UI

Melt UI

Новое руководство

Конструкторы хранилищ и действий Melt UI добавляют доступное поведение к разметке Svelte, которой вы управляете. В руководстве @melt-ui/svelte 0.86.6 связывает конструкторы radio, slider и switch через их атрибуты, действия и доступные для записи хранилища; это решение отличается от более нового варианта на runes API.

Руководство из 9 глав30 источников
изучение интерфейса Microsoft Fluent 2

Microsoft Fluent 2

Новое руководство

Создайте рабочую область Fluent UI React v9 с настоящими семантическими токенами, веб-шкалами типографики и отступов, управляемыми вкладками и диалогом доступа с валидацией. Сравните значения тем, изучите анатомию компонентов и проверьте локальное взаимодействие перед использованием полного примера React.

Руководство из 9 глав64 источника
изучение интерфейса Monday Vibe

Monday Vibe

Новое руководство

Создайте рабочую доску доставки с токенами Vibe 4 и элементами управления React. Разберитесь, чем семантические цвета действий отличаются от меток на доске, изучите именованные шаги отступов и сокращённые записи шрифтов, а также настройте CSS, необходимую новому приложению.

Руководство из 9 глав49 источников
изучение интерфейса Morningstar Design System

Morningstar дизайн-система

Новое руководство

Создайте исследовательский интерфейс с выровненными числами, осмысленными цветами ресурсов и удобной для чтения типографикой. Изучите константы MDS, переход на Vue 3, переход на Morningstar Intrinsic и сортируемый блокнот распределения активов на вымышленных данных.

Руководство из 7 глав37 ссылок
Исследование интерфейса NL Design System

NL дизайн-система

Новое руководство

Создайте интерфейс для государственных услуг на основе реальных компонентов участников проекта и явно заданной темы. В этом примере Utrecht CSS показывает сопоставление токенов, структуру списка данных и две оригинальные темы с одинаковым процессом редактирования.

Руководство из 8 глав13 источников
Исследование интерфейса Nord Design System

Nord дизайн-система

Новое руководство

Изучите токены темы Therapy в Nord и контракты веб-компонентов на примере черновика запроса на бронирование комнаты: реальные цветовые роли, адаптивные размеры полей, явная проверка данных и локально подготовленные результаты.

Руководство из 8 глав38 ссылок
Исследование интерфейса Pico CSS

Pico CSS

Новое руководство

Pico CSS стилизует семантический HTML с адаптивной шкалой типографики в rem и переменными темы. Стандартная, безклассовая и условная сборки рассчитаны на разные сценарии интеграции; в этом руководстве используется стандартная сборка для формы предпочтений чтения со встроенными раскрывающимися блоками и диалогом.

Руководство из 9 глав32 ссылки
Исследование интерфейса Porsche Design System

Porsche дизайн-система

Новое руководство

Изучите Porsche Design System v4: гибкие отступы, цветовые схемы CSS, типографика Porsche Next и конфигуратор с двумя вариантами. В примере приведены реальные выражения токенов и полный файл входа Vite с актуальными событиями сегментированного элемента управления.

Руководство из 8 глав45 источников
Исследование интерфейса Preline UI

Preline UI

Новое руководство

Встроенный планировщик занятий Preline со связанными вкладками, ограниченным плагином для числового ввода, установленными псевдонимами темы, реальными шкалами Tailwind и локальной оценкой материалов, которая обновляется при выборе занятия.

Руководство из 9 глав31 ссылка
Исследование интерфейса Pure CSS

Pure CSS

Новое руководство

Pure CSS — это модульная таблица стилей для сеток, форм, кнопок, меню и таблиц, не требующая среды выполнения виджетов. В этом руководстве показано, как дополнительный адаптивный модуль сетки сочетается со встроенными семантическими элементами в каталоге оборудования с фильтрацией; сортировка и выбор реализованы явно.

Руководство из 9 глав24 ссылки
Исследование интерфейса Ripple

Ripple

Новое руководство

Изучите реальные цветовые роли Ripple, шкалу отступов из 14 шагов и ссылки на адаптивную типографику на примере полноценного расписания семинара с последовательным раскрытием информации, индикатором выполнения и переходом к следующему шагу с клавиатуры.

Руководство из 6 глав35 ссылок
Исследование интерфейса Sainsbury's Design System

Sainsbury's дизайн-система

Новое руководство

Примените общедоступные рекомендации Sainsbury’s по дизайну к полному сценарию выбора времени для получения заказа: реальные ссылки на палитру и размеры, доступные варианты с переключателями, обновляемая сводка и достоверная обратная связь о локальных действиях.

Руководство из 7 глав38 ссылок
Исследование интерфейса Salesforce Lightning

Salesforce Lightning

Новое руководство

Руководство по Lightning для работы с большим количеством записей: реальные отступы, типографика и семантические цвета, редактируемая рабочая область дела, проверка полей и история действий, отражающая локальные изменения.

Руководство из 8 глав40 источников
Исследование интерфейса Samsung One UI

Samsung One UI

Новое руководство

Изучите структуру просмотра и взаимодействия One UI, рекомендации по полям отступов 24dp и требование масштабирования текста на 200% на примере полноценного оригинального предпросмотра предпочтений чтения с тёмным оформлением и явным сбросом настроек для восстановления.

Руководство из 6 глав17 источников
Исследование интерфейса SEEK Braid

SEEK Braid

Новое руководство

Изучите Braid на примере оригинального сценария поиска работы: переменные в области действия темы, четыре реальные точки останова, контекстный текст, разные тона кнопок и управляемое поле, которое объясняет ошибку проверки вместо блокировки действия.

Руководство из 7 глав35 ссылок
Исследование интерфейса Semrush Intergalactic

Semrush Intergalactic

Новое руководство

Руководство по Intergalactic с актуальными семантическими токенами и токенами диаграмм, встроенными элементами управления фильтрацией, сравнением в фиксированном масштабе, сведениями о выбранном объекте и полным воспроизводимым примером данных.

Руководство из 8 глав38 ссылок
Исследование интерфейса ServiceTitan Anvil

ServiceTitan Anvil

Новое руководство

Раскройте возможности Anvil2 на конкретном примере: модель токенов из трёх уровней, проверенные значения ролей для светлой и тёмной тем и полный сценарий назначения услуги с синхронизированными состояниями специалиста, времени и проверки.

Руководство из 7 глав38 ссылок
Исследование интерфейса Siemens iX

Siemens iX

Новое руководство

Изучите промышленные события с помощью явно заданной классификации уровней серьёзности, цветовых ролей с учётом темы и API Event List от iX. В этом руководстве создаётся локальный журнал оборудования, в котором проверенная запись не выдаётся за устранённую аварию оборудования.

Руководство из 7 глав39 ссылок
Исследование интерфейса Sprout Social Seeds

Sprout Social Seeds

Новое руководство

Изучите фактические публичные токены цвета, интервалов, продуктовой типографики и границ в Seeds на примере полноценной редакторской очереди: с выбором нескольких элементов, пустыми состояниями после фильтрации и отменой действия.

Руководство из 6 глав38 ссылок
Исследование интерфейса Decanter

Decanter

Новое руководство

Создавайте академические редакционные страницы с пресетом Tailwind от Decanter, адаптивной типографической шкалой и гибкими отступами по краям экрана. Изучите оригинальные карточки мероприятий с работающими фильтрами по темам и раскрывающимися аннотациями.

Руководство из 8 глав12 источников
Исследование интерфейса Tabler

Tabler

Новое руководство

Нативный журнал проектов Tabler с актуальными переменными темы 1.6, карточками временной шкалы, контекстом таблицы данных, валидацией в модальном окне и композицией для светлой и тёмной тем, в которой можно сохранять локальные контрольные точки.

Руководство из 9 глав34 источника
Исследование интерфейса Thumbtack Thumbprint

Thumbtack Thumbprint

Новое руководство

Создайте интерфейс для поиска услуг на основе документированных примитивов Thumbprint v2: компактные карточки поставщиков, понятные сведения для сравнения, наглядные состояния выбора и постоянно видимый список избранного.

Руководство из 8 глав37 ссылок
Исследование интерфейса UIkit

UIkit

Новое руководство

UIkit сочетает фреймворк CSS, настройку Less и компоненты JavaScript, управляемые атрибутами. Его Switcher, Accordion и адаптивная сетка вместе используются в приведённом ниже планировщике мастер-классов, показывая, где заканчивается встроенное поведение компонентов и начинается состояние выбора в приложении.

Руководство из 9 глав33 ссылки
Исследование интерфейса VA Design System

VA дизайн-система

Новое руководство

Создавайте понятные сценарии получения услуг с семантическими токенами VA и нативным списком Process List: наглядными пояснениями к этапам, содержательными обозначениями статуса и дополнительными сведениями, не мешающими воспринимать основной маршрут.

Руководство из 8 глав21 источник
Исследование интерфейса Visa Product Design System

Visa Product дизайн-система

Новое руководство

Используйте Visa Nova CSS, чтобы создать понятную настройку формата выписки с нативными переключателями, заголовком альтернативного цвета и сводкой для проверки. Изучите точные значения темы 1.6.5, масштабируемые интервалы и полную интеграцию таблиц стилей.

Руководство из 7 глав40 источников
Исследование интерфейса Volvo Cars Web Design System

Volvo Cars Web дизайн-система

Новое руководство

Изучите веб-основу Volvo Cars с приоритетом HTML, фактические токены светлой темы и стили нативных карточек с возможностью выбора на примере полноценного плана упаковки: с независимым выбором, переключением темы и сбросом.

Руководство из 6 глав34 источника
Исследование интерфейса Vuestic UI

Vuestic UI

Новое руководство

Нативный рабочий лист для критического обзора Vuestic с проверенными по исходному коду светлой и тёмной темами, доступными подписями рейтинга, валидацией текстовой области, рассчитанным средним баллом и сохранением завершённой оценки.

Руководство из 9 глав33 ссылки
Atelier Zero

Atelier Zero

Редакционный дизайн · студия

Визуальная система журнального уровня с коллажной композицией: тёплый фон под бумагу, сюрреалистичные изображения гипсовых форм и архитектуры, крупный акцидентный шрифт, тончайшие линии, маркеры разделов римскими цифрами и миниатюрные редакторские пометки. Вдохновлена высочайшим уровнем печатных журналов (Monocle, Apartamento, IDEA) и перенесена в работающий сайт.

Исходный вариант56 токенов
kami (紙 / 纸)

kami (紙 / 纸)

Редакционный дизайн и печать

Редакционная система в эстетике бумаги: тёплый пергаментный холст, чернильно-синий акцент, иерархия на основе антиквы. Для резюме, одностраничных материалов, аналитических записок, портфолио, презентаций — всего, что должно выглядеть как качественная печатная продукция, а не интерфейс. Изначально многоязычная (EN · zh-CN · ja).

Исходный вариант56 токенов
Totality Festival

Totality Festival

Тематика и самобытность

Поверхность: веб. Космическая премиальная тёмная система со стеклянными эффектами передаёт ошеломляющее впечатление от солнечного затмения: обсидиановые поверхности, янтарные блики «короны» и атмосферные голубые акценты.

Исходный вариант56 токенов
Warm Editorial

Тёплый редакционный стиль

Стартовые решения

Журнальная эстетика с акцентом на типографику с засечками. Терракотовый акцент на тёплой почти белой бумаге — подходит для длинных текстов, редакционных материалов и маркетинговых страниц с сильным акцентом на бренд.

Исходный вариант56 токенов

От референса к интерфейсу

Создайте экран с дизайн-системой

01

Сравните дизайн-систему целиком

Не ограничивайтесь акцентным цветом. Сравните типографику, отступы, компоненты и макет с тем интерфейсом, который вы создаёте.

02

Ознакомьтесь с руководством и поделитесь им

Передайте AI-агенту правила дизайна и конкретную задачу. Храните исходный код и существующие ограничения проекта вместе.

03

Проверьте, прежде чем расширять

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

Свой визуальный язык

Извлеките дизайн-систему с OpenDesign

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

Веб-сайт и макет преобразуются в упорядоченные правила цветов, типографики, отступов и компонентов.

Из веб-сайта

Добавьте ссылку в Design Systems. OpenDesign прочитает доступные стили и ресурсы страницы, соберёт палитру, типографику и правила оформления. Проверьте результат и доработайте его с Agent.

Из вашего дизайна

В меню «Ещё» проекта выберите «Создать дизайн-систему». OpenDesign создаст новый проект на основе существующих файлов, а Agent извлечёт визуальные правила, компоненты и паттерны.

Основа для следующих проектов

Изучите правила, токены стилей и превью UI. Доработайте созданный пакет, прежде чем использовать его как основу для следующего дизайна.

  • DESIGN.md
  • CSS / Tokens
  • UI Kit

Свяжите этапы работы

Развивайте свою дизайн-систему

Создавайте с OpenDesign

Воплотите дизайн-систему в жизнь.

Выберите руководство, чётко опишите задачу для AI-агента и создайте следующий интерфейс с помощью OpenDesign.