Словами самого skill
Генерирует документацию по передаче дизайна разработчикам на основе дизайна — для команд, чей дизайн готов к инженерной работе и нуждается в спецификации. Укажите URL Figma или, в качестве запасного варианта, описание или скриншот, и агент проработает визуальные спецификации, спецификации взаимодействия, спецификации контента, edge cases и доступность.
Результат — это спецификация передачи в разработку в формате Markdown с разделами для обзора, макета, используемых design token, компонентов, состояний и взаимодействий, адаптивного поведения, edge cases, а также анимации и движения. Четыре заявленных принципа — указывать всё, а не предполагать, ссылаться на токены, а не на исходные значения, показывать каждое состояние и объяснять причину поведения.
Что он выдаёт
- Таблица design token, где перечислены каждый токен, его значение и назначение.
- Таблица компонентов, в которой для каждого компонента указаны вариант, props и заметки об особом поведении.
- Таблица анимации и движения, фиксирующая элемент, триггер, анимацию, длительность и easing.
Как это работает
- 01Определить источник дизайна
URL Figma означает, что дизайн берётся из Figma; без него skill работает на основе текстового описания или скриншота.
- 02Указать визуальные детали
Точные отступы, поля и ширины, ссылки на design token для цветов, типографики и отступов, адаптивные breakpoints, а также варианты и состояния компонентов.
- 03Указать взаимодействия
Поведение при клике и тапе, состояния при наведении, поддержка жестов, а также переходы с указанием длительности и easing.
- 04Учесть контент и edge cases
Ограничения по количеству символов, обрезка, пустые состояния, состояния загрузки и ошибок, а также минимальный и максимальный контент, более длинные международные строки, медленные соединения и отсутствующие данные.
- 05Добавить детали доступности
Порядок фокуса, ARIA-метки и роли, взаимодействия с клавиатурой и объявления для screen reader.
- 06Сформировать спецификацию по шаблону
Результат оформляется как спецификация передачи в разработку в формате Markdown с использованием структуры разделов и таблиц из файла.