Дом
frontend-design-review
microsoft/skills
Проводить проверку реализаций пользовательского интерфейса на соответствие стандартам качества дизайна и требованиям системы дизайна либо создавать с нуля уникальные интерфейсы пользователя производственного уровня.
...Расширить всеАнализ дизайна интерфейса
Проверка реализации пользовательского интерфейса на соответствие стандартам качества дизайна и вашей системе дизайна ИЛИ создание с нуля уникальных интерфейсов пользователя, готовых к внедрению в производственную среду.
Два режима
Режим 1: Анализ дизайна
Оцените существующий пользовательский интерфейс на соответствие системе дизайна, трем основным принципам качества (беспроблемность, высокое качество исполнения, надежность), доступности и качеству кода.
Режим 2: Креативный дизайн интерфейса
Создавайте уникальные интерфейсы, которые избегают типичной эстетики «AI-шаблонов», имеют четкое концептуальное направление и реализуются с высокой точностью.
Творческий дизайн интерфейса
Перед началом программирования определите эстетическое направление:
- Цель: какую проблему это решает? Кто этим пользуется?
- Стиль: минималистичный, максималистичный, ретро-футуристический, органичный, роскошный, игривый, редакционный, бруталистский, ар-деко, мягкий/пастельный, индустриальный и т. д.
- Ограничения: фреймворк, производительность, требования к доступности.
- Уникальность: что делает этот проект неповторимым и уместным в данном контексте?
Рекомендации по эстетике
- Типографика: Характерные шрифты, повышающие эстетику. Сочетайте декоративный шрифт с изысканным шрифтом основного текста. Избегайте Inter, Roboto, Arial, Space Grotesk.
- Цвет и тема: Слаженная палитра с использованием CSS-переменных. Доминирующие цвета + яркие акценты > невыразительные, равномерно распределенные палитры.
- Анимация: предпочтительно только CSS. Одна хорошо скоординированная загрузка страницы с постепенным раскрытием элементов > разрозненные микроинтеракции.
- Пространственная композиция: асимметрия, наложение, диагональный поток, элементы, нарушающие сетку, обильное негативное пространство ИЛИ контролируемая плотность.
- Фоны: градиентные сетки, текстуры с шумом, геометрические узоры, многослойная прозрачность, выразительные тени, наложения с зернистостью.
ИЗБЕГАЙТЕ: избитых шрифтов, банальных цветовых схем, предсказуемых макетов, шаблонного дизайна без контекстуальной индивидуальности.
Сложность реализации должна соответствовать концепции. Максимализм = сложный код. Минимализм = сдержанность и точность.
Анализ дизайна
Рабочий процесс системы дизайна
Перед реализацией:
- Проверьте компонент в Storybook / библиотеке компонентов на наличие API и способов использования
- Используйте режим разработчика Figma, чтобы получить точные спецификации (интервалы, токены, свойства)
- Реализуйте, используя компоненты системы дизайна и токены дизайна
Во время проверки:
- Сравните реализацию с дизайном в Figma
- Убедитесь, что используются токены дизайна (а не жестко запрограммированные значения)
- Проверьте, правильно ли реализованы все варианты/состояния
- Отметьте отклонения (требуется утверждение дизайна)
Если компонент отсутствует:
- Проверить, можно ли адаптировать существующий компонент
- Обратитесь к дизайнерам для создания нового компонента
- Задокументируйте исключение и обоснование в коде
Процесс проверки
- Определить задачу пользователя
- Проверить наличие подходящих шаблонов в системе дизайна
- Оцените эстетическое направление
- Определение области применения (компонент, функция или рабочий процесс)
- Оценка каждого из основных элементов
- Оцените и расставьте приоритеты проблем (блокирующие / серьезные / незначительные)
- Предоставить рекомендации с примерами систем дизайна
Основные принципы
- Выполнение задачи: минимальное количество кликов. Каждый экран отвечает на вопросы «Что я могу сделать?» и «Что будет дальше?»
- Иерархия действий: 1–2 основных действия на каждом экране. Постепенное раскрытие информации о второстепенных действиях.
- Введение: объяснение функций на начальном этапе. Умные настройки по умолчанию вместо сложной настройки.
- Навигация: Четкие точки входа/выхода. Кнопки «Назад»/«Отмена» всегда доступны. Навигационная цепочка для глубоких потоков.
Основы качества
1. Беспрепятственный переход от понимания к действию
Оценка: можно ли выполнить задачу за ≤3 взаимодействий? Основное действие очевидно и единственно?
Предупреждающие сигналы: чрезмерное количество кликов, наличие нескольких конкурирующих основных кнопок, скрытые действия, тупиковые ситуации.
2. Качество — это мастерство
Оценка:
- Соответствие системе дизайна: соответствует спецификациям Figma, использует дизайн-токены
- Эстетическое решение: характерная типографика, гармоничная цветовая гамма, продуманная анимация
- Доступность: минимум уровень C (WCAG 2.1 A), идеально — уровень B (WCAG 2.1 AA)
Предупреждающие признаки: типичная эстетика ИИ, жестко запрограммированные значения, реализация не соответствует Figma, нарушенный переразбор, отсутствующие индикаторы фокуса.
3. Надежное создание
Оценка:
- Прозрачность ИИ: предупреждение о контенте, сгенерированном ИИ
- Прозрачность ошибок: практические сообщения об ошибках
Красные флажки: отсутствие предупреждений об ИИ, непонятные ошибки без инструкций.
Формат результатов проверки
Полный шаблон отчета см. в файле references/review-output-format.md.
Модификаторы типа рецензии
См. файл references/review-type-modifiers.md для ознакомления с приоритетными областями проверки в зависимости от контекста (PR, креатив, дизайн, доступность).
Краткий контрольный список
См. файл references/quick-checklist.md, где приведен контрольный список для предварительного одобрения, охватывающий такие аспекты, как соответствие системе дизайна, эстетическое качество, беспроблемность использования, высокое качество исполнения и надежность.
Примеры шаблонов
См. файл references/pattern-examples.md, где приведены удачные и неудачные примеры творческой работы с фронтендом и проверки системы дизайна.
Благодарности
Принципы креативного фронтенда вдохновлены навыками Anthropic в области фронтенд-дизайна. Принципы рецензирования дизайна и структура принципов качества созданы @Quirinevwm для систематической оценки пользовательского интерфейса.
---
name: frontend-design-review
description: Review UI implementations against design quality standards and design system compliance, or create distinctive, production-grade frontend interfaces from scratch.
---
# Frontend Design Review
Review UI implementations against design quality standards and your design system **OR** create distinctive, production-grade frontend interfaces from scratch.
## Two Modes
### Mode 1: Design Review
Evaluate existing UI for design system compliance, three quality pillars (Frictionless, Quality Craft, Trustworthy), accessibility, and code quality.
### Mode 2: Creative Frontend Design
Create distinctive interfaces that avoid generic "AI slop" aesthetics, have clear conceptual direction, and execute with precision.
---
## Creative Frontend Design
Before coding, commit to an aesthetic direction:
- **Purpose**: What problem does this solve? Who uses it?
- **Tone**: minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc.
- **Constraints**: Framework, performance, accessibility requirements.
- **Differentiation**: What makes this distinctive and context-appropriate?
### Aesthetics Guidelines
- **Typography**: Distinctive fonts that elevate aesthetics. Pair a display font with a refined body font. Avoid Inter, Roboto, Arial, Space Grotesk.
- **Color & Theme**: Cohesive palette with CSS variables. Dominant colors + sharp accents > timid, evenly-distributed palettes.
- **Motion**: CSS-only preferred. One well-orchestrated page load with staggered reveals > scattered micro-interactions.
- **Spatial Composition**: Asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space OR controlled density.
- **Backgrounds**: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.
**AVOID**: Overused fonts, cliched color schemes, predictable layouts, cookie-cutter design without context-specific character.
Match implementation complexity to vision. Maximalist = elaborate code. Minimalist = restraint and precision.
---
## Design Review
### Design System Workflow
**Before implementing:**
1. Review component in your Storybook / component library for API and usage
2. Use Figma Dev Mode to get exact specs (spacing, tokens, properties)
3. Implement using design system components + design tokens
**During review:**
1. Compare implementation to Figma design
2. Verify design tokens are used (not hardcoded values)
3. Check all variants/states are implemented correctly
4. Flag deviations (needs design approval)
**If component doesn't exist:**
1. Check if existing component can be adapted
2. Reach out to design for new component creation
3. Document exception and rationale in code
### Review Process
1. Identify user task
2. Check design system for matching patterns
3. Evaluate aesthetic direction
4. Identify scope (component, feature, or flow)
5. Evaluate each pillar
6. Score and prioritize issues (blocking/major/minor)
7. Provide recommendations with design system examples
### Core Principles
- **Task completion**: Minimum clicks. Every screen answers "What can I do?" and "What happens next?"
- **Action hierarchy**: 1-2 primary actions per view. Progressive disclosure for secondary.
- **Onboarding**: Explain features on introduction. Smart defaults over configuration.
- **Navigation**: Clear entry/exit points. Back/cancel always available. Breadcrumbs for deep flows.
---
## Quality Pillars
### 1. Frictionless Insight to Action
**Evaluate:** Task completable in ≤3 interactions? Primary action obvious and singular?
**Red flags:** Excessive clicks, multiple competing primary buttons, buried actions, dead ends.
### 2. Quality is Craft
**Evaluate:**
- Design system compliance: matches Figma specs, uses design tokens
- Aesthetic direction: distinctive typography, cohesive colors, intentional motion
- Accessibility: Grade C minimum (WCAG 2.1 A), Grade B ideal (WCAG 2.1 AA)
**Red flags:** Generic AI aesthetics, hardcoded values, implementation doesn't match Figma, broken reflow, missing focus indicators.
### 3. Trustworthy Building
**Evaluate:**
- AI transparency: disclaimer on AI-generated content
- Error transparency: actionable error messages
**Red flags:** Missing AI disclaimers, opaque errors without guidance.
---
## Review Output Format
See [references/review-output-format.md](references/review-output-format.md) for the full review template.
## Review Type Modifiers
See [references/review-type-modifiers.md](references/review-type-modifiers.md) for context-specific review focus areas (PR, Creative, Design, Accessibility).
## Quick Checklist
See [references/quick-checklist.md](references/quick-checklist.md) for the pre-approval checklist covering design system compliance, aesthetic quality, frictionless, quality craft, and trustworthy pillars.
## Pattern Examples
See [references/pattern-examples.md](references/pattern-examples.md) for good/bad examples of creative frontend and design system review work.
---
## Acknowledgments
Creative frontend principles inspired by [Anthropic's frontend-design skill](https://github.com/anthropics/skills/tree/main/skills/frontend-design). Design review principles and quality pillar framework created by [@Quirinevwm](https://github.com/Quirinevwm) for systematic UI evaluation.
Все файлы
0 файловУстановить frontend-design-review
Скачайте файлы навыков и распакуйте их в каталог .claude/skills/.
Скачать ZIPКлонируйте репозиторий и скопируйте файлы навыка в свой проект.
git clone https://github.com/microsoft/skills/tree/main/.github/skills/frontend-design-review # Copy SKILL.md to your .claude/skills/ directory
Копировать
