SuperDesign

• Вам нужен AI-агент для генерации UI-кода (HTML/CSS/Tailwind), который выглядит отполированным и современным, а не шаблонным.
• Вы создаёте лендинги, дашборды или интерфейсы с большим количеством компонентов и хотите, чтобы структурированный процесс проектирования выполнялся автоматически.
• Вам нужна согласованная тематизация в светлом/тёмном режимах с использованием современных цветовых техник, таких как oklch().
• Вам нужны доступные, mobile-first, адаптивные макеты с правильной семантической разметкой HTML из коробки.

• Вы работаете в нативной мобильной среде (iOS/Android) — данные рекомендации ориентированы на веб.
• Ваш проект использует жёсткую дизайн-систему (например, строгое следование Material Design), которая конфликтует с самоуверенными паттернами тем, представленными здесь.

Каждый интерфейс разрабатывается последовательно через четыре этапа: Дизайн макета, Дизайн темы, Дизайн анимации и Реализация. Такой подход исключает преждевременный переход к написанию кода до того, как будут проработаны структура и эстетика, что обеспечивает более целостные результаты.

Навык намеренно избегает устаревших универсальных палитр (таких как Bootstrap blue) и продвигает использование oklch() для перцептивно равномерного, современного определения цветов. Включены готовые шаблоны тем для тёмного режима (в стиле Vercel/Linear), нео-брутализма и гласморфизма с CSS-переменными, готовыми к использованию.

Предоставляется тщательно отобранный список Google Fonts в категориях sans-serif, моноширинных, с засечками и декоративных шрифтов, а также готовая CDN-интеграция для иконок Lucide и компонентов Flowbite — что полностью исключает необходимость угадывать при выборе типографики.

Краткая система нотации для планирования микровзаимодействий (например, button: 150ms [S1→0.95→1] press) позволяет сделать анимации осознанными. Определены рекомендуемые диапазоны тайминга для анимаций входа, состояний наведения, нажатия кнопок и переходов между страницами.

Руководящие принципы обеспечивают соблюдение семантического HTML, правильной иерархии заголовков, меток ARIA, минимального коэффициента контрастности цветов 4.5:1 и поддержки навигации с клавиатуры — гарантируя, что результаты соответствуют базовым стандартам доступности без дополнительных запросов.

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

Попросите вашего агента создать целевую страницу для SaaS-продукта, и SuperDesign обеспечит соблюдение структурированного макета (шапка → hero-блок → функции → подвал), подберёт современную пару шрифтов, применит согласованную цветовую тему и сгенерирует адаптивный CSS с подходом mobile-first — всё это без какого-либо ручного управления дизайном.

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

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

При создании интерфейса, который должен поддерживать как светлый, так и тёмный режим, подход SuperDesign на основе CSS-переменных и рекомендации по цветам oklch() помогают агенту выстроить систему с поддержкой тем с самого начала, а не добавлять тёмный режим в качестве доработки впоследствии.