AI Web Design & Motion Design Skill System

Введение

AI уже умеет писать сайты. Он может за несколько минут собрать landing page, React dashboard, компонент, форму, hero section, анимацию, scroll reveal или целый frontend artifact. Но между "AI написал код" и "AI сделал хороший сайт" есть огромная разница.

Главная проблема не в том, что модель не знает CSS, React или GSAP. Проблема глубже: без системы AI часто выбирает не тот уровень решения. Он может добавить тяжелый scroll library там, где хватило бы transition; сделать одинаковые карточки на каждом блоке; придумать фейковые логотипы клиентов; превратить dashboard в marketing landing; вставить generic gradients; использовать устаревший framer-motion импорт в новом проекте; добавить animation spam вместо motion design.

То есть AI не столько "не умеет", сколько не имеет достаточно строгого маршрутизатора решений. Он видит запрос "сделай красиво" и может пойти в любую сторону: декоративный шум, случайные анимации, stock-like hero, fake metrics, бесконечные карточки, purple gradients, hover-scale everywhere. Это и есть типичный AI-slop в web design.

Мы решили не лечить это одним огромным prompt. Вместо этого собрали полноценную skill-family: набор связанных AI skills, где каждый отвечает за свою область, а главный router выбирает правильный путь.

Эта статья подробно объясняет, как устроена такая система, зачем она нужна, какие ошибки она исправляет и как она помогает AI-агенту создавать более качественные сайты, UI и motion design.

Проблема: AI не хватает не знаний, а routing

Когда пользователь пишет:

> "Сделай сайт красивее"

или:

> "Добавь анимацию"

или:

> "Оживи лендинг"

AI должен сначала понять, что именно требуется:

• аудит существующего сайта;
• полный редизайн;
• создание сайта с нуля;
• точечный UI polish;
• motion design;
• scroll storytelling;
• design-system extraction;
• browser QA;
• исправление accessibility/responsive проблем;
• сохранение текущей структуры продукта.

Без routing он часто смешивает все вместе. Например:

• задача была "исправь dashboard UI", а AI делает большой marketing hero;
• задача была "добавь scroll animation", а AI ставит GSAP для простого fade-in;
• задача была "сделай landing page", а AI автоматически добавляет parallax, smooth scroll и Lottie;
• задача была "проведи аудит", а AI сразу переписывает половину сайта;
• задача была "сохрани текущий стиль", а AI приносит новый визуальный язык;
• задача была "сделай аккуратнее", а AI добавляет hover-scale на каждый элемент.

Поэтому ядром системы стал не отдельный animation skill, а router.

Архитектура: не mega-skill, а skill-family

Один огромный skill для "всего frontend" быстро превращается в кашу. В нем смешиваются дизайн, UX, React, CSS, GSAP, Lottie, accessibility, SEO, browser testing, русские промпты, Figma, Open Design, screenshots и build tooling. Такой skill становится трудно читать, трудно обновлять и трудно trigger-ить.

Мы пошли другим путем: разделили систему на независимые, но связанные skills.

web-design-motion-skill-family/
├── frontend-motion-style-system     # router для visual/motion/media/3D ambiguity
├── frontend-design                  # visual direction, anti-slop, content discipline
├── frontend-ui-engineering          # implementation quality, accessibility, responsive
├── audit-dizaina-saita              # аудит существующего сайта
├── redizain-saita                   # полный редизайн существующего сайта
├── sozdat-dizain-dlya-saita         # создание сайта с нуля
├── ui-designer                      # extraction из screenshots/URLs/code/tokens
├── motion-framer                    # Motion for React
├── gsap-scrolltrigger               # advanced scroll choreography
├── lottie-animations                # dotLottie/Lottie assets
├── rive-interactive                 # Rive state machines
├── lightweight-3d-effects           # legacy/niche decorative depth
├── browser-qa-localhost             # localhost verification
├── browser-qa-console-logs          # console/runtime QA
└── frontend-skill-update            # maintenance skill

Это не просто список. Это система ролей.

Главный router: frontend-motion-style-system

frontend-motion-style-system отвечает за ситуации, где есть неоднозначность:

• "оживи сайт";
• "добавь анимацию";
• "скролл-анимация";
• "сделай визуально интереснее";
• "добавь motion";
• "добавь 3D";
• "сделай необычно";
• "нужен scroll effect";
• "добавь Lottie/Rive";
• "сделай hero более живым".

Но этот router не должен перехватывать каждую обычную frontend задачу. Если пользователь пишет:

> "Исправь форму"

или:

> "Сделай таблицу аккуратнее"

то это не motion routing. Это frontend-ui-engineering.

Именно поэтому мы сузили description router-а: он должен срабатывать при visual/motion ambiguity или явном запросе на animation/media/3D, но не при любой UI consistency задаче.

Motion routing policy

Главное правило:

> Используй самый простой motion system, который решает задачу.

Simple hover/focus/state feedback     -> CSS
React layout/gesture/exit animation   -> Motion
Pinned/scrubbed scroll storytelling   -> GSAP ScrollTrigger
Designer-exported vector asset        -> dotLottie / Lottie
Interactive state-machine asset       -> Rive
Real 3D scene                         -> Three.js / React Three Fiber
Small decorative depth                -> CSS or lightweight legacy/niche only

Это защищает систему от типичной ошибки: использовать GSAP, Lottie или 3D там, где достаточно двух CSS transitions.

Frontend Design: визуальная идея вместо generic AI layout

frontend-design отвечает не за код как таковой, а за visual direction.

Перед тем как менять страницу, AI должен понять:

• что это за продукт;
• кто аудитория;
• какая задача страницы;
• landing это, dashboard, portfolio, tool, game или editorial;
• какой brand register нужен: premium, utilitarian, playful, technical, institutional;
• какой visual risk допустим;
• какие реальные assets, content и constraints есть;
• что нельзя выдумывать.

Это важно, потому что "красиво" для SaaS dashboard и "красиво" для fashion portfolio — разные вещи.

Anti-slop quality gates

В skill были добавлены конкретные warning signs:

• generic purple/blue gradients;
• одинаковые card grids;
• fake metrics;
• unsourced testimonials;
• invented logos;
• meaningless CTA;
• hover-scale spam;
• pulse loops;
• tiny uppercase eyebrow в каждой секции;
• stock-like screenshots;
• weak contrast;
• clipped headings;
• mobile hero, где CTA уехал вниз или перекрыт.

Но это не список запретов ради запретов. Главное — не стерильность, а намеренность. Дизайн должен иметь идею, но идея должна подходить продукту.

Frontend UI Engineering: quality gate для реализации

frontend-ui-engineering — это pragmatic engineering layer.

Он проверяет:

• semantic HTML;
• visible focus;
• keyboard path;
• labels/errors/forms;
• aria-describedby;
• preserved input after validation errors;
• disabled/loading states;
• responsive layout;
• 320 CSS px;
• 400% zoom/reflow;
• touch targets;
• layout stability;
• CLS risks;
• media dimensions/aspect-ratio;
• no transition: all;
• no layout-property animation for frequent UI;
• console errors;
• browser verification.

Именно этот skill не дает красивому макету превратиться в хрупкую картинку.

Русские site workflows

Так как реальные пользователи часто пишут по-русски, мы сделали отдельные русские skills:

• audit-dizaina-saita;
• redizain-saita;
• sozdat-dizain-dlya-saita.

Это оказалось важнее, чем кажется. Простые фразы вроде:

• "сделай сайт";
• "нужен сайт";
• "сверстай лендинг";
• "переделай сайт";
• "что не так с дизайном";
• "сделай красивее";
• "оживи сайт";

должны попадать в правильный workflow.

Audit vs Redesign vs Greenfield

Мы разделили три сценария:

1. Audit: сайт уже есть, нужно понять, что не работает, и улучшить точечно.
2. Redesign: сайт уже есть, но нужно переосмыслить visual language.
3. Create: сайта нет или пользователь хочет начать с нуля.

Это защищает от ситуации, где AI на запрос "посмотри дизайн" начинает делать полный редизайн.

Preservation rules: не ломать production contracts

Для существующих проектов AI должен сохранять:

• routes/slugs;
• nav labels;
• form fields;
• analytics hooks;
• test selectors;
• legal/cookie copy;
• canonical/meta;
• heading baseline;
• SEO-critical structure;
• accessibility patterns.

Это особенно важно в vibe coding. Когда AI быстро меняет frontend, он может случайно сломать то, что не видно визуально: analytics events, SEO, формы, legal текст, тестовые селекторы.

Поэтому preservation rules стали обязательной частью skills.

Motion design: меньше эффектов, больше смысла

Плохая AI-анимация выглядит так:

• все элементы появляются с одинаковым fade-in;
• каждая карточка увеличивается на hover;
• кнопки пульсируют;
• scroll effects не имеют отношения к контенту;
• первый экран скрыт до animation complete;
• нет reduced-motion;
• mobile layout прыгает;
• GSAP используется ради двух простых reveal.

Хорошая AI-анимация начинается с motion budget.

Motion budget

Перед добавлением motion AI должен ответить:

• зачем нужна анимация;
• что она объясняет;
• как часто пользователь будет ее видеть;
• не мешает ли она task flow;
• что будет при prefers-reduced-motion;
• не вызывает ли она layout shift;
• не перегружает ли main thread;
• не ухудшает ли mobile.

Пример правильного выбора runtime

// Simple UI feedback: CSS or Motion is enough.
import { motion, useReducedMotion } from "motion/react";

export function SaveButton({ busy }: { busy: boolean }) {
  const reduce = useReducedMotion();

  return (
    <motion.button
      whileTap={reduce ? undefined : { scale: 0.97 }}
      animate={{ opacity: busy ? 0.72 : 1 }}
      transition={{ duration: reduce ? 0 : 0.18, ease: "easeOut" }}
      disabled={busy}
    >
      {busy ? "Saving" : "Save changes"}
    </motion.button>
  );
}

GSAP нужен не для этого. GSAP нужен там, где есть настоящая scroll choreography:

gsap.registerPlugin(ScrollTrigger);

const mm = gsap.matchMedia();

mm.add("(min-width: 900px)", () => {
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".story",
      start: "top top",
      end: "+=1800",
      scrub: true,
      pin: true,
      invalidateOnRefresh: true
    }
  });

  tl.to(".flow-node", { opacity: 1, stagger: 0.2 })
    .to(".flow-line", { scaleX: 1, transformOrigin: "left" });
});

Lottie и Rive: bounded assets, не общий motion engine

Для Lottie мы сделали dotLottie-first подход:

• .lottie для новых web assets;
• @lottiefiles/dotlottie-react;
• @lottiefiles/dotlottie-web;
• workers только когда есть смысл;
• slots/themes/state machines как bounded asset logic;
• lottie-web только для legacy Bodymovin JSON.

Для Rive:

• default: @rive-app/react-webgl2;
• Rive только для interactive/state-machine/data-bound animation;
• canvas/WebGL sizing обязательно;
• wrapper вокруг Rive не должен заменять semantic HTML;
• если Rive — часть control, label/focus/keyboard живут в HTML.

Browser QA: без проверки в браузере нельзя говорить "готово"

Для frontend изменений проверки через build недостаточно.

Мы добавили обязательный Browser QA:

• desktop;
• mobile;
• console errors;
• broken images/assets;
• horizontal overflow;
• reduced motion;
• layout shift;
• nonblank canvas/WebGL;
• form states;
• keyboard path where relevant.

Это особенно важно для AI-generated UI. Код может собираться, но визуально быть сломанным: текст перекрывается, canvas blank, кнопка уехала, mobile menu не закрывается, animation hides content at first paint.

References: нужны, но не как мусорная свалка

Мы оставили references только там, где они реально помогают:

• motion routing matrix;
• UI quality gates;
• design-system output;
• current Motion patterns;
• dotLottie runtime notes;
• Rive runtime notes;
• GSAP lifecycle notes.

Что удалили:

• огромные unreferenced example dumps;
• stale generated code;
• broken scripts;
• fake starter templates;
• old CDN-heavy 3D examples;
• schema-unaware animation optimizers;
• @latest snippets;
• deprecated package guidance.

Reference-файл полезен только если:

• он связан из SKILL.md;
• он актуален;
• он не дублирует основной skill;
• он помогает агенту принимать решение;
• он не заставляет копировать устаревший код.

Evals: проверка routing поведения

Для skill-family нужны routing evals. Мы добавили cases вроде:

{
  "prompt": "Оживи сайт красиво, но без перегруза",
  "expect": [
    "frontend-motion-style-system",
    "frontend-design",
    "frontend-ui-engineering"
  ]
}

{
  "prompt": "Сделай форму аккуратнее без анимации",
  "expect": ["frontend-ui-engineering"],
  "expect_not": [
    "frontend-motion-style-system",
    "motion-framer",
    "gsap-scrolltrigger"
  ]
}

{
  "prompt": "Сделай скролл-анимацию с pin и scrub",
  "expect": [
    "frontend-motion-style-system",
    "gsap-scrolltrigger"
  ]
}

Evals нужны не для красоты. Они показывают, не стал ли router слишком широким или слишком узким.

Почему это важно для Vibe Coding

Vibe coding — это не "пусть AI делает что угодно". Хороший vibe coding требует системы:

• AI должен быстро двигаться;
• но не ломать production contracts;
• экспериментировать;
• но проверять результат;
• делать красиво;
• но не создавать fake proof;
• добавлять motion;
• но не перегружать сайт;
• использовать libraries;
• но не тащить dependency ради одного hover.

Skill-family дает AI-агенту operational taste. Не просто "знание технологий", а набор правил выбора.

Итоговая схема

flowchart TD
    A["User prompt"] --> B{"Intent?"}
    B -->|Existing site critique| C["audit-dizaina-saita"]
    B -->|Full redesign| D["redizain-saita"]
    B -->|New site| E["sozdat-dizain-dlya-saita"]
    B -->|Visual direction| F["frontend-design"]
    B -->|Implementation QA| G["frontend-ui-engineering"]
    B -->|Motion/media ambiguity| H["frontend-motion-style-system"]
    H --> I{"Runtime choice"}
    I -->|Simple UI| J["CSS"]
    I -->|React layout/gesture/exit| K["Motion"]
    I -->|Pin/scrub/timeline| L["GSAP ScrollTrigger"]
    I -->|Designer vector asset| M["dotLottie"]
    I -->|State-machine animation| N["Rive"]
    I -->|Real 3D| O["Three.js/R3F"]
    C --> P["Browser QA"]
    D --> P
    E --> P
    F --> P
    G --> P
    H --> P

Практический prompt

Вот пример prompt-а, который использует систему правильно:

Проведи полный аудит и улучшение локального сайта.

Открой локальный сайт в браузере, проверь desktop и mobile. Сначала оцени визуал:
композицию, first screen, типографику, отступы, CTA, сетку, адаптивность,
контраст, формы, состояния, консистентность и ощущение AI/generic.

Затем предложи и сразу реализуй улучшения в коде. Не ломай routes/slugs, формы,
SEO/meta, analytics/test selectors, legal/cookie copy и accessibility patterns.
Если это dashboard/tool/product UI, не превращай его в landing page.

Отдельно используй frontend-motion-style-system для motion-аудита:
придумай 2-4 уместных motion moments и выбери правильный runtime:
CSS, Motion, GSAP ScrollTrigger, Lottie или Rive.

Не добавляй parallax/smooth scroll/3D/Lottie/Rive по умолчанию.
Сделай reduced-motion fallback.

После правок проверь desktop/mobile, console errors, horizontal overflow,
layout shift и reduced motion. В финале кратко напиши, что изменил и как проверил.

Заключение

Хороший AI frontend workflow — это не один magic prompt. Это система маршрутизации, quality gates, runtime policies, verification и аккуратно разделенных responsibilities.

Мы получили не один skill, а собственную web/design/motion skill-family. Она помогает AI-агенту:

• лучше понимать русские и английские запросы;
• отличать audit от redesign;
• не превращать dashboard в landing;
• не добавлять GSAP без причины;
• не выдумывать fake proof;
• использовать Motion, Lottie, Rive и 3D только там, где это оправдано;
• проверять результат в браузере;
• сохранять production contracts;
• делать сайты живее, но не хаотичнее.

Это и есть следующий шаг в AI-assisted frontend development: не просто "AI пишет код", а "AI работает внутри инженерной и дизайнерской системы".

Где это применимо

AI-assisted frontend development, дизайн-системы и production QA

Этот workflow полезен, когда AI coding должен делать не просто быстрые страницы, а интерфейсы с дизайном, motion policy, responsive quality и проверкой в браузере.

• Команды, которые используют Codex, Claude Code или похожих AI-агентов для сайтов и product UI.
• Проекты, где vibe coding нужно разбавить инженерной дисциплиной: review, тестами, browser QA и deployment constraints.
• Бизнесы, которым нужны AI web design, AI automation interfaces или внутренние tools без generic AI-slop визуала.

Обсудить AI-автоматизацию