Перейти к руководству
improve-uiавтор Julien Thibeaut

Improve UI Skill.

Навык для Claude Code и Codex для дизайн-ревью: проводит аудит интерфейса на основе его собственных дизайн-артефактов и пишет планы внедрения.

  • Дизайн-ревью и доступность
  • Отчёт ревью
ibelick/ui-skills · skills/improve-ui/SKILL.mdSKILL.md
--- name: improve-ui description: Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff. --- ## Boundaries ## 1. Select the surface ## 2. Reconstruct the local system ## Design language ## 3. Prove findings ## 4. Vet findings
Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 7816 символов

01 Что делает

Что делает skill improve-ui в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Improve UI проводит аудит одной цельной поверхности продукта относительно дизайн-системы, которая ею фактически управляет, и затем пишет самодостаточные планы реализации для выполнения другим агентом. Он доступен только на чтение для исходного кода продукта: файлы создаются или редактируются только в design-plans, зависимости, форматтеры, коммиты и пуши недопустимы.

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

Отчёт о проверке
Смотрите пример запроса ↗

Как это работает

  1. 01
    Выбрать одну цельную поверхность

    Широкий запрос сужается до одного развёртываемого приложения и одного семейства цельных поверхностей для основной задачи продукта; skill фиксирует этот выбор вместо того, чтобы рассматривать репозиторий как единый продукт.

  2. 02
    Восстановить локальную систему

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

  3. 03
    Требовать три доказательства на кандидата

    Каждый оставленный кандидат должен иметь контракт, путь выполнения и одну детерминированную коррекцию; результаты поиска, повторения и различия реализации создают кандидатов, а не находки.

  4. 04
    Проверка и опровержение

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

  5. 05
    Отчёт, упорядоченный и ограниченный

    Находки упорядочены по уверенности, влиянию на пользователя, охвату и стоимости исправления, список ограничен тремя пунктами.

  6. 06
    Указать выбранные изменения

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

02 Определите своё применение

Когда использовать Skill improve-ui

Используйте skill improve-ui в Claude Code или Codex, когда задача — дизайн-ревью такого рода. Назначение и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

  • Когда просят проверить, доработать, улучшить или очистить интерфейс без замены его идентичности

Знайте границы

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

03 Внутри скилла

Что Skill improve-ui даёт дизайн-ревью

4 действия, которым SKILL.md обучает Claude Code или Codex, в порядке разделов файла.

  1. 1. Выбрать поверхность

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

  2. 2. Реконструировать локальную систему

    Проверьте наличие DESIGN.md, руководства репозитория и локальной документации по дизайну поверхности.

  3. Дизайн-язык

    Писать «Не документировано» в разделе «Явные исключения», если только источник не называет исключение явно.

  4. 3. Доказать находки

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

04 Применение

Установить improve-ui в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить improve-ui в Claude Code, Codex или ваш Agent

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

Общая форма CLI skills для skills/improve-ui/SKILL.md; репозиторий может документировать собственный путь.

Дайте скиллу первую задачу по проверке дизайна

SKILL.md не включает пример промпта; этот стартовый написан на основе однострочного описания из каталога. Замените строку задачи на ваш реальный бриф.

Starter prompt
Use the improve-ui skill on the material I attach. What the skill should do here: Audits a product surface against its own design evidence and writes implementation plans. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Источник: стартовый промпт написан на основе однострочного описания из каталога (не из SKILL.md).

Проверьте первый результат

Перед принятием результата найдите это в диалоге и файлах:

  • Результат поставляется как отчёт проверки, как указано для этого навыка в каталоге.
  • Агент называет skill improve-ui в своём плане или транскрипте до получения результата.
  • Ваш собственный контент, имена и числа остаются неизменными в выводе.

В OpenDesign импортируйте improve-ui по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Repository
github.com/ibelick/ui-skills Ветка main
Файл skill
skills/improve-ui/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 79081ab
License
MIT Из LICENSE.
Звёзды репозитория
8 402 Снимок GitHub сделан 2026-09-14 для всего репозитория ibelick/ui-skills, который содержит 5 навыков в этом каталоге. Это не рейтинг и не счётчик использования для improve-ui.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.
Собственное описание skill
«Проверить существующую продуктовую поверхность на соответствие её собственным дизайн-свидетельствам, выявить подтверждённые UI-проблемы и написать самодостаточные планы реализации для другого агента. Строго read-only на продуктовый исходник. Используется при запросе на ревью, улучшение или очистку интерфейса без замены его идентичности; исследование расхождений с дизайн-системой; или подготовку дизайн-хендоффа.»

Описание из front-matter файла SKILL.md. Полный файл занимает около 7 816 символов. Читать полный файл на GitHub.

Improve UI

Запустите improve-ui на реальной задаче дизайн-ревью.

Скачайте OpenDesign, импортируйте improve-ui по ссылке на SKILL.md, вставьте запрос выше и прочитайте план перед результатом.

Терминал
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows