/ Каталог / Песочница / Claude Design Auditor
← Все серверы ↗ GitHub
● Сообщество Ashutos1997 ⚡ Сразу

Claude Design Auditor

автор Ashutos1997 · Ashutos1997/claude-design-auditor-skill

Систематическая проверка дизайна — типографика, контрастность, интервалы, a11y, движение, темный режим, маркеры, темные узоры — оценивается по 0–100 баллов с кодом «до» и «после».

claude-design-auditor-skill проверяет проекты в разных форматах (figma, HTML/CSS, React/Vue, скриншоты, каркасы, прозаические описания) на соответствие 18 профессиональным правилам. Результатом является оценка от 0 до 100 с проблемами по степени серьезности, отдельными оценками доступности и этики, до и после исправлений кода и экспортируемыми отчетами (Markdown, Canva, передача разработчикам). Используйте его для проверки дизайна перед передачей разработки, для обеспечения соблюдения планки качества в PR или для проверки списка приоритетов редизайна.

▶ Смотреть демо 📦 Установить 💡 Сценарии

Зачем использовать

Ключевые функции

Живое демо

Как выглядит на практике

claude-design-auditor-skill.replay ▶ готово
0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-design-auditor-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-design-auditor-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Ashutos1997/claude-design-auditor-skill",
          "~/.claude/skills/claude-design-auditor"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add claude-design-auditor-skill -- git clone https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/claude-design-auditor

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Claude Design Auditor

Аудит проекта перед отправкой на проектирование

👤 Дизайнеры продуктов готовят передачу разработчиков ⏱ ~30 min intermediate

Когда использовать: Дизайн «готов», и вам нужна окончательная проверка, прежде чем разработчики начнут его клонировать.

Предварительные требования
  • Навык установлен — git clone https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/
Поток
  1. Вызов аудитора
    Проверьте эту ссылку Figma: <url>. Объем: полный.✓ Скопировано
    → Оценка + ранжированные задачи со ссылками на 18 правил.
  2. Исправьте критические замечания
    Примените 5 наиболее серьезных исправлений в Figma; покажи до/после.✓ Скопировано
    → Предварительный просмотр до/после каждого исправления
  3. Экспорт передачи передачи
    Экспортируйте уценку передачи разработчикам с токенами и заметками a11y.✓ Скопировано
    → Маркдаун готов добавиться в билет

Итог: Дизайн поступает к разработчику с уже решенными основными проблемами.

Подводные камни
  • Относитесь к счету как к голу — Оценка измеряет соблюдение правил, а не вкус. Используйте список поиска, а не только номер
Сочетать с: claude-code-design-skills

Доступность — проверка компонента

👤 Frontend-инженеры отправляют новый компонент ⏱ ~20 min beginner

Когда использовать: Вы создали элемент управления диалогом/меню/формой и хотите выявить любые проблемы как можно раньше.

Поток
  1. Вставьте источник компонента
    Проведите аудит этого компонента React Dialog, область действия: доступность + движение.✓ Скопировано
    → В выводах приводятся критерии WCAG с точными границами, которые необходимо изменить.
  2. Применить исправления
    Пропатчить компонент с предложенными исправлениями; оставьте API без изменений.✓ Скопировано
    → Diff учитывает существующий API

Итог: Компонент, который выдерживает проверку доступности.

Подводные камни
  • Злоупотребление аудитором вкусом (например, придирки к стилю в режиме a11y) — Явно ограничить область действия a11y + motion
Сочетать с: motion-dev-animations-skill

Проверка устаревшего пользовательского интерфейса на предмет приоритетов редизайна

👤 Лидеры дизайна, владеющие редизайном ⏱ ~60 min advanced

Когда использовать: Вы планируете редизайн и вам нужны данные о том, с чего начать.

Поток
  1. Экраны ленты или URL-адреса
    Проведите аудит 10 лучших экранов приложения app.<url>. Обобщить результаты по степени тяжести.✓ Скопировано
    → Межэкранное объединение с горячими точками
  2. Выберите секвенирование
    Предложите план последовательности редизайна, сгруппированный по категориям правил.✓ Скопировано
    → План связан с выводами, а не с эмоциями

Итог: План редизайна, подкрепленный конкретными дефектами.

Комбинации

Сочетайте с другими MCP — эффект x10

claude-design-auditor-skill + claude-code-design-skills

Аудит → Figma-to-code → повторный аудит кода

Проведите аудит Figma, преобразуйте его в React, а затем повторно проверьте React, чтобы проверить четность.✓ Скопировано
claude-design-auditor-skill + motion-dev-animations-skill

Позвольте экспертам по движению добавлять/настраивать анимацию, а затем запускайте проверку движения аудитора.

Добавить пружинную анимацию для каждого motion-dev; затем одитируйте движение + поведение с ограниченным движением.✓ Скопировано
claude-design-auditor-skill + figma

Извлекайте ресурсы Figma через MCP, проверяйте и пишите комментарии.

Для каждого помеченного кадра добавьте комментарий Figma, обобщающий результаты.✓ Скопировано

Инструменты

Что предоставляет этот MCP

ИнструментВходные данныеКогда вызыватьСтоимость
design-audit (SKILL) asset (Figma URL / image / code) + optional scope Перед передачей, при проверке кода или в рамках плана редизайна. 0

Стоимость и лимиты

Во что обходится

Квота API
Никто
Токенов на вызов
Большой — преобладают скриншоты и длинные блоки кода.
Деньги
Бесплатно
Совет
Агрессивно масштабируйте область (только или только типографику) для быстрых итераций; полный аудит требует большого количества токенов.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: Никто; если URL-адреса Figma являются частными, поделитесь ими через экспорт изображений или используйте Figma MCP с надлежащей областью действия.
Исходящий трафик: Нет выхода сети из навыка; ваши изображения и код остаются в чате.

Устранение неполадок

Частые ошибки и исправления

Аудитор упускает очевидные проблемы

Увеличьте размер ввода или предоставьте несколько окон просмотра/скриншотов; эвристика лучше с покрытием.

Проверить: Re-run with extra screenshots
Токены предупреждают о слишком большом объеме вывода

Установите область действия для подмножества из 18 правил.

Проверить: Ask for 'scope: typography + contrast + a11y' only
Исправления нарушают существующую систему дизайна.

Попросите аудитора оставаться в пределах вашего набора токенов; предоставить tokens.json.

Проверить: Before/after diffs reference token names

Альтернативы

Claude Design Auditor в сравнении

АльтернативаКогда использоватьКомпромисс
claude-code-design-skillsВы хотите перейти от Figma к кодированию, а не проверять существующую работуОхватывает другую сторону трубопровода
ai-friendly-web-design-skillВам нужно широкое руководство по веб-дизайну, а не строгий аудитор.Менее структурированный вывод
apple-hig-designer-skillВы разрабатываете специально для платформ Apple.Платформозависимый, а не универсальный

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills