AIKraft/AI/Войти
AIKraft/Skills/Вайрфрейм

Вайрфрейм

Create UI wireframes and mockups using drawio XML format with platform-specific UI component libraries. Best for web page layouts, iOS/Android mobile app mockups, and Bootstrap-based designs. Built on drawio with mockup-specific stencils. NOT for simple flowcharts (use mermaid) or data visualization (use vega).

markdown-viewer official Дизайн

Что делает навык

Генерация UI-вайрфреймов и макетов в формате drawio XML с использованием специфичных стенсинов для веб-страниц, iOS и Android. Подходит для создания мокапов и дизайнов, но не для блок-схем или визуализации данных.

Когда применять

  • Создание вайрфреймов веб-страниц (десктоп 1200px или 1440px)
  • Разработка макетов мобильных приложений для iOS (iPhone 375x812) и Android (360x800)
  • Проектирование экранов с использованием UI-компонентов из библиотек стенсинов
  • Визуализация навигационных потоков между экранами

Как работает

  1. Выбрать целевую платформу (Web, iOS или Android)
  2. Добавить UI-компоненты из библиотеки стенсинов (проверить точные имена в stencils/README.md)
  3. Расположить компоненты на экране с соблюдением отступов (10px, 20px или 40px)
  4. Добавить навигационные потоки между элементами
  5. Обернуть результат в блок кода с тегом drawio (никогда не использовать xml)
  6. Следовать базовым правилам структуры и маршрутизации краев из drawio SKILL.md

Примеры запросов агенту

Создай вайрфрейм главной страницы веб-сайта шириной 1440px с использованием стандартных UI-компонентов
Сгенерируй макет экрана мобильного приложения для iOS с формой входа и навигацией
Разработай вайрфрейм карточки товара для Android-приложения с отступами 20px

Что понадобится

  • drawio SKILL.md (базовые правила структуры и маршрутизации)
  • stencils/README.md (для точных имен UI-стенсинов)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «wireframe» из репозитория: # https://github.com/markdown-viewer/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r wireframe/ ~/.claude/skills/wireframe/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.