Разбор макета: что улучшить

Разбирает макет или экран: что бросается в глаза, удобно ли им пользоваться, что выбивается; в конце даёт приоритетные правки.

СкиллAnthropicClaudeApache-2.0Загрузить архив в ClaudeПроверка не требуется

Скачать на русскомОригинал на английском (архив)Источник ↗

Что делает: Разбирает макет или экран: что бросается в глаза, удобно ли им пользоваться, что выбивается; в конце даёт приоритетные правки.
Когда брать: Когда нужен взгляд со стороны на макет, скриншот или ссылку на Figma на любом этапе — от первых набросков до финальной шлифовки.
Пример запроса: Раскритикуй этот макет страницы оформления заказа для B2B-сервиса: ссылка на Figma ниже.
Нужно подключить: Figma, обратная связь от пользователей

Входит в плагин design. В Cowork и Claude Code можно поставить плагин целиком.

Как включить

Нажмите «Скачать на русском» и сохраните архив.
В Claude откройте Настройки → Capabilities → Skills → Upload skill и выберите архив.
Включите скилл переключателем.

Для терминала

Распакуйте архив и положите папку design-critique в ~/.claude/skills/. Файл SKILL.md должен лежать внутри этой папки.

Текст

---
name: design-critique
description: Получи структурированную обратную связь по дизайну: удобство использования, иерархия и согласованность. Запускай по фразам «посмотри этот дизайн», «раскритикуй этот макет», «что думаешь об этом экране?» или когда делишься ссылкой на Figma или скриншотом для обратной связи на любом этапе — от поиска идей до финальной шлифовки.
argument-hint: "<Figma URL, screenshot, or description>"
---

/design-critique

Если встретишь незнакомые подстановки или нужно проверить, какие инструменты подключены, смотри [CONNECTORS.md](../../CONNECTORS.md).

Получи структурированную обратную связь по дизайну по нескольким направлениям.

Использование

/design-critique $ARGUMENTS

Проверь дизайн: @$1

Если указана ссылка на Figma, загрузи дизайн из Figma. Если указан файл, прочитай его. В остальных случаях попроси пользователя описать дизайн или показать его.

Что мне нужно от тебя

Дизайн: ссылка на Figma, скриншот или подробное описание
Контекст: что это? Для кого? На каком этапе (поиск идей, доработка, финал)?
Фокус (необязательно): «Сосредоточься на мобильной версии» или «Сосредоточься на процессе адаптации»

Схема критики

1. Первое впечатление (2 секунды)

Что привлекает взгляд в первую очередь? Правильно ли это?
Какая эмоциональная реакция?
Сразу ли понятно назначение?

2. Удобство использования

Может ли пользователь достичь своей цели?
Интуитивна ли навигация?
Очевидны ли интерактивные элементы?
Нет ли лишних шагов?

3. Визуальная иерархия

Есть ли чёткий порядок чтения?
Выделены ли нужные элементы?
Эффективно ли используется пустое пространство?
Создаёт ли типографика правильную иерархию?

4. Согласованность

Соответствует ли дизайн дизайн-системе?
Согласованы ли отступы, цвета и типографика?
Ведут ли себя похожие элементы одинаково?

5. Доступность

Коэффициенты цветового контраста
Размеры областей касания
Читаемость текста
Альтернативный текст для изображений

Как давать обратную связь

Будь конкретен: «Призыв к действию конкурирует с навигацией», а не «макет запутанный»
Объясняй почему: связывай замечания с принципами дизайна или потребностями пользователей
Предлагай альтернативы: не просто указывай на проблемы, а предлагай решения
Отмечай то, что работает: хорошая обратная связь включает и положительные наблюдения
Учитывай этап: на раннем этапе поиска идей обратная связь одна, на финальной шлифовке — другая

Результат

## Критика дизайна: [Название дизайна]

### Общее впечатление
[Первая реакция в 1–2 предложения — что работает, какая самая большая возможность для улучшения]

### Удобство использования
| Находка | Серьёзность | Рекомендация |
|---------|----------|----------------|
| [Проблема] | 🔴 Критическая / 🟡 Умеренная / 🟢 Незначительная | [Исправление] |

### Визуальная иерархия
- **Что привлекает взгляд в первую очередь**: [Элемент] — [Правильно ли это?]
- **Порядок чтения**: [Как взгляд движется по макету?]
- **Акценты**: [Выделены ли нужные вещи?]

### Согласованность
| Элемент | Проблема | Рекомендация |
|---------|-------|----------------|
| [Типографика/отступы/цвет] | [Несогласованность] | [Исправление] |

### Доступность
- **Цветовой контраст**: [Проходит/не проходит для ключевого текста]
- **Области касания**: [Достаточный ли размер?]
- **Читаемость текста**: [Размер шрифта, межстрочный интервал]

### Что работает хорошо
- [Положительное наблюдение 1]
- [Положительное наблюдение 2]

### Приоритетные рекомендации
1. **[Самое значимое изменение]** — [Почему и как]
2. **[Второй приоритет]** — [Почему и как]
3. **[Третий приоритет]** — [Почему и как]

Если подключены коннекторы

Если подключён ~~design tool:

Загружай дизайн прямо из Figma и изучай компоненты, токены и слои
Сравнивай с существующей дизайн-системой для проверки согласованности

Если подключён ~~user feedback:

Сопоставляй дизайнерские решения с недавней обратной связью от пользователей и тикетами поддержки

Советы

Расскажи про контекст — «Это процесс оформления заказа в B2B SaaS» помогает мне дать уместную обратную связь.
Укажи этап — на раннем этапе поиска идей обратная связь одна, на финальной шлифовке — другая.
Попроси сфокусироваться — «Посмотри только навигацию» даёт больше глубины по одной области.

Перевод: iiuniversitet. Оригинал: https://github.com/anthropics/knowledge-work-plugins/tree/main/design/skills/design-critique, лицензия Apache-2.0. Изменения: перевод на русский язык.

Оригинал на английском

---
name: design-critique
description: Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.
argument-hint: "<Figma URL, screenshot, or description>"
---

# /design-critique

> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).

Get structured design feedback across multiple dimensions.

## Usage

```
/design-critique $ARGUMENTS
```

Review the design: @$1

If a Figma URL is provided, pull the design from Figma. If a file is referenced, read it. Otherwise, ask the user to describe or share their design.

## What I Need From You

- **The design**: Figma URL, screenshot, or detailed description
- **Context**: What is this? Who is it for? What stage (exploration, refinement, final)?
- **Focus** (optional): "Focus on mobile" or "Focus on the onboarding flow"

## Critique Framework

### 1. First Impression (2 seconds)
- What draws the eye first? Is that correct?
- What's the emotional reaction?
- Is the purpose immediately clear?

### 2. Usability
- Can the user accomplish their goal?
- Is the navigation intuitive?
- Are interactive elements obvious?
- Are there unnecessary steps?

### 3. Visual Hierarchy
- Is there a clear reading order?
- Are the right elements emphasized?
- Is whitespace used effectively?
- Is typography creating the right hierarchy?

### 4. Consistency
- Does it follow the design system?
- Are spacing, colors, and typography consistent?
- Do similar elements behave similarly?

### 5. Accessibility
- Color contrast ratios
- Touch target sizes
- Text readability
- Alternative text for images

## How to Give Feedback

- **Be specific**: "The CTA competes with the navigation" not "the layout is confusing"
- **Explain why**: Connect feedback to design principles or user needs
- **Suggest alternatives**: Don't just identify problems, propose solutions
- **Acknowledge what works**: Good feedback includes positive observations
- **Match the stage**: Early exploration gets different feedback than final polish

## Output

```markdown
## Design Critique: [Design Name]

### Overall Impression
[1-2 sentence first reaction — what works, what's the biggest opportunity]

### Usability
| Finding | Severity | Recommendation |
|---------|----------|----------------|
| [Issue] | 🔴 Critical / 🟡 Moderate / 🟢 Minor | [Fix] |

### Visual Hierarchy
- **What draws the eye first**: [Element] — [Is this correct?]
- **Reading flow**: [How does the eye move through the layout?]
- **Emphasis**: [Are the right things emphasized?]

### Consistency
| Element | Issue | Recommendation |
|---------|-------|----------------|
| [Typography/spacing/color] | [Inconsistency] | [Fix] |

### Accessibility
- **Color contrast**: [Pass/fail for key text]
- **Touch targets**: [Adequate size?]
- **Text readability**: [Font size, line height]

### What Works Well
- [Positive observation 1]
- [Positive observation 2]

### Priority Recommendations
1. **[Most impactful change]** — [Why and how]
2. **[Second priority]** — [Why and how]
3. **[Third priority]** — [Why and how]
```

## If Connectors Available

If **~~design tool** is connected:
- Pull the design directly from Figma and inspect components, tokens, and layers
- Compare against the existing design system for consistency

If **~~user feedback** is connected:
- Cross-reference design decisions with recent user feedback and support tickets

## Tips

1. **Share the context** — "This is a checkout flow for a B2B SaaS" helps me give relevant feedback.
2. **Specify your stage** — Early exploration gets different feedback than final polish.
3. **Ask me to focus** — "Just look at the navigation" gives you more depth on one area.

Источник: anthropics/knowledge-work-plugins / design / design-critique ↗. Ссылка проверена 2026-10-10.

---
name: design-critique
description: Получи структурированную обратную связь по дизайну: удобство использования, иерархия и согласованность. Запускай по фразам «посмотри этот дизайн», «раскритикуй этот макет», «что думаешь об этом экране?» или когда делишься ссылкой на Figma или скриншотом для обратной связи на любом этапе — от поиска идей до финальной шлифовки.
argument-hint: "<Figma URL, screenshot, or description>"
---

# /design-critique

> Если встретишь незнакомые подстановки или нужно проверить, какие инструменты подключены, смотри [CONNECTORS.md](../../CONNECTORS.md).

Получи структурированную обратную связь по дизайну по нескольким направлениям.

## Использование

```
/design-critique $ARGUMENTS
```

Проверь дизайн: @$1

Если указана ссылка на Figma, загрузи дизайн из Figma. Если указан файл, прочитай его. В остальных случаях попроси пользователя описать дизайн или показать его.

## Что мне нужно от тебя

- **Дизайн**: ссылка на Figma, скриншот или подробное описание
- **Контекст**: что это? Для кого? На каком этапе (поиск идей, доработка, финал)?
- **Фокус** (необязательно): «Сосредоточься на мобильной версии» или «Сосредоточься на процессе адаптации»

## Схема критики

### 1. Первое впечатление (2 секунды)
- Что привлекает взгляд в первую очередь? Правильно ли это?
- Какая эмоциональная реакция?
- Сразу ли понятно назначение?

### 2. Удобство использования
- Может ли пользователь достичь своей цели?
- Интуитивна ли навигация?
- Очевидны ли интерактивные элементы?
- Нет ли лишних шагов?

### 3. Визуальная иерархия
- Есть ли чёткий порядок чтения?
- Выделены ли нужные элементы?
- Эффективно ли используется пустое пространство?
- Создаёт ли типографика правильную иерархию?

### 4. Согласованность
- Соответствует ли дизайн дизайн-системе?
- Согласованы ли отступы, цвета и типографика?
- Ведут ли себя похожие элементы одинаково?

### 5. Доступность
- Коэффициенты цветового контраста
- Размеры областей касания
- Читаемость текста
- Альтернативный текст для изображений

## Как давать обратную связь

- **Будь конкретен**: «Призыв к действию конкурирует с навигацией», а не «макет запутанный»
- **Объясняй почему**: связывай замечания с принципами дизайна или потребностями пользователей
- **Предлагай альтернативы**: не просто указывай на проблемы, а предлагай решения
- **Отмечай то, что работает**: хорошая обратная связь включает и положительные наблюдения
- **Учитывай этап**: на раннем этапе поиска идей обратная связь одна, на финальной шлифовке — другая

## Результат

```markdown
## Критика дизайна: [Название дизайна]

### Общее впечатление
[Первая реакция в 1–2 предложения — что работает, какая самая большая возможность для улучшения]

### Удобство использования
| Находка | Серьёзность | Рекомендация |
|---------|----------|----------------|
| [Проблема] | 🔴 Критическая / 🟡 Умеренная / 🟢 Незначительная | [Исправление] |

### Визуальная иерархия
- **Что привлекает взгляд в первую очередь**: [Элемент] — [Правильно ли это?]
- **Порядок чтения**: [Как взгляд движется по макету?]
- **Акценты**: [Выделены ли нужные вещи?]

### Согласованность
| Элемент | Проблема | Рекомендация |
|---------|-------|----------------|
| [Типографика/отступы/цвет] | [Несогласованность] | [Исправление] |

### Доступность
- **Цветовой контраст**: [Проходит/не проходит для ключевого текста]
- **Области касания**: [Достаточный ли размер?]
- **Читаемость текста**: [Размер шрифта, межстрочный интервал]

### Что работает хорошо
- [Положительное наблюдение 1]
- [Положительное наблюдение 2]

### Приоритетные рекомендации
1. **[Самое значимое изменение]** — [Почему и как]
2. **[Второй приоритет]** — [Почему и как]
3. **[Третий приоритет]** — [Почему и как]
```

## Если подключены коннекторы

Если подключён **~~design tool**:
- Загружай дизайн прямо из Figma и изучай компоненты, токены и слои
- Сравнивай с существующей дизайн-системой для проверки согласованности

Если подключён **~~user feedback**:
- Сопоставляй дизайнерские решения с недавней обратной связью от пользователей и тикетами поддержки

## Советы

1. **Расскажи про контекст** — «Это процесс оформления заказа в B2B SaaS» помогает мне дать уместную обратную связь.
2. **Укажи этап** — на раннем этапе поиска идей обратная связь одна, на финальной шлифовке — другая.
3. **Попроси сфокусироваться** — «Посмотри только навигацию» даёт больше глубины по одной области.

Перевод: iiuniversitet. Оригинал: https://github.com/anthropics/knowledge-work-plugins/tree/main/design/skills/design-critique, лицензия Apache-2.0. Изменения: перевод на русский язык.