creative-design

creative-design

frontend-design

20 547

Создавайте уникальные, промышленного уровня фронтенд-интерфейсы с высоким качеством дизайна. Используйте этот навык, когда пользователь просит создать веб-компоненты, страницы, артефакты, постеры или приложения (примеры включают веб-сайты, лендинги, панели управления, React-компоненты, HTML/CSS макеты или при стилизации/улучшении любого веб-интерфейса). Генерирует креативный, отточенный код и дизайн UI, избегая типичной AI-эстетики.

creative-design

ui-ux-pro-max

8 286

Интеллект в UI/UX дизайне. 50 стилей, 21 палитра, 50 сочетаний шрифтов, 20 диаграмм, 9 стеков (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Действия: планировать, строить, создавать, проектировать, внедрять, проверять, исправлять, улучшать, оптимизировать, расширять, рефакторить, проверять код UI/UX. Проекты: веб-сайт, лендинг, дашборд, админ-панель, e-commerce, SaaS, портфолио, блог, мобильное приложение, .html, .tsx, .vue, .svelte. Элементы: кнопка, модальное окно, навбар, сайдбар, карточка, таблица, форма, диаграмма. Стили: глассморфизм, клейморфизм, минимализм, брутализм, неуморфизм, сетка бенто, тёмный режим, адаптивный дизайн, скевоморфизм, плоский дизайн. Темы: цветовая палитра, доступность, анимация, макет, типографика, сочетание шрифтов, отступы, ховер, тень, градиент. Интеграции: shadcn/ui MCP для поиска компонентов и примеров.

creative-design

ui-design-system

7 954

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

creative-design

canvas-design

5 157

Создавайте красивые визуальные произведения искусства в документах .png и .pdf, используя философию дизайна. Вы должны использовать этот навык, когда пользователь просит создать плакат, произведение искусства, дизайн или другой статичный элемент. Создавайте оригинальные визуальные дизайны, никогда не копируя работы существующих художников, чтобы избежать нарушений авторских прав.

creative-design

mobile-design

3 188

Мобильный подход к дизайну и принятию решений для приложений iOS и Android. Взаимодействие через касания, шаблоны производительности, платформенные конвенции. Обучает принципам, а не фиксированным значениям. Используется при создании приложений на React Native, Flutter или нативных мобильных приложениях.

creative-design

theme-factory

2 177

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

creative-design

ux-researcher-designer

1 884

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

creative-design

3d-web-experience

1 420

Эксперт в создании 3D-опыта для веба - Three.js, React Three Fiber, Spline, WebGL и интерактивные 3D-сцены. Охватывает конфигураторы продуктов, 3D-портфолио, иммерсивные веб-сайты и добавление глубины веб-опыту. Используется при: 3D-сайт, three.js, WebGL, react three fiber, 3D-опыт.

creative-design

tailwind-patterns

1 122

Принципы Tailwind CSS v4. Конфигурация с приоритетом CSS, контейнерные запросы, современные паттерны, архитектура дизайн-токенов.

creative-design

algorithmic-art

846

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

creative-design

web-design-guidelines

695

Проверьте код пользовательского интерфейса на соответствие Руководству по веб-интерфейсам. Используйте при запросах "проверьте мой UI", "проверьте доступность", "аудит дизайна", "проверьте UX" или "проверьте мой сайт на соответствие лучшим практикам".

creative-design

scroll-experience

614

Эксперт в создании захватывающих скролл-ориентированных опытов — параллакс-сторителлинг, анимации при прокрутке, интерактивные повествования и кинематографические веб-опыты. Как интерактивные материалы NY Times, страницы продуктов Apple и отмеченные наградами веб-опыты. Делает сайты похожими на впечатления, а не просто страницы. Используется при: анимации прокрутки, параллаксе, сторителлинге при прокрутке, интерактивной истории, кинематографическом сайте.

creative-design

mermaid-diagrams

606

Полное руководство по созданию программных диаграмм с использованием синтаксиса Mermaid. Используется, когда пользователям необходимо создавать, визуализировать или документировать программное обеспечение с помощью диаграмм, включая диаграммы классов (моделирование предметной области, объектно-ориентированное проектирование), диаграммы последовательностей (потоки приложений, взаимодействия API, выполнение кода), блок-схемы (процессы, алгоритмы, пользовательские сценарии), диаграммы сущность-связь (схемы баз данных), диаграммы архитектуры C4 (контекст системы, контейнеры, компоненты), диаграммы состояний, git-графы, круговые диаграммы, диаграммы Ганта или любой другой тип диаграмм. Триггерами являются запросы на «диаграмму», «визуализацию», «моделирование», «построение карты», «показать поток» или при объяснении архитектуры системы, проектирования базы данных, структуры кода или потоков пользователя/приложения.

creative-design

executing-marketing-campaigns

582

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

creative-design

game-development

488

Оркестратор разработки игр. Направляет к платформенно-специфическим навыкам в зависимости от потребностей проекта.

creative-design

draw-io

390

Создание, редактирование и просмотр диаграмм draw.io. Используйте для редактирования XML файлов .drawio, конвертации в PNG, настройки макета и использования иконок AWS.

creative-design

figma

341

Используйте сервер Figma MCP для получения контекста дизайна, скриншотов, переменных и ресурсов из Figma, а также для преобразования узлов Figma в производственный код. Запускайте, когда задача связана с URL-адресами Figma, идентификаторами узлов, реализацией дизайн-в-код или настройкой и устранением неполадок Figma MCP.

creative-design

figma-implement-design

304

Преобразуйте узлы Figma в готовый к производству код с визуальной точностью 1:1, используя рабочий процесс Figma MCP (контекст дизайна, скриншоты, ресурсы и перевод проектных соглашений). Запускается, когда пользователь предоставляет URL-адреса Figma или идентификаторы узлов, либо запрашивает реализацию дизайнов или компонентов, которые должны соответствовать спецификациям Figma. Требуется рабочее подключение к серверу Figma MCP.

creative-design

accessibility-auditor

301

Специалист по веб-доступности для обеспечения соответствия WCAG, реализации ARIA и инклюзивного дизайна. Используется при аудите веб-сайтов на предмет проблем с доступностью, внедрении стандартов WCAG 2.1 AA/AAA, тестировании с помощью экранных читалок или обеспечении соответствия требованиям ADA. Эксперт в семантическом HTML, навигации с клавиатуры и совместимости с вспомогательными технологиями.

creative-design

claude-d3js-skill

234

Создание интерактивных визуализаций данных с использованием d3.js. Этот навык следует применять при создании пользовательских диаграмм, графиков, сетевых диаграмм, географических визуализаций или любой сложной визуализации данных на основе SVG, требующей тонкого контроля над визуальными элементами, переходами или взаимодействиями. Используйте это для индивидуальных визуализаций, выходящих за рамки стандартных библиотек построения графиков, будь то в React, Vue, Svelte, чистом JavaScript или любой другой среде.

creative-design

remotion-best-practices

225

Лучшие практики для Remotion - создание видео в React

creative-design

slack-gif-creator

218

Знания и инструменты для создания анимированных GIF, оптимизированных для Slack. Предоставляет ограничения, инструменты валидации и концепции анимации. Используйте, когда пользователи запрашивают анимированные GIF для Slack, например, «сделай мне GIF с X, делающим Y для Slack».

creative-design

interactive-portfolio

210

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

creative-design

excalidraw

193

Используется при работе с файлами *.excalidraw или *.excalidraw.json, когда пользователь упоминает диаграммы/блок-схемы или запрашивает визуализацию архитектуры — все операции Excalidraw делегируются подагентам для предотвращения исчерпания контекста из-за громоздкого JSON (отдельные файлы: 4k-22k токенов, могут превышать лимиты чтения)

creative-design

c4-architecture

124

Генерируйте документацию по архитектуре с использованием диаграмм Mermaid модели C4. Используйте при необходимости создания архитектурных диаграмм, документирования архитектуры системы, визуализации структуры программного обеспечения, создания диаграмм C4 или генерации диаграмм контекста/контейнера/компонента/развертывания. Триггеры включают "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".

creative-design

develop-web-game

121

Используйте, когда Codex разрабатывает или совершенствует веб-игру (HTML/JS) и нуждается в надежном цикле разработки и тестирования: внедряйте небольшие изменения, запускайте тестовый скрипт на основе Playwright с короткими вводами и намеренными паузами, проверяйте скриншоты/текст и анализируйте ошибки консоли с помощью render_game_to_text.

creative-design

imagegen

101

Используйте, когда пользователь запрашивает генерацию или редактирование изображений через OpenAI Image API (например: генерация изображения, редактирование/инпейтинг/маскирование, удаление или замена фона, прозрачный фон, фотографии продуктов, концепт-арт, обложки или пакетные варианты); запускайте встроенный CLI (`scripts/image_gen.py`) и требуйте `OPENAI_API_KEY` для живых вызовов.

creative-design

marp-slide

100

Создавайте профессиональные презентационные слайды Marp с 7 красивыми темами (по умолчанию, минималистичная, цветная, тёмная, градиентная, технологичная, бизнес). Используйте при запросах пользователей на создание слайдов, презентаций или документов Marp. Поддерживает пользовательские темы, макеты изображений и запросы «сделать красиво» с автоматическим улучшением качества.

creative-design

meme-factory

43

Генерируйте мемы с помощью API memegen.link. Используйте, когда пользователи запрашивают мемы, хотят добавить юмор в контент или нуждаются в визуальных материалах для социальных сетей. Поддерживает более 100 популярных шаблонов с пользовательским текстом и стилями.

creative-design

premium-web-design

0

Переведите следующий текст с английского на русский. Правила: - Сохраняйте смысл и техническую терминологию. - Оставляйте markdown/кодовые фрагменты без изменений. - Возвращайте только валидный JSON объект: {"text":"..."} ТЕКСТ: >