Локализованное руководство по чтению
emil-design-engНазначение, использование и источник
Этот навык воплощает философию Эмиля Ковальски в отношении отточенности пользовательского интерфейса, проектирования компонентов, решений в области анимации и невидимых деталей, которые делают программное обеспечение приятным на ощупь.
Источник получен:
- Репозиторий-источник
- vercel-labs/open-agents
- SKILL.md
.agents/skills/emil-design-eng/SKILL.md- Звёзды репозитория
- 5,871
- Последнее обновление репозитория
- 2026-08-29
- Категории Skills
- Рабочий процесс агента
- Время последнего сбора
Лицензия: MIT
Приведенные фрагменты описания рабочих процессов являются вспомогательными средствами для чтения, а не исполняемыми инструкциями от Codez. Для создания этой страницы не использовались сторонние инструменты.
Приведённые ниже фрагменты, описывающие цели и рабочие процессы, представляют собой исходный материал, систематизированный и переведённый для удобства чтения. Они отличаются от отдельно обозначенного редакционного анализа Codez.
Что делает этот навык
Этот навык воплощает философию Эмиля Ковальски в отношении отточенности пользовательского интерфейса, проектирования компонентов, решений в области анимации и невидимых деталей, которые делают программное обеспечение приятным на ощупь.
Как работает рабочий процесс на вышестоящем уровне
Когда использовать пружины?
Взаимодействие с помощью перетаскивания с учетом инерции. Элементы, которые должны ощущаться «живыми» (как динамический остров от Apple). Жесты, которые можно прервать в середине анимации. Декоративные взаимодействия с отслеживанием мыши.
проход вверх по течению · L143 ↗Проектирование и инженерия
Вы — инженер-конструктор с тонким чувством стиля. Вы создаёте интерфейсы, где каждая деталь в совокупности создаёт ощущение правильности. Вы понимаете, что в мире, где программное обеспечение каждого достаточно хорошее, решающее значение имеет вкус.
проход вверх по течению · L6 ↗Вкус — это результат тренировки, а не врожденных качеств.
Хороший вкус — это не личное предпочтение. Это развитый инстинкт: способность видеть за пределами очевидного и распознавать то, что действительно выделяет. Вы развиваете его, окружая себя отличными работами, глубоко размышляя о том, почему что-то доставляет удовольствие, и неустанно практикуясь. При создании пользовательского интерфейса не просто заставляйте его работать. Изучайте, почему лучшие интерфейсы ощущаются именно так. Анализируйте анимацию. Изучайте взаимодействия. Будьте любопытны.
проход вверх по течению · L12 ↗Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)Требования и настройка
Из этого файла не был выбран фрагмент с краткими требованиями. Это не означает, что у навыка нет зависимостей. Проверьте инструкции по настройке репозитория и указанные файлы.
Ограничения и проверки качества
Никогда не анимируйте, изменяя масштаб.0)
В реальном мире ничто не исчезает и не появляется полностью. Элементы, созданные на основеscale(0)Они выглядят так, будто появляются из ниоткуда. Начиная сscale(0.9)или выше, в сочетании с прозрачностью. Даже едва заметный начальный масштаб делает вход более естественным, как воздушный шар, форма которого видна даже в сдутом состоянии.
Начните с безопасного пробного периода.
- Проверьте поддерживаемый хост и инструкции по установке репозитория. Храните каталог Skill, а также связанные с ним скрипты, ресурсы и документацию вместе;SKILL.mdВ одиночку можно опустить зависимости.
- Предоставьте агенту ваши реальные входные данные, желаемый результат и критерии приемки. Синтаксис вызова и доступные инструменты зависят от хоста; данный сайт не предполагает универсальной команды установки.
- Попробуйте запустить исходный рабочий процесс в тестовом проекте или в его копии. Перед тем как разрешить операции, изменяющие файлы, удаленные сервисы или оплачиваемые ресурсы, проверьте их.
- Проверьте выходные данные на соответствие исходным проверкам качества и вашим собственным требованиям. Успешный запуск или большое количество звезд в репозитории не гарантируют корректного результата.
Подробнее читайте в источнике.
- Проектирование и инженерия
- Вкус — это результат тренировки, а не врожденных качеств.
- Незаметные детали накапливаются.
- Красота – это рычаг.
- Формат рецензии (обязательно)
- Структура принятия решений в области анимации
- 1Анимация вообще нужна?
- 2В чём цель?
- 3Какой метод смягчения политики следует использовать?
- 4Насколько быстро это должно происходить?
- Воспринимаемая производительность
- Весенние анимации
- Когда использовать пружины?
- Взаимодействие мышей на основе пружин
- Пружинная конфигурация
- Преимущество прерываемости
- Кнопки должны быть отзывчивыми.
- Никогда не анимируйте, изменяя масштаб.0)
- Сделайте так, чтобы поп-оверы учитывали происхождение ингредиентов.
- Всплывающие подсказки: пропускать задержку при последующих наведениях курсора.
- Используйте CSS-анимации вместо ключевых кадров для прерываемого пользовательского интерфейса.
- Используйте размытие, чтобы скрыть несовершенные переходы.
- Анимируйте состояния при входе с помощью @starting-style
- translateY с процентами
- Функция scale() также масштабирует дочерние элементы.
- 3D-преобразования для глубины
- transform-origin
- контур клипа для анимации
- Вставка
- Вкладки с идеальными цветовыми переходами
Смежные навыки
Перевод и сфера применения
В этом руководстве по чтению представлены избранные отрывки из закрепленного текста выше по течению.SKILL.mdПеревод выполнен с помощью переводчика. Это не полное руководство и не гарантия проверенной совместимости. Перед использованием ознакомьтесь с оригиналом и указанными в нем файлами.
Данное введение относится к закрепленной ниже версии; текущая активность в репозитории и время сбора данных отображаются отдельно.
- Закрепленный источник
- Прочитайте оригинал ↗
- Источник получен
- Исходный коммит
cf865e94de7729751c747171785b6ce57e7b178c- Исходный SHA-256
9d261c73de2c2c4dc5662ab20117b8e045c7b71958f8042acf037325444ebe6b