🔥 UI/UX для AI-агентов: 13 скиллов нашей соклубницы + 5 шрифтов против нейрослопа
Главная проблема AI-дизайна сегодня не в том, что модели
«не умеют красиво». Проблема в том, что без системы они почти всегда скатываются в усреднённый визуальный язык.
Inter или Geist везде. Фиолетовый градиент. Центрированный hero. Одинаковые rounded cards. Glassmorphism. И через пять минут ты уже не понимаешь, какой именно AI-сервис открыл — все выглядят одинаково.
Вика показала интересный подход: вместо абстрактного «сделай красиво» давать агентам отдельные design-analysis skills. То есть не просить модель придумать стиль с нуля, а заранее подключать конкретный дизайн-язык.Гайд по мотивам Zoom-разбора Вики: дизайн-система, типографика, иерархия и визуальный вкус вместо шаблонного AI-стиля.
🧠 Что такое design-analysis skill
По сути это слой визуальных правил для агента: typography, colors, spacing, surfaces, components, hierarchy, density и характер интерфейса.
Не «сделай как Apple» на глаз, а дай агенту структурированную систему Apple и заставь проектировать внутри неё.
Это превращает вкус из расплывчатого пожелания в набор правил, которые AI может применять системно.
🔥 13 скиллов, которые использует Вика
1. resend-design-analysis
Стиль Resend: почти чёрный canvas, editorial-типографика, тонкие borders, code-first эстетика и аккуратные glow-эффекты.
Где использовать: developer tools, SaaS, AI-продукты, технические лендинги.
Открыть resend-design-analysis (
https://skillmd.com/skills/voltagent/resend-design-analysis)2. Composio-design-analysis
Тёмная developer-инфраструктура: black + electric blue, строгая сетка, технические блоки, mono-типографика.
Где использовать: AI agents, API, automation platforms, devtools.
Открыть Composio design analysis (
https://skillmd.com/skills/voltagent/composio-design-analysis)3. stripi-inspired-design-analysis
Fintech-эстетика: deep navy, electric indigo, gradient mesh, аккуратные карточки и плотный dashboard.
Где использовать: fintech, B2B, платежи, финансовые продукты.
4. vercel-inspired-design-analysis
Минимализм Vercel: почти чёрный текст, много воздуха, строгая сетка, mono для технических элементов и сильная визуальная иерархия.
Где использовать: SaaS, developer products, AI tools, инфраструктура.
Открыть Vercel design analysis (
https://skillmd.com/skills/voltagent/vercel-inspired-design-analysis)5. Ollama-design-analysis
Documentation-first подход: простая палитра, чистая типографика, понятный spacing и минимум декоративного шума.
Где использовать: open-source продукты, документация, developer tools.
6. pinterest-design-analysis
Visual-first UI: изображения, discovery, поиск, masonry/grid-паттерны и интерфейс, построенный вокруг контента.
Где использовать: marketplaces, каталоги, inspiration boards, контентные сервисы.
Открыть Pinterest design analysis (
https://skillmd.com/skills/voltagent/pinterest-design-analysis)7. playstation-design-analysis
Большие product renders, сочетание black / white / PlayStation Blue, сильные hero-блоки и минимум интерфейсного шума.
Где использовать: gaming, entertainment, cinematic landing pages.
Открыть PlayStation
DESIGN.md (
https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/playstation/DESIGN.md)8. Together-AI-Inspired-design-analysis
AI-infrastructure стиль: near-black + white поверхности и характерный orange → magenta → periwinkle акцент.
Где использовать: AI SaaS, модели, inference platforms, инфраструктурные продукты.
Открыть Together AI design analysis (
https://skillmd.com/skills/voltagent/together-ai-inspired-design-analysis)9. uber-inspired-design-analysis
Чёрно-белая система, мощная геометрическая типографика, pill-кнопки и editorial illustrations.
Где использовать: consumer apps, marketplaces, сервисные платформы.
Открыть Uber
DESIGN.md (
https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/uber/DESIGN.md)10. binance-design-analysis
Trading UI: near-black canvas, фирменный жёлтый акцент, dark/light themes и понятная семантика
Россия
▶ видео
