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

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

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

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

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

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

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

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

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

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

Руководство по настройке Cloudscape с реальными токенами визуального обновления, плотностью адаптивных отступов, API управляемых форм и работающим двухэтапным мастером настройки ресурса.

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

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

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

Создайте форму настройки напоминаний в стиле B.C. с реальными семантическими токенами, встроенными элементами управления Aria от React, условными полями контактных данных и полной валидацией.

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

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

Реализуйте редакционную сетку CFPB, актуальную типографику и встроенные компоненты Expandables, добавив рабочую форму для заметок, проверенные API пакетов и чёткие границы идентификации.

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

Реализуйте CMS Core с версионированными переменными темы, реальными API компонентов Review и работающим сценарием редактирования и проверки, который сохраняет ответы пользователя и фокус.

Очередь проверки CoreUI с реальными переменными темы 5.9, встроенными вкладками и групповым выбором флажками, а также закреплённым уведомлением, позволяющим отменить последнее локальное архивирование.

Студия приглашений на основе CSS, демонстрирующая семантические темы daisyUI 5, парные цвета содержимого, объединённые переключатели, ползунки, встроенную проверку браузера и полноценный этап проверки в диалоговом окне.

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

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

Реализуйте понятную последовательность обслуживания с реальной типографикой Bootstrap Italia, адаптивной структурой Stepper и возможностью восстановить локальное состояние формы.

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

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

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

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

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

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

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

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

Композиция с нативными аккордеоном и боковой панелью Flowbite 4, проверенными семантическими псевдонимами темы, постоянным списком вещей для поездки и доступным локальным сценарием заметок о материалах.

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

Рабочий стол проверки доказательств Foundation с использованием XY Grid, пользовательских валидаторов Abide, подтверждения Reveal, реальных настроек Sass и полного кода локальной интеграции.

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

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

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

Изучите настоящие цветовые роли, слоты карточек и нативную пагинацию Gov Design System CE на примере полноценного инструментария для чтения шести ресурсов с явным управлением фокусом и состоянием страницы.

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

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

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

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

Справочник по HeroUI v3 с настоящими семантическими переменными CSS, составными элементами управления React, светлыми и тёмными поверхностями и рабочим рецептом экспорта изображений.

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

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

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

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

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

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

Создайте нативный интерфейс KERN с проверенной типографикой, семантическими темами, раскрывающимися элементами и обратимым процессом подтверждения.

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

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

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

Справочник по Mantine 9 с нативной таблицей участников и боковой панелью планирования. Изучите настоящие шкалы темы, подключите useForm к TextInput, Select, Checkbox и DatePickerInput и проверьте валидацию перед добавлением локальной записи.

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

Изучите поддерживаемый процесс WordPress, веб-палитру и шаблоны справочника сотрудников Forty-Two на примере рабочего фильтра по должностям и областям исследований.

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

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

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

Редакционное руководство по Protocol с настоящими гарнитурами, шкалами отступов и ширины контейнера, адаптивной иллюстрированной страницей для чтения и полноценным примером формы на нативном CSS.

Рабочая среда для таблиц на основе Naive UI: проверенные значения объектов темы, выбор строк, раскрытие, сортировка, пагинация и локальное действие для пакетной проверки.

Используйте реальные токены ax из Aksel v8, штатную плотность таблицы и семантическую структуру заголовков. Сортируйте и выбирайте вымышленные записи для последующей обработки, сравнивая светлую и тёмную темы.

Используйте типографику NHS.UK, адаптивные отступы, сгруппированные варианты с переключателями и контекстные сведения, чтобы создать понятный сценарий выбора предпочтительного времени приёма.

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

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

Изучите токены дизайна NSW, типографику Public Sans и встроенные вкладки с поддержкой клавиатуры на примере полного руководства по проведению семинара и отдельного локального списка литературы.

Создайте полноценный редактор брифов на Nuxt UI 4.11.3 с реальными компонентами Vue, семантическими ссылками на тему, проверкой ввода и явным управлением локальными черновиками.

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

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

Изучите реальную палитру, семантические роли, отступы и границы плотности Oracle JET 19 Redwood на примере полноценного оригинального редактируемого листа проверки запасов.

Изучите реальные семантические токены Orange OUDS 1.4, пакеты тем и встроенное поведение Offcanvas на примере полноценного адаптивного сравнительного обзора.

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

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

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

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

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

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

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

Реализация PrimeVue с фиксированной версией из экосистемы Prime UI: дерево документов в теме Aura с реальными ссылками на пресеты, управляемым раскрытием, фильтрацией, выбором и локальным закреплением.

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

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

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

Создайте полноценный конструктор плана концентрации с React Native Elements 5.0.0: реальные роли темы, управляемые поля ввода и варианты выбора, проверка данных, локальное подтверждение и протестированная веб-сборка.

Встроенный календарь проверок React Suite с проверенными переменными CSS для v6, маркерами ячеек дат, программой выбранного дня, проверкой в модальном окне и явно заданными правилами локального планирования.

Создайте рабочую среду для операционных задач на PatternFly: семантические ссылки на токены, карточки услуг с возможностью выбора, множественный выбор с тремя состояниями, проверка охвата и полный встроенный код React.

Создайте конкретный сценарий выбора товаров для комплектации заказов в Cedar: встроенные плитки Vue, реальные значения токенов, полноценная навигация с клавиатуры и адаптивная композиция товаров.

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

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

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

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

Используйте тему Horizon в SAP Fiori с UI5 Web Components: реальные параметры темы, явно заданная плотность контента, семантические состояния значений и сценарий оформления запроса на покупку с локальной проверкой.

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

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

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

Создайте пошаговую настройку рабочей среды с базовыми элементами Steps, рекомендованными Semi, управляемыми компонентами Input и Switch, реальными токенами темы и явным выбором пакета React 18 или React 19.

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

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

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

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

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

Сравните настоящие темы Cerberus, Mint и Rose из Skeleton 5.0.1 на примере полноценного рабочего места для чтения: изучите токены в реальном времени, сочетания тёмных поверхностей и состояние, которое можно отменить.

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

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

Руководство по Circuit с точными семантическими токенами, встроенными свойствами валидации, полноценным редактором товаров для продавцов и иллюстрированным пользовательским интерфейсом.

Создавайте понятные формы для финских государственных услуг с Source Sans 3, явными токенами интервалов и восстанавливаемым сценарием выбора документов.

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

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

Создайте компактный редактор политики API на основе TDesign React: конкретные роли тем, двухпиксельная шкала размеров, регистрация полей Form и типизированная композиция Table.
Создайте интерфейс для поиска услуг на основе документированных примитивов Thumbprint v2: компактные карточки поставщиков, понятные сведения для сравнения, наглядные состояния выбора и постоянно видимый список избранного.

Подготовьте черновик уведомления с темой и правилами использования кнопок Paste, проверенной шкалой интервалов и чётким разграничением редактирования, просмотра и фактической отправки сообщения.

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

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

Объедините токены интервалов USWDS, роли тем, семантические таблицы и нативные аккордеоны в интерфейсе для поиска и сравнения возможностей.

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

Мобильный сценарий выбора адреса на основе Vant 4: настоящие переменные CSS, управляемая идентификация адреса, проверка полей, переключение темы и явное сохранение только локально.

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

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

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

Создавайте удобные для чтения интерфейсы с гибкой типографикой, семантическими цветовыми ролями и нативным сворачиваемым содержимым, которое остаётся читаемым без JavaScript.

Изучите фактические семантические токены Web Awesome в нативных пользовательских элементах, включая локальные изменения радиуса и интервалов, стилизацию Shadow DOM, поведение списков выбора и валидацию полей ввода.

Используйте настоящую структуру SearchInput, иерархию действий и токены для чтения из Codex. Выполните поиск в локальном указателе статей, изучите результат и вернитесь к прежнему месту чтения.

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

Составьте локальный план обучения с составным компонентом FormField, управляемым TextInput и PrimaryButton из Canvas Kit. При этом различайте актуальные источники семантических токенов и старые примеры миграции с space.x4.

Руководство по Garden для работы с запросами в службу поддержки: реальные псевдонимы тем, шкалы типографики и радиусов, полноценный редактор ответа, локальные черновики с учётом видимости и восстановление полей.
Туристический маркетплейс. Тёплый коралловый акцент, выразительные фотографии, скруглённые элементы интерфейса.
Управление проектами. Предельно минималистичный и точный стиль, фиолетовый акцент.
Сдержанная почти монохромная система на основе глубокого чёрно-бирюзового оттенка, с большим количеством свободного пространства и редакционной типографикой.
Потребительская электроника. Просторные белые поверхности, SF Pro, кинематографичные изображения.
Платёжная инфраструктура. Фирменные градиенты фиолетового оттенка и элегантность тонкого начертания 300.
Цифровой банкинг. Элегантный тёмный интерфейс, карточки с градиентами, точность финтеха.
Эффект матового стекла: полупрозрачные слои, лёгкое размытие и сияющие границы создают глубину и современную элегантность.
Денежный перевод. Яркий зелёный акцент, дружелюбный и понятный интерфейс.
Электромобили. Радикальный минимализм, фотографии на весь экран, почти полное отсутствие элементов интерфейса.
Платформа для изучения языков. Яркий зелёный цвет совы, массивные тени, игровая подача.
Платформа для разработки. Функциональная насыщенность, точные сочетания синего и белого, фундамент Primer.
Интерфейс для диалогов с приоритетом ИИ: минимум элементов управления, понятные результаты и делегирование задач в сценариях работы с ИИ-агентами.
Гибрид электронной таблицы и базы данных. Яркий, дружелюбный стиль со структурированной подачей данных.
Структурированная дизайн-система для корпоративных продуктов, в которой ясность, последовательность и эффективность особенно важны для веб-приложений с большим объёмом данных.
Панель приложения в фиолетовой гамме: навигация в верхней панели, компоновка на основе карточек и рабочие сценарии для разработчиков.
«Браузер, который просматривает сайты за вас». Полупрозрачные поверхности, тёплые градиенты, боковая панель в основе макета.
Экспрессивный стиль с высоким контрастом, выразительной типографикой и смелыми цветовыми решениями для визуально эффектных интерфейсов.
Визуальная система журнального уровня с коллажной композицией: тёплый фон под бумагу, сюрреалистичные изображения гипсовых форм и архитектуры, крупный акцидентный шрифт, тончайшие линии, маркеры разделов римскими цифрами и миниатюрные редакторские пометки. Вдохновлена высочайшим уровнем печатных журналов (Monocle, Apartamento, IDEA) и перенесена в работающий сайт.
Модульная сетка с блоками-карточками, чёткой иерархией, свободными интервалами и лёгким визуальным контрастом для упорядоченных, удобных для просмотра интерфейсов.
Криптовалютная биржа. Яркий жёлтый акцент на монохромном фоне, динамика торговой площадки.
Автомобили класса люкс. Премиальные тёмные поверхности, точность немецкой инженерии.
Спортивный суббренд. Почти чёрные поверхности кокпита, трёхцветные акценты BMW M, чёткая инженерная геометрия.
Выразительная визуальная подача: тяжёлые шрифты, контрастные цвета и масштабные композиции.
Сырая эстетика антимодернизма, вдохновлённая бетонной архитектурой: простые элементы, резкие композиционные решения и функциональный минимализм.
Марка гиперкаров. Кинематографичный чёрный фон, аскетичная монохромная палитра, монументальная акцидентная типографика.
Уютный интерфейс в духе кафе: тёплые тона, мягкая типографика и чистые макеты для расслабленного просмотра.
Планирование встреч с открытым исходным кодом. Чистый нейтральный интерфейс, простота для разработчиков.
Платформа для создания визуального контента. Яркий градиент от фиолетового к синему, много свободного пространства, дружелюбная геометрия.
Бренд корпоративной инфраструктуры. Тёмные поверхности, внушающие доверие, акцентный Cisco Blue, техническая ясность.
AI-ассистент Anthropic. Тёплый терракотовый акцент, чистый редакционный макет.
Креативное агентство. Органичные формы, мягкие градиенты, макет с художественным оформлением.
Мягкие округлые объёмные формы, напоминающие податливую глину: игривые пухлые элементы и яркие поверхности.
Дизайн, основанный на простоте: много свободного пространства, легко читаемая типографика и ограниченная палитра цветов, чтобы не перегружать интерфейс.
Быстрая аналитическая база данных. Технический стиль документации с жёлтыми акцентами.
Компактный семантический язык компонентов для современных веб-приложений: нейтральные многоуровневые поверхности, точная типографика Inter, доступные элементы управления, автоматические роли цветов для светлой и тёмной тем и палитры диаграмм, подходящие для конкретных задач.
Корпоративная AI-платформа. Яркие градиенты, насыщенный данными интерфейс панели управления.
Криптовалютная биржа. Чистая синяя айдентика, акцент на доверии, солидный институциональный стиль.
Яркие контрастные палитры и градиенты для запоминающегося современного интерфейса, который вовлекает пользователей.
Платформа для интеграции инструментов. Современный тёмный стиль с яркими иконками интеграций.
Минималистичный дизайн в духе нашего времени: бенто-сетки, поддержка тёмной темы и высокопроизводительные доступные макеты.
Профессиональный дизайн в соответствии с брендом: структурированные сетки, минималистичные макеты и единые корпоративные шаблоны.
Футуристичная эстетика научной фантастики: тёмные темы, яркие неоновые акценты и захватывающие пространственные элементы.
Игривый дизайн с выразительными персонажами, эмоциональной типографикой и смелой графикой для лендингов и творческих проектов.
Редактор кода, созданный с приоритетом AI. Элегантный тёмный интерфейс, градиентные акценты.
Эстетика тёмной облачной платформы: модульные сетки, панели со стеклянным эффектом и чёткая иерархия данных для продуктивных панелей управления.
Платформа для голосового общения и чатов. Насыщенный оттенок blurple, тёмные поверхности как основа, игривые акценты.
Техника рендеринга точечным узором, которая имитирует оттенки ограниченной палитрой и создаёт ностальгичную ретроэстетику с высоким контрастом.
Стиль от руки, напоминающий наброски: дудлы, рукописные шрифты и несовершенные линии создают игривую и непринуждённую атмосферу.
Контрастный театральный дизайн: смелые макеты, захватывающие визуальные образы и нестандартные композиции, привлекающие внимание.
Редакционный макет в журнальном стиле: изысканная антиква, структурированные сетки и элегантное чтение.
Утончённая эстетика: изящная типографика, сдержанные палитры и безупречные макеты, излучающие изысканность.
Платформа для AI-озвучивания. Тёмный кинематографичный интерфейс, эстетика звуковых волн.
Динамичный яркий стиль: толстые контуры, геометрические формы, контрастные цвета и выразительная типографика передают движение и энергию.
Чистый корпоративный дизайн с высоким контрастом для рабочих процессов на основе данных: интуитивно понятное перетаскивание элементов и структурированные макеты.
React нативная платформа. Тёмная тема, плотный кернинг, ориентация на код.
Яркий дизайн с индивидуальным характером: смелые цвета, игривая графика и динамичные макеты, в которых творчество сочетается со структурой.
Фэнтезийная эстетика в духе игр: выразительная премиальная графика, насыщенные цветовые палитры и захватывающие тематические элементы.
Премиальные автомобили. Редакционная эстетика кьяроскуро, акценты Ferrari Red, кинематографичный чёрный.
Инструмент для совместной работы над дизайном. Яркая многоцветная палитра, игривый, но профессиональный стиль.
Двумерный минималистичный стиль с яркими цветами, чистой типографикой и без 3D-эффектов — для быстрых и удобных интерфейсов.
Конструктор сайтов. Смелое сочетание чёрного и синего, анимация на первом месте, дизайн в центре внимания.
Приветливый интуитивно понятный дизайн: скруглённые элементы, много свободного пространства и мягкие пастельные палитры.
Взгляд в будущее: технологичная типографика, современные макеты и элегантная эстетика, вдохновлённая инновациями.
Плавные переходы между цветами и поверхности с обилием градиентов для современных игривых интерфейсов с визуальной глубиной.
Автоматизация инфраструктуры. Чистый корпоративный стиль, чёрно-белая палитра.
Индикатор на лобовом стекле истребителя или вертолёта. Фосфорный зелёный на почти чёрном фоне, наложение данных прописными буквами, угловатая геометрия. Абсолютная ясность на скорости и высоте.
Центр сообщества машинного обучения. Солнечный жёлтый акцент, моноширинная айдентика, жизнерадостный и насыщенный стиль.
Корпоративные технологии. Дизайн-система Carbon, структурированная синяя палитра.
Общение с клиентами. Дружелюбная синяя палитра, шаблоны для диалогового интерфейса.
Редакционная система в эстетике бумаги: тёплый пергаментный холст, чернильно-синий акцент, иерархия на основе антиквы. Для резюме, одностраничных материалов, аналитических записок, портфолио, презентаций — всего, что должно выглядеть как качественная печатная продукция, а не интерфейс. Изначально многоязычная (EN · zh-CN · ja).
Торговля криптовалютой. Тёмный интерфейс с фиолетовыми акцентами, панели управления с высокой плотностью данных.
Бренд суперкаров. Истинно чёрные поверхности, золотые акценты, выразительная типографика прописными буквами.
Дизайн для роста конверсии: устраняет препятствия и побуждает пользователей к действию благодаря ясности, доверию и скорости.
Игривый минималистичный дизайн с яркими цветами, округлыми формами, тактильными объёмными контурами и дружелюбными иллюстрациями для понятных интерфейсов.
Асинхронная видеосвязь Loom. Фиолетовый основной цвет, дружелюбные поверхности, макет с приоритетом видео. Чистый и профессиональный стиль без излишней корпоративности.
AI-конструктор приложений полного стека. Игривые градиенты, дружелюбная эстетика для разработчиков.
Премиальная тёмная эстетика с выразительными заголовками и монохромной палитрой для брендов класса люкс.
Глобальная платёжная сеть. Тёплый кремовый холст, орбитальные формы в виде капсул, редакционная теплота.
Material Design от Google: многоуровневые поверхности, динамическое оформление, встроенная анимация и адаптивные кроссплатформенные шаблоны.
Магазин технологичных товаров. Фотографии на первом плане, светлые и тёмные поверхности, CTA-кнопки Meta Blue.
Лаконичный дизайн с акцентом на свободном пространстве, чистой типографике и сдержанной палитре — для максимальной ясности и сосредоточенности.
Поставщик AI-моделей. Выразительный тёмный интерфейс с неоновыми акцентами.
Платформа документации. Чистый интерфейс с зелёными акцентами, оптимизированный для чтения.
Визуальная совместная работа. Яркий жёлтый акцент, эстетика бесконечного холста.
Мониторинг космических и аэрокосмических миссий. Тёмный центр управления, телеметрия янтарного цвета, точность моноширинной типографики. Прежде всего — функциональная ясность.
Поставщик LLM с открытыми весами. Минимализм с французским характером, оттенки фиолетового.
Современный редакционный стиль: антиква, сдержанные палитры и чистые макеты для безупречных цифровых продуктов.
Документная база данных. Фирменный зелёный лист, акцент на документации для разработчиков.
Дизайн на основе моноширинных шрифтов, вдохновлённый «Матрицей»: высокий контраст, компактная плотность и эстетика хакерской культуры.
Современное прочтение брутализма: выразительные границы, яркие акцентные цвета и грубые высококонтрастные макеты на тёплых поверхностях.
Эффекты электрического неонового свечения и высококонтрастные цветовые сочетания для смелых интерфейсов, привлекающих внимание.
Мягкие выпуклые элементы интерфейса с внутренними и внешними тенями на монохромных поверхностях — тактильный эффект встроенных элементов.
Чистый стиль по умолчанию, ориентированный на продукт. Подходит, если в брифе не задано особое настроение, — для B2B-инструментов, панелей мониторинга и служебных страниц.
Спортивная розница. Монохромный интерфейс, огромный набор прописными буквами, фотографии во всю ширину.
Универсальное рабочее пространство. Тёплый минимализм, заголовки с засечками, мягкие поверхности.
Вычисления на GPU. Энергичное сочетание зелёного и чёрного, технологичная мощь.
Запуск LLM локально. Терминал на первом плане, монохромная простота.
Платформа для разработки с ИИ. Тёмная тема для разработчиков.
Ретродизайн в духе аркадных игр: пиксельные шрифты, точечные границы, игривые контрастные цвета и эстетика 8-битных игр.
Дизайн с текстурой бумаги и отсылками к печатным изданиям: минимум цветов, чёткая типографика с засечками и без, тактильные поверхности.
Диалоговая поисковая система на базе ИИ. Глубокий тёмный фон, чёткая типографика, единственный фиолетовый акцент, высокая плотность информации.
Дизайн с пространственной глубиной: изометрические виды, точки схода и многослойные элементы направляют внимание, создавая реалистичный эффект 3D.
Визуальный поиск вдохновения. Красный акцент, кладка изображений, контент на первом плане.
Интернет-магазин игровой консоли. Макет с тремя слоями поверхностей, сдержанная выразительная типографика, увеличение масштаба при наведении с акцентом на голубой цвет.
Продуктовая аналитика. Игривый бренд с ёжиком, тёмный интерфейс для разработчиков.
Премиальная эстетика в духе Apple: точные отступы, современная типографика и утончённый, безупречно выверенный визуальный язык.
Безупречный дизайн для бизнеса: современная типографика, структурированные макеты и внушающий доверие визуальный образ.
Визуальный язык печатных изданий для книг, журналов и отчётов: редакционные сетки и выразительная типографика.
Лаунчер для повышения продуктивности. Элегантная тёмная оболочка, яркие градиентные акценты.
Тщательно выверенный современный минимализм, элегантная типографика с засечками и сдержанная изысканная палитра.
Французский автомобильный бренд. Яркие градиенты северного сияния, типографика NouvelR, смелая энергия.
Запускайте модели машинного обучения через API. Чистый белый фон, акцент на коде.
Электронная почта через API. Минималистичная тёмная тема, акценты моноширинным шрифтом.
Дизайн с отсылками к прошлому: винтажная типографика, контрастные ретропалитры и ностальгические визуальные элементы.
Генерация видео с помощью ИИ. Кинематографичный тёмный интерфейс, насыщенный медиаконтентом макет.
Headless CMS. Красный акцент, редакционный макет с приоритетом контента.
Мониторинг ошибок. Тёмная панель мониторинга с высокой плотностью данных, розово-фиолетовый акцент.
Дизайн в духе Shadcn/ui: минималистичные чистые компоненты, монохромная палитра и подход utility-first.
Платформа электронной коммерции. Кинематографичный дизайн с преобладанием тёмных тонов, неоново-зелёный акцент, сверхлёгкое начертание шрифта.
Прямолинейный дизайн без излишеств: чёткая типографика, нейтральные цвета и интуитивно понятные макеты, которые не отвлекают от главного.
Имитация реального мира: фактурные поверхности, 3D-эффекты и знакомые метафоры физических объектов для интуитивно понятных цифровых интерфейсов.
Платформа для рабочей коммуникации. Основной баклажановый цвет, палитра логотипа с несколькими акцентами, светлые поверхности и тёмная боковая панель — тёплый и располагающий стиль.
Современная эстетика минимализма: чистые линии, продуманная цветовая палитра, ненавязчивые взаимодействия и единообразные отступы.
Космические технологии. Лаконичное сочетание чёрного и белого, изображения во всю ширину, футуристичный стиль.
Обилие свободного пространства, единообразные внутренние отступы и макеты на основе сетки — для чистых, удобочитаемых и визуально свободных интерфейсов.
Музыкальный стриминг. Ярко-зелёный на тёмном фоне, выразительная типографика, акцент на обложках альбомов.
Международный бренд кофеен. Четырёхуровневая зелёная палитра, тёплый кремовый фон, кнопки-капсулы.
Дизайн на основе повествования: визуальные материалы, текст и взаимодействия ведут пользователей по увлекательному и эмоционально насыщенному пути.
Альтернатива Firebase с открытым исходным кодом. Тёмная изумрудная тема, акцент на коде.
Быстрый почтовый клиент. Премиальный тёмный интерфейс, управление с клавиатуры на первом плане, фиолетовое свечение.
Дизайн в духе классической игры с падающими блоками: игривые цвета, выразительные акцидентные шрифты и компактные динамичные макеты.
Технологическое издание. Плотная газетная вёрстка на белом фоне, фирменный акцидентный шрифт с засечками, моноширинные рубрики, чернильно-синие ссылки.
Инфраструктура ИИ с открытым исходным кодом. Технологичный дизайн в стиле чертежей.
Редакционно-техническая дизайн-система. Нейтральный фон, единственный киноварный акцент, острые углы, типографика Geist, жёсткие тени, структурированная композиция.
Поверхность: веб. Космическая премиальная тёмная система со стеклянными эффектами передаёт ошеломляющее впечатление от солнечного затмения: обсидиановые поверхности, янтарные блики «короны» и атмосферные голубые акценты.
Финансовый торговый терминал в стиле Bloomberg. Только тёмная тема, высокая плотность данных, голубые и коралловые сигналы покупки и продажи. Всё должно читаться с первого взгляда с расстояния двух метров.
Платформа мобильности. Смелое сочетание чёрного и белого, плотный набор, энергия города.
Развёртывание фронтенда. Чёткая точность чёрного и белого, шрифт Geist.
Живой, красочный дизайн с выразительной игривой типографикой, тёплыми акцентами и динамичной визуальной энергетикой.
Ностальгия по 1950–1990-м с элементами скевоморфизма, зернистой текстурой, ретропалитрами и пиксельной типографикой.
Международный телеком-бренд. Монументальная акцидентная типографика прописными буквами, тематические блоки в фирменном красном Vodafone.
Фреймворк для AI-агентов. Чёрный фон пустоты, изумрудный акцент, нативный интерфейс терминала.
Журнальная эстетика с акцентом на типографику с засечками. Терракотовый акцент на тёплой почти белой бумаге — подходит для длинных текстов, редакционных материалов и маркетинговых страниц с сильным акцентом на бренд.
Современный терминал. Интерфейс в стиле тёмной IDE, блочный интерфейс команд.
Платформа для совместной работы. Типографика Momentum, система синих интерактивных элементов, спектр акцентов для разных пользователей.
Визуальный конструктор веб-сайтов. Безупречная эстетика маркетингового сайта с синими акцентами.
Визуальный язык бренда для мини-программ WeChat, официальных аккаунтов и расширений открытой экосистемы.
Технологический журнал. Плотная газетная вёрстка на белой бумаге, фирменная акцидентная типографика с засечками, моноширинные рубрики, ссылки чернильно-синего цвета.
Лаборатория ИИ Илона Маска. Лаконичный монохром, футуристичный минимализм.
Социальная платформа пользовательского контента о стиле жизни. Фирменный красный цвет, щедро скруглённые углы, приоритет контента.
Платформа автоматизации. Тёплый оранжевый цвет, дружелюбные иллюстрации.
Подходящие дизайн-системы не найдены. Попробуйте другое название или категорию.
От референса к интерфейсу
Не ограничивайтесь акцентным цветом. Сравните типографику, отступы, компоненты и макет с тем интерфейсом, который вы создаёте.
Передайте AI-агенту правила дизайна и конкретную задачу. Храните исходный код и существующие ограничения проекта вместе.
Прежде чем применять выбранный подход во всём проекте, проверьте реальный контент, состояния компонентов, работу с клавиатурой и отображение на узком экране.
Свой визуальный язык
Начните с понравившегося сайта или готового дизайна. Превратите визуальные решения в систему, которую можно изучать, дорабатывать и использовать повторно.

Добавьте ссылку в Design Systems. OpenDesign прочитает доступные стили и ресурсы страницы, соберёт палитру, типографику и правила оформления. Проверьте результат и доработайте его с Agent.
В меню «Ещё» проекта выберите «Создать дизайн-систему». OpenDesign создаст новый проект на основе существующих файлов, а Agent извлечёт визуальные правила, компоненты и паттерны.
Изучите правила, токены стилей и превью UI. Доработайте созданный пакет, прежде чем использовать его как основу для следующего дизайна.
Свяжите этапы работы
Сравните OpenDesign с другими инструментами и выберите подходящий способ создавать и дорабатывать дизайн.
Сравнить инструментыAgentИзучите руководства по дизайну для программирующих агентов: от подготовки задания до проверки интерфейса.
Открыть руководства AgentSkillsНайдите Skills для конкретных задач дизайна и задайте вашему Agent более точный способ работы.
Посмотреть SkillsСоздавайте с OpenDesign
Выберите руководство, чётко опишите задачу для AI-агента и создайте следующий интерфейс с помощью OpenDesign.