Review UI Design Skill
Codex-скилл разбирает скриншоты и макеты Figma, ранжирует замечания и рисует картинки-аннотации с номерами из отчета
- 131 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скилл читает скриншоты и по запросу узлы Figma, а скрипт `contrast.py` запускается локально.
- Запись в Figma возможна только после явной просьбы пользователя.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/review-ui-design-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл читает скриншоты и по запросу узлы Figma, а скрипт `contrast.py` запускается локально.
- Запись в Figma возможна только после явной просьбы пользователя.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл review-ui-design оценивает макеты продуктовых интерфейсов: приложений, веб-сервисов, десктопных программ и админок. На вход идет один скриншот, цепочка экранов, набор иконок или ссылка на Figma. Проблемы ищутся в трех слоях: визуальное качество (форма, цвет, шрифт, материал, композиция), взаимодействие (сценарии, состояния, тексты, доступность) и согласованность дизайн-системы. Итог — единый отчет без дублей, с приоритетами и номерами проблем. Когда среда выполнения это поддерживает, скилл рисует картинку с отметками и картинку с вариантом правок, номера в них совпадают с отчетом. Скрипт `contrast.py` считает контраст цветов, поэтому вывод по читаемости опирается на число. После правок макета скилл повторно оценивает его под теми же номерами и помечает каждую проблему: решена, решена частично, не решена, новая или регрессия.
Для кого. Дизайнерам и владельцам продукта, которым нужна независимая экспертная оценка макета до передачи в разработку.
Подходит, если
- Готов макет экрана приложения, и до ревью с командой нужен список проблем по приоритету.
- Вторая итерация дизайна вышла, и надо понять, какие замечания закрыты, а какие вернулись.
- Набор иконок выглядит разнородно: вес, обводка и читаемость в малом размере вызывают сомнения.
- Ссылка на фрейм Figma есть, а менять файл нельзя.
Не подходит, если
- Сравнение макета с готовой версткой на отклонения: для этого авторы советуют отдельный скилл проверки реализации.
- Проверка кода интерфейса или продуктовых требований.
- Нужны точные размеры и цвета, а есть только скриншот: значения будут приблизительными.
Пример запроса к агенту
Используй $review-ui-design и оцени этот скриншот по визуалу, взаимодействию и дизайн-системе, с приоритетами и аннотированными картинками.Ограничения
Скилл написан под Codex, а `SKILL.md` и справочные файлы в `references/` изложены по-китайски. Цвета, размеры и шрифты на скриншоте оцениваются приблизительно: точными считаются только данные исходного файла и переменные дизайн-системы. Если Figma не читается, скилл просит скриншоты и не угадывает содержимое по тексту ссылки. Картинки с аннотациями создаются только тогда, когда окружение это поддерживает, иначе остается текстовый отчет.
Как отключить. Удалите папку `~/.codex/skills/review-ui-design` и откройте новую задачу в Codex.
Частые вопросы
Как вызвать скилл?
Напишите в Codex `$review-ui-design` и приложите скриншот, набор экранов или ссылку на Figma. Если скилл не подхватился сразу, откройте новую задачу.
Меняет ли скилл файлы Figma?
Нет, по умолчанию доступ только на чтение. Запись начинается после явной просьбы править макет с названием областей, например экранов V1 и V3.
Как проверить правки после новой версии макета?
Приложите новую версию и попросите повторную оценку с прежней нумерацией. Скилл отметит каждое замечание как решенное, решенное частично, нерешенное, новое или регрессию.
Какие материалы принимает скилл?
Один скриншот, цепочку экранов, набор иконок, запись экрана или ссылку на Figma. Для приложений, веб-сервисов, десктопа и админок.
Как проверить скрипт контраста?
Запустите `python3 review-ui-design/scripts/contrast.py '#777777' '#ffffff'`. Скрипт выведет около 4,48:1, и проверка AA для обычного текста не пройдет.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл проверяет интерфейс по 112 чек-листам Checklist Design или дает честную рецензию: иерархия, типографика, доступность.
Скилл дизайна интерфейсов: арт-дирекция под продукт, общий DESIGN.md, токены, проверка верстки и доступности в браузере.
Четыре скилла для Codex на каждый этап дизайна продукта: от разбора экрана до сравнения визуальных направлений.
Скилл для Codex: три разных визуальных концепта, ревью по скриншотам и чистка лишнего, чтобы интерфейс не выглядел шаблонно.
Скилл для дизайн-систем Figma: чтение, аудит с проверкой WCAG, создание компонентов и выгрузка токенов в код.
Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Коротко о README
В репозитории один скилл с шестью справочными файлами и скриптом проверки контраста. В README есть установка в личную папку скиллов Codex, шаблоны запросов, структуру отчета и порядок синхронизации репозитория с личной копией.
Бейдж для README
Исходный SKILL.md
--- name: review-ui-design description: 评审单份或一组产品 UI 设计稿，像资深设计专家团一样从视觉质量、交互体验、设计系统三个方面发现问题并给出具体、可执行、按优先级排序的优化建议；在可行时默认生成与报告编号对应的问题标注图和优化建议图，并支持修改稿增量复评。Use when the user provides UI screenshots, icon sets, screen recordings, product flows, or Figma links and asks for 设计评审、设计自检、专家评审、UI/视觉/体验评审、走查、挑毛病、提意见、看看怎么样、design review、提升设计质量或改稿复查。适用于 App、Web、桌面端和后台产品 UI；默认只读，不用于纯产品需求或代码审查，也不用于单纯比较设计稿与开发截图的还原偏差。 --- # 产品 UI 设计评审 ## 目标 把视觉总监、交互专家、设计系统专家和无障碍专家的检查视角合并成一份去重报告。先判断产品目标和信息传达，再检查视觉精度；不要把流行风格当作质量本身。 ## 执行边界 - 默认只读。除非用户明确要求“帮我修改”“直接改 Figma”等写操作，否则不得修改设计稿、Figma 文件或其他内容。 - 用户明确要求修改时，先完成评审并确认修改范围，再加载并遵循相关 Figma 写入 skill。 - 不把截图中无法测量的像素、色值、字体属性写成确定事实。 - 不为了显得专业而制造问题；只报告有证据、能解释影响的问题。 - 不把偶数字号、固定字阶、60-30-10、4/8px 栅格、固定行高或投影公式等经验法则当作普遍判错标准。 ## 评审流程 ### 1. 识别输入与上下文 按输入类型选择证据： - **单张截图**：做视觉快评；检查可见的视觉、控件语义和系统一致性，标记无法验证的交互状态与精确数值。 - **多张截图/流程图**：先确认或推断页面顺序，逐屏检查后再合并跨屏流程、反馈、状态和一致性问题。 - **Figma 链接**：优先使用官方 Figma 只读工具获取目标节点截图和元数据；先评审用户指定节点，范围不明时从链接节点开始。不要调用写入工具。读取能力不可用或失败时，说明限制并请用户提供截图或导出，不根据链接文字猜测设计内容。 - **修改稿/第二轮设计**：识别上一轮问题编号和结论，进入增量复评；不要把修改稿当作全新稿件重新编号。上一轮报告不可见时，先请用户补充；无法取得则明确说明并把本轮建立为新基线。 - **设计规范/组件库同时提供**：把它作为最高优先级基准，检查偏离是否有业务理由。 尽量识别平台、核心任务、用户类型、屏幕尺寸、设计阶段和业务约束。缺失信息不应阻塞快评；在报告开头列出关键假设，并降低相关结论的置信度。 按以下证据优先级判断： 1. 用户明确目标与业务约束 2. 已提供的品牌规范、设计系统和组件规范 3. 目标平台约定 4. WCAG 等可访问性要求 5. 通用设计原则与视觉启发 6. 当前风格趋势 ### 2. 加载评审知识 - 每次都完整阅读 [visual-quality.md](references/visual-quality.md)，用“形、色、字、质、构”做视觉深查。