Скиллы для Codex — дизайн и интерфейсы

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

Помогает разработчикам и дизайнерам собрать страницу на HTML/CSS по визуальному образцу известного продукта. Каталог содержит 54 шаблона с цветами, типографикой, компонентами, отступами и поведением на разных размерах экрана.

Помогает создавать оригинальные художественные работы на p5.js: узоры, потоки и системы частиц, возникающие по заданным правилам. Подходит для исследования вариантов композиции через изменяемые параметры и воспроизводимую случайность.

Помогает разработчикам перенести отдельные React-компоненты или целый проект с Radix UI на Base UI. Охватывает компоненты shadcn, собственные реализации и использующий их код, с сохранением пользовательских доработок.

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

Помогает сформулировать конкретные требования к внешнему виду сайта или интерфейса перед разработкой. Превращает описание вроде «сделай минималистично» в согласованный набор цветов, шрифтов, правил композиции, отступов и ограничений.

Помогает продуктовым командам разобрать качество интерфейса по десяти принципам Дитера Рамса и выбрать дальнейшее направление. Оценка опирается на конкретные свидетельства и заканчивается подготовкой запроса для планирования изменений.

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

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

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

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

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

Помогает авторам улучшить или сократить готовый научный текст, перевести его с китайского на английский и исправить вёрстку LaTeX. Сохраняет факты, терминологию и границы выводов, подтверждённых данными.

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

Помогает разработчикам игр одновременно менять свойства множества объектов, выравнивать их и раскладывать по сетке или геометрической фигуре. Также подходит для обработки массивов, настроек и строк средствами Phaser.

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

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

Помогает маркетологам и продуктовым командам спланировать эксперимент: сформулировать гипотезу, выбрать варианты, метрики и объём выборки. Также направляет внедрение теста и разбор результатов с учётом пользы для бизнеса.

Помогает разработчикам проверить код интерфейса по Web Interface Guidelines от Vercel. Подходит для разбора доступности, дизайна и удобства использования сайта.

Помогает аналитикам и исследователям выбрать подходящий график и построить его на Python для отчёта, публикации или интерактивного просмотра. Учитывает читаемость, точность отображения и доступность.

Помогает разработчикам перенести выбранный макет Figma в код проекта. Учитывает существующие компоненты, стили и устройство приложения.

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

Помогает разработчикам разбираться, почему элементы интерфейса json-render отображаются неправильно. Позволяет смотреть дерево описания интерфейса, менять состояние во время работы, отслеживать действия и поступающие изменения.

Помогает авторам визуальных материалов применить цвета и типографику OpenAI и Codex. Подходит, когда документ или другой материал должен соответствовать этому фирменному стилю.

Помогает разработчикам оптимизировать анимации GSAP, когда движение дёргается или браузер тратит слишком много ресурсов на пересчёт расположения и отрисовку. Подходит для длинных списков, анимаций при прокрутке и частых обновлений вслед за указателем.