Компоненты AI это инструмент дизайна с открытым исходным кодом для креативщиков, который позволяет создавать пользовательские инструменты дизайна, генеративные компоненты, страницы и сайты без написания кода. Он подчеркивает параметрические, управляемые токенами рабочие процессы проектирования, продуманный стиль темы, доступность и быстрое сотрудничество. Он поддерживает экспорт дизайна в несколько форматов и публикацию одним щелчком мыши, позволяя вам управлять токенами дизайна, адаптивными системами и рекомендациями по бренду в одном месте.
Обзор
- Создавайте адаптивные компоненты пользовательского интерфейса, страницы и целые сайты, используя визуальный интерфейс на основе ограничений.
- Шаблоны разметки стиля с кураторскими темами или собственными токенами дизайна для последовательного брендинга.
- Определение и повторное использование токенов дизайна (цвета, типографика, интервалы, тени и т. Д.) в проектах.
- Генерировать, дополнять и курировать растущую библиотеку генеративных компонентов для пользовательского интерфейса и графики.
- Экспортировать проекты в нескольких форматах (React, JS, JSON, JSX, SVG, PNG, HTML, CSS, CSS пользовательские свойства, Sass) и публиковать веб-страницы и активы одним щелчком мыши.
- Встроенный инструментарий доступности и документация для обеспечения совместимых, пригодных для использования конструкций.
Как использовать компоненты AI
- Создание или импорт темы установить цвет, типографику, интервалы и правила движения вашего бренда.
- Дизайн компонентов или генеративные шаблоны использование параметрического контроля для определения того, как дизайн развивается с изменениями ввода.
- Увеличение и итерация путем настройки параметров, блокировки входов, которые вы хотите сохранить, и сохранения нескольких итераций.
- Экспорт или публикацияВыберите формат (например, React, CSS, SVG) или опубликуйте размещенные страницы/активы для быстрого обмена.
- Аудит доступностииспользование автоматизированной контрастности и доступных комбинаций в рамках тем для обеспечения инклюзивности.
Основные концепции
- Конструкция на основе ограничений: используйте весы, токены и правила для обеспечения согласованных результатов.
- Токены дизайна: единственный источник истины для цветов, типографики, движения, теней и расстояния.
- Генеративные компоненты: развивающиеся элементы пользовательского интерфейса, которые могут быть настроены с помощью параметров.
- Тематический рабочий процесс: импорт, редактирование или создание тем, которые автоматически определяют стиль компонентов.
- Многоформатный экспорт: широкая совместимость с популярными конвейерами разработки и проектирования.
- Документы доступности: мгновенная обратная связь по контрасту и доступным комбинациям в рамках темы.
- Адаптивная тематика: определите точки разрыва и убедитесь, что типографика, макет и расстояние адаптируются к размерам.
- Поддержка переменных шрифтов: полный доступ к пользовательским осям для мелкозернистого управления типографикой.
- Кураторские дизайнерские активы: галерея предустановок и компонентов для ускорения проектных работ.
Как это работает
- Определите тему и дизайнерские токены для кодирования рекомендаций вашего бренда.
- Создавайте или генерируйте компоненты, которые уважают эти токены и ограничения.
- Итерация путем регулировки параметров, блокировки предпочтительных входов и сохранения нескольких итераций.
- Экспорт в нужные форматы или публикация непосредственно в виде размещенных страниц с активами для стилей (JS, JSON, CSS, HTML и т.д.).
- Используйте автоматизированные средства обеспечения доступности для обеспечения совместимых цветовых контрастов и доступных комбинаций.
Безопасность и лицензирование
- В качестве инструмента с открытым исходным кодом взносы и использование должны соответствовать лицензиям проекта и условиям репозиториев исходного кода.
Ключевые особенности
- Инструмент проектирования без кода / с низким кодом для создания компонентов, страниц и сайтов
- Генеративные компоненты с параметрическим контролем и дизайнерскими токенами
- Импорт темы и создание для обеспечения соблюдения руководящих принципов бренда
- Конструктивные рабочие процессы на основе ограничений с масштабируемыми системами
- Многоформатный экспорт (React, JS, JSON, JSX, SVG, PNG, HTML, CSS, CSS пользовательские свойства, Sass)
- Публикация в один клик для размещенных страниц и активов
- Автоматизированные док-станции доступности и контрастность в темах
- Адаптивная тематика для нескольких точек останова (типография, макет, интервал)
- Полная поддержка переменных шрифтов для мелкозернистого управления типографикой
- Кураторские предустановки и дизайнерские активы для быстрой итерации
