Design System → Rebuild → Browser QA

Полный набор skills для пересборки сайта

Рабочее ТЗ для AI‑агента. Задача: перестать латать интерфейс точечно и пройти весь frontend системно — аудит, дизайн‑система, компоненты, страницы, responsive, accessibility, browser QA и финальный cleanup.

Design SystemFrontend ArchitectureDesign → CodePlaywrightAccessibility
7

этапов работы. Главный принцип: сначала система, потом компоненты, потом страницы. Не наоборот.

01 / ЦЕЛЬ

Что должен получить проект

Не «чуть красивее», а единый и воспроизводимый frontend.

Результат 1

Дизайн‑система

Colors, typography, spacing, grid, radii, shadows, breakpoints, tokens, component states.

Результат 2

Полная перевёрстка

Все страницы собраны на одной системе и повторно используют shared components.

Результат 3

Browser QA

AI реально открывает страницы, делает screenshots, проверяет responsive и исправляет видимые дефекты.

Запрещено

Начинать с хаотичных правок отдельных margin, font-size, цветов, media queries и CSS‑костылей без предварительного аудита и общей системы.

02 / SKILLS

Пул навыков

Один главный workflow‑skill плюс узкие специалисты. Не устанавливать много конкурирующих frontend-design skills одновременно.

01

frontend-design

Главный оркестратор. Аудитирует и ведёт редизайн по фазам: design system → DESIGN.md → structure/greyboxing → PAGES.md → реализация.

CORE
GitHub ↗SKILL.md ↗
02

design-system-patterns

Архитектор дизайн‑системы. Primitive → semantic → component tokens, typography, spacing, variants, states, themes и component architecture.

DESIGN SYSTEM
GitHub ↗Folder ↗
03

design-to-code

Инженер реализации. Переносит принятую систему в production frontend: reusable components, responsive behavior и страницы.

IMPLEMENTATION
GitHub ↗Folder ↗
04

web-accessibility

Корректная вёрстка. Semantic HTML, keyboard navigation, focus states, forms, contrast, reduced motion и accessibility.

A11Y
GitHub ↗Folder ↗
05

web-design-guidelines

Финальный UI‑ревизор. Ищет UX/UI и accessibility‑проблемы уже после основной реализации.

FINAL REVIEW
GitHub ↗Folder ↗
06

playwright

Browser QA. Запуск сайта, навигация по страницам, screenshots, interaction testing и проверка реально отрендеренного UI.

BROWSER QA
GitHub ↗Folder ↗
07

architectural-refactor

Опционально. Подключать, если проблема уже не только в UI, но и в структуре frontend: дубли, чрезмерно большие компоненты, связность и legacy‑слои.

OPTIONAL
GitHub ↗
03 / WORKFLOW

Последовательность

Каждая стадия создаёт артефакт, который становится входом для следующей.

00 / AUDITCurrentsite state 01 / SYSTEMDesignSystemDESIGN.md 02 / PAGESGreyboxPAGES.md 03 / BUILDComponents+ Pagesproduction 04 / A11YSemanticresponsive 05 / BROWSERPlaywrightVisual QAscreenshots QA

Аудит

Определить стек, страницы, shared components, CSS‑подходы, breakpoints, дубли, визуальные противоречия и технический долг. Не делать массовый редизайн.

Design System

Использовать frontend-design + design-system-patterns. Создать DESIGN.md и реальные tokens в коде.

Page architecture

Зафиксировать layout, navigation, page shell, section hierarchy и responsive behavior. Создать PAGES.md.

Shared foundation

Собрать Button, Link, Input, Card, Container, Stack, Grid, Section, Header, Footer и другие повторяющиеся primitives.

Page-by-page rebuild

Переверстывать страницы по одной. После каждой страницы сразу проводить browser QA.

Accessibility + responsive

Проверить semantic HTML, keyboard navigation, focus, mobile, forms, contrast и edge cases.

Final review

Playwright screenshots + web-design-guidelines → список дефектов → исправления → повторная проверка.

04 / PROJECT

Структура проекта

PROJECT/
│
├── AGENTS.md
├── DESIGN.md
├── PAGES.md
├── REDESIGN_STATUS.md
│
├── .agents/
│   └── skills/
│       ├── frontend-design/
│       ├── design-system-patterns/
│       ├── design-to-code/
│       ├── web-accessibility/
│       ├── web-design-guidelines/
│       └── playwright/
│
├── src/
│   ├── components/
│   │   ├── primitives/
│   │   ├── layout/
│   │   └── sections/
│   ├── styles/
│   │   ├── tokens.*
│   │   ├── globals.*
│   │   └── utilities.*
│   └── pages/
│
└── tests/
    └── visual/
AGENTS.md

Правила конкретного проекта

  • Framework и package manager
  • Build/test/dev команды
  • Что запрещено менять
  • Где assets и content
  • Definition of Done
DESIGN.md

Источник визуальной истины

  • Color tokens
  • Typography scale
  • Spacing
  • Grid / breakpoints
  • Radii / shadows
  • Component states
05 / SYSTEM

Что обязано войти в дизайн‑систему

СлойОпределитьЗапрещено
ColorsPrimitive palette → semantic tokens → component tokens.Случайные HEX в компонентах.
TypographyFont families, weights, scale, line-height, tracking, line length.Новые font-size «на глаз» на каждой странице.
SpacingОграниченная spacing scale и вертикальный ритм.13px / 27px / 43px без системы.
LayoutContainers, columns, gutters, max-width, section rhythm.Каждой странице отдельная сетка.
ResponsiveBreakpoint strategy и поведение компонентов.Media queries, бесконечно исправляющие друг друга.
ComponentsVariants, sizes, hover/focus/active/disabled.Копии одного компонента с разными стилями.
MotionDuration, easing, reduced-motion.Случайные timings.
06 / PROMPTS

Готовые команды для агента

Выполнять последовательно. Лучше отдельными сессиями с фиксацией результата в файлах.

PROMPT 01 · AUDIT

Не трогать массово UI до аудита

Проведи полный аудит текущего frontend-проекта.

Пока НЕ делай массовых визуальных изменений.

Определи:
1. текущий стек и архитектуру;
2. список страниц;
3. shared components и дубли;
4. CSS/style подходы;
5. breakpoints;
6. visual inconsistencies;
7. accessibility проблемы;
8. технический долг.

Создай REDESIGN_STATUS.md:
- Current architecture
- Pages
- Existing shared components
- Problems
- Safe-to-reuse
- Must-refactor
- Risks
- Proposed migration order
PROMPT 02 · DESIGN SYSTEM

Система прежде страниц

Используй frontend-design и design-system-patterns.

Создай полноценную дизайн-систему и DESIGN.md.

Обязательно определить:
- primitive colors;
- semantic colors;
- typography;
- spacing scale;
- containers and grid;
- breakpoints;
- border radius;
- shadows;
- buttons;
- inputs;
- cards;
- navigation;
- section patterns;
- interactive states;
- motion;
- accessibility requirements.

После этого реализуй tokens в коде.

Запрещено:
- random visual values внутри компонентов;
- создавать значения без токена;
- массово перевёрстывать страницы до завершения DESIGN.md.
PROMPT 03 · FOUNDATION

Сначала shared components

На основе DESIGN.md собери foundation layer.

Сначала:
- Container
- Stack
- Grid
- Section
- Heading
- Text
- Button
- Link
- Input
- Select
- Card
- Badge
- Header
- Footer

Каждый компонент обязан:
- использовать design tokens;
- иметь variants;
- иметь responsive behavior;
- иметь hover/focus/disabled states;
- не содержать page-specific hacks.
PROMPT 04 · PAGE

Перевёрстывать по одной странице

Используй design-to-code.

Переверстай следующую страницу на новой дизайн-системе.

Перед изменениями:
1. опиши структуру страницы;
2. укажи shared components;
3. укажи новые reusable components, только если они реально нужны.

После реализации:
1. запусти проект;
2. открой страницу в браузере;
3. проверь desktop;
4. проверь tablet/mobile;
5. сделай screenshots;
6. исправь реальные визуальные ошибки;
7. пометь страницу completed в REDESIGN_STATUS.md.
PROMPT 05 · FINAL QA

Финальный аудит

Используй web-accessibility, playwright и web-design-guidelines.

Проверь весь frontend:
- visual consistency;
- responsive behavior;
- overflow;
- content clipping;
- typography consistency;
- spacing;
- contrast;
- keyboard navigation;
- focus states;
- forms;
- semantic HTML;
- broken interactions;
- duplicate styles;
- hardcoded values;
- unused legacy CSS.

Сделай screenshots ключевых страниц на основных viewport.

Сначала составь список проблем по severity.
Исправь их.
После этого повтори browser QA.
07 / QA

Definition of Done

Должно быть
  • DESIGN.md соответствует реальному коду.
  • Visual values идут через tokens.
  • Shared components переиспользуются.
  • Все основные страницы перевёрстаны.
  • Desktop и mobile проверены браузером.
  • Нет horizontal overflow.
  • Interactive states работают.
  • Keyboard navigation не сломана.
  • Build/test проходят.
  • Legacy CSS очищен.
Не должно остаться
  • Случайных цветов.
  • Несогласованных font-size.
  • Копипасты одинаковых компонентов.
  • Page-specific костылей без причины.
  • CSS, исправляющего предыдущий CSS.
  • Скрытых mobile overflow.
  • UI, который агент ни разу не открыл в браузере.
08 / RULE

Главное правило агенту

Сначала исправляй систему, а не отдельный пиксель

При конфликте страницы и дизайн‑системы сначала реши проблему на уровне token / shared component / layout pattern. Локальный CSS‑hack допускается только когда поведение действительно уникально.

AUDIT
  ↓
DESIGN.md
  ↓
TOKENS
  ↓
SHARED COMPONENTS
  ↓
PAGE 01 → BROWSER QA
  ↓
PAGE 02 → BROWSER QA
  ↓
...
  ↓
ACCESSIBILITY
  ↓
FINAL VISUAL AUDIT
  ↓
CLEANUP
  ↓
DONE