Войти
AI Skills
DESIGNAUDIT verified

Web Design Guidelines

by Vercel

Роль в графе: НОРМЫ — проверить best practices до/после сборки

Репозиторий / источник

ЧТО ДЕЛАЕТ

Аудирует разметку и паттерны интерфейса против правил Vercel (доступность, UX, perf). Хорошо ставит «вторую пару глаз» после генерации Skill'ами вкуса и frontend-design.

КОГДА ИСПОЛЬЗОВАТЬ

  • Перед релизом страницы
  • После крупного UI-рефакторинга
  • Когда нужно формальное «что сломано»
  • Пара к Frontend Design / Impeccable

INSTALL

# skills CLI (пакет vercel-labs/agent-skills)
npx skills add vercel-labs/agent-skills --skill web-design-guidelines

# Cursor: Skills из vercel-labs/agent-skills → web-design-guidelines

PROMPT / INSTRUCTION

Подключи web-design-guidelines (Vercel).

Проверь: [путь к странице / компоненту]
Стек: [Next.js App Router / …]
Фокус аудита: accessibility + UX + очевидные perf-ловушки.

Выдай список findings: severity · правило · где · как исправить.
Сначала критичные a11y, потом UX. Код правь только после списка.
При фиксах не ломай токены дизайн-системы / DESIGN.md.

КАК ПРАВИЛЬНО ПИСАТЬ

ПЛОХО

Проверь дизайн

ХОРОШО

Прогони web-design-guidelines по src/app/pricing/page.tsx. Нужен чеклист findings с severity. Не рефакторь визуальный стиль — только нарушения guidelines. Токены DESIGN.md сохрани.

Почему: Без scope агент начнёт «улучшать вкус». Guidelines — про нормы, не про art direction.
ПЛОХО

Сделай как в гайдлайнах Vercel и перерисуй всё

ХОРОШО

Только audit. Для каждого critical/high — минимальный патч. Visual polish оставь Impeccable. Не вводи новые цвета вне токенов.

Почему: Разделяйте роли Skills: audit ≠ redesign.

EXAMPLES · BEFORE → AFTER

BEFORE

Красивый UI, но кнопка без имени, низкий контраст, фокус невидим.

AFTER

Список нарушений + точечные фиксы; визуальный характер сохранён.

РЕЗУЛЬТАТ

Понятный список проблем по правилам, а не расплывчатое «мне не нравится».

ОГРАНИЧЕНИЯ

  • Не проектирует эстетику
  • Не заменяет ручной UX-ревью продукта
  • Правила общие — доменные кейсы всё равно на специалисте

СОВМЕСТИМОСТЬ

Claude CodeCursorCodex

RELATED SKILLS

Frontend Design taste-skill Impeccable

ДИЗАЙН-СИСТЕМА

Skill усиливает агента. Токены и DESIGN.md задают язык продукта — не ломайте их ради «вкуса Skill».

Гайд по дизайн-системе →Шаблон DESIGN.md →

STACK · RECIPE

Входит в Premium Landing Stack. Практический порядок — Recipe «Создать качественный SaaS-интерфейс».

Открыть Recipe на хабе →