К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

design-review — скилл для Claude Code: что делает и как установить

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

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add nexu-io/open-design --skill design-review -a claude-code
Открыть на GitHub

Что делает design-review

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

Скилл адаптирован из набора gstack Гарри Тана для каталога OpenDesign в категории creative-direction. В метаданных задан режим design-system, а вызов привязан к фразам о визуальном аудите и предпосадочной проверке интерфейса.

Здесь кроется важная деталь: запись в каталоге лишь декларирует навык для планировщика агента. Чтобы запускать оригинальные скрипты и использовать исходные шаблоны, придётся установить бандл gstack в рабочую папку скиллов.

Какие задачи решает

  • Найти визуальные расхождения в интерфейсе перед запуском проекта
  • Внести точечные правки в стили с отдельным коммитом на каждое исправление
  • Сформировать скриншоты до и после изменений для проверки вёрстки

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

  • Запусти design-review для главной страницы перед релизом
  • Сделай visual audit шапки сайта и зафиксируй правки скриншотами before after
  • Проведи pre launch design check в компонентах формы авторизации

Как установить design-review

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill design-review -a claude-code

2Вручную: положить файлы

~/.claude/skills/design-review/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/design-review/

Из того же набора106

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-md nexu-io Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе. Claude Code CX Codex Cursor +1 3 100установок

Похожие

agentation-self-driving benjitaylor Запускает автономный визуальный аудит интерфейса в открытом окне браузера и расставляет карточки замечаний через тулбар Agentation. Claude Code CX Codex Cursor +1 7 000установок dfam-check earthtojake Скилл проверяет 3D-сетки на пригодность к 3D-печати по правилам DfAM перед нарезкой в слайсере или отправкой на станок. Claude Code CX Codex Cursor +1 4 100установок presentation iii-hq Превращает каталог технической спецификации в интерактивную веб-презентацию. Нужен, когда спецификацию хотят показать как связный публичный дек. Claude Code CX Codex Cursor +1 3 400установок popular-web-designs Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) 54 готовых дизайн-систем реальных сайтов (Stripe, Linear, Vercel, Claude) с CSS-токенами, типографикой и компонентами для быстрой вёрстки в стиле известных брендов. Claude Code CX Codex Cursor +1 914установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок

Вопросы о design-review

Как установить design-review в Claude Code?

Выполните команду npx skills add nexu-io/open-design --skill design-review -a claude-code в терминале. Файл навыка сохранится по пути ~/.claude/skills/design-review/SKILL.md.

Что делает скилл design-review?

Он поручает агенту роль дизайнера-верстальщика: проводит визуальный осмотр интерфейса, вносит исправления в код отдельными коммитами и создаёт парные скриншоты до и после правок.

Нужны ли дополнительные файлы для работы всех функций?

Да, запись в каталоге лишь помогает агенту обнаружить скилл при планировании. Для запуска исходных скриптов и ассетов нужно загрузить апстрим-бандл gstack в каталог навыков агента.

Исходный текст

SKILL.md · Apache-2.0 
---
name: design-review
description: |
  Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.
triggers:
  - "design review"
  - "visual audit"
  - "before after"
  - "pre launch design check"
od:
  mode: design-system
  category: creative-direction
  upstream: "https://github.com/garrytan/gstack"
---

# design-review

> Curated from Garry Tan (gstack).

## What it does

Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.

## Source

- Upstream: https://github.com/garrytan/gstack
- Category: `creative-direction`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/garrytan/gstack
```

Then ask the agent to invoke this skill by name (`design-review`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

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