106.9K+Скачать
Перейти к руководству
CSS Animationавтор neonwatty

CSS Animation Навык.

Создавайте HTML/CSS-демонстрации функций на основе интерфейса реального приложения.

  • CSS
  • Ключевые кадры
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · css-animationSKILL.md
Задача Создавайте HTML/CSS-демонстрации функций на основе интерфейса реального приложения. Результаты Структурированный бриф с дизайн-токенами, геометрией и таймингом сцены. Перед началом Исходный процесс предполагает Claude-in-Chrome и доступное приложение. В другой среде нужен равноценный способ проверки либо явное указание недостающих данных.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

01 Возможности

Создавайте HTML/CSS-демонстрации функций на основе интерфейса реального приложения

Исследуйте приложение, составьте бриф демонстрации и создайте HTML/CSS-анимацию с отдельными композициями для компьютера и телефона и проверкой статичных состояний.

Процесс на основе источникаНе тест выполнения

Принцип работы

css-animation создаёт браузерные демонстрации функций реальных приложений. Сначала изучает визуальный язык и компоновку приложения, затем планирует демонстрацию «до — действие — после» либо карусель экранов. Результат — автономная HTML/CSS-анимация вместе с брифом.

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

Ожидаемые результаты

  • Структурированный бриф с дизайн-токенами, геометрией и таймингом сцены.
  • Автономная HTML-демонстрация функции или карусель экранов.
  • Отдельные файлы для компьютера и телефона, если запрошены оба варианта.
Смотреть пример задания

От задания до проверки

  1. 01
    Исследуйте реальный интерфейс

    Осмотрите доступное приложение и нужные состояния. Зафиксируйте цвета, типографику, отступы и фактическую геометрию при целевом размере окна.

  2. 02
    Спланируйте и создайте демонстрацию

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

  3. 03
    Проверьте статику, затем тайминг

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

02 Когда использовать

Когда использовать

Исходный процесс предполагает Claude-in-Chrome и доступное приложение. В другой среде нужен равноценный способ проверки либо явное указание недостающих данных.

Хорошо подходит

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

Ограничения

  • Исследование предполагает браузерные инструментыИсходный процесс предполагает Claude-in-Chrome и доступное приложение. В другой среде нужен равноценный способ проверки либо явное указание недостающих данных.
  • Главный результат — HTMLДокументированный результат — веб-анимация, а не закодированный GIF или MP4.
  • Бриф — точка проверкиИсточник требует согласовать бриф до генерации; порядок этой проверки по-прежнему определяется уже выданными разрешениями пользователя и локальным процессом.

Что подготовить

  • Доступ к приложениюПредоставьте URL функции или локальное превью и доступ к нужным состояниям.
  • Сценарий функцииОпределите начальное состояние, действие и полезный видимый результат.
  • Размер окна и место использованияУкажите компьютер, телефон или оба варианта, а также где будут использоваться файлы.

03 Важные решения

Важные решения

  1. Облик конкретного приложения

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

  2. Воспроизводимые правки

    Бриф фиксирует решения по компоновке и таймингу вместе с HTML.

  3. Разделение задач проверки

    Зафиксированные состояния выявляют дефекты компоновки, а воспроизведение — проблемы темпа.

04 Пример задания

Попробуйте конкретное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Изучите исходные инструкции и настройку

Предоставьте URL функции или локальное превью и доступ к нужным состояниям.

Исходный файл в репозитории
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md

Ссылка ниже открывает инструкции автора. Перед использованием изучите требования к настройке в репозитории; это не команда установки.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используй css-animation для демонстрации группировки в моём локально запущенном приложении планирования. Изучи реальную функцию перед подготовкой анимации «до — действие — после»: несгруппированные элементы, действие пользователя, затем упорядоченный результат. Сохрани цвета, типографику и реальные подписи приложения. Подготовь бриф для компьютера и отдельную мобильную композицию с акцентом на основном действии. На телефоне используй индикатор касания. Проверь зафиксированные начальное состояние, состояние обработки и конечное состояние до настройки полного цикла. Передай бриф и HTML-файлы и укажи любое поведение приложения, которое не удалось проверить.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

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

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesignЧитать краткое руководство

05 Источник и лицензия

Исходные материалы и лицензия

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

Владелец источника
neonwatty
Репозиторий
neonwatty/css-animation-skill
Файл навыка
SKILL.md
Лицензия
MIT
Проверенный снимок
2026-11-02 · 68580a34101c
Редакционное резюме источника
Создавайте HTML/CSS-демонстрации функций на основе интерфейса реального приложения.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Результат — видео?

Основной результат по источнику — автономный HTML/CSS с минимальным JavaScript. Кодирование видео не входит в этот документированный вариант по умолчанию.

Можно ли использовать одну масштабируемую компоновку для компьютера и телефона?

Источник рекомендует отдельные файлы и осмысленное упрощение мобильной версии: меньше элементов и индикаторы действий, рассчитанные на касания.

Что делать, если приложение нельзя осмотреть?

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

OpenDesign

Храните задание и работу над дизайном вместе.

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

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md