Локализованное руководство по чтению
frontend-design-reviewНазначение, использование и источник
Проводить анализ и создавать уникальные, готовые к использованию интерфейсы для фронтенда с высоким качеством дизайна и соответствием дизайн-системе. Оценка проводится по трем основным критериям: беспрепятственный переход от идеи к действию, высокое качество исполнения и надежность. ПРИМЕНЯТЬ ДЛЯ: анализа запросов на слияние, анализа дизайна, аудита доступности, проверки соответствия дизайн-системе, креативного фронтенд-дизайна, анализа кода пользовательского интерфейса, анализа компонентов, проверки адаптивного дизайна, тестирования тем и создания запоминающегося пользовательского интерфейса. НЕ ИСПОЛЬЗОВАТЬ ДЛЯ: анализа бэкенд-API, анализа схем баз данных, работы с инфраструктурой или DevOps, чистой бизнес-логики без пользовательского интерфейса или кода, не относящегося к фронтенду.
Источник получен:
- Репозиторий-источник
- microsoft/skills
- SKILL.md
.github/skills/frontend-design-review/SKILL.md- Звёзды репозитория
- 3,157
- Последнее обновление репозитория
- 2026-10-31
- Категории Skills
- Разработка
- Время последнего сбора
Лицензия: MIT
Приведенные фрагменты описания рабочих процессов являются вспомогательными средствами для чтения, а не исполняемыми инструкциями от Codez. Для создания этой страницы не использовались сторонние инструменты.
Приведённые ниже фрагменты, описывающие цели и рабочие процессы, представляют собой исходный материал, систематизированный и переведённый для удобства чтения. Они отличаются от отдельно обозначенного редакционного анализа Codez.
Что делает этот навык
Проводить анализ и создавать уникальные, готовые к использованию интерфейсы для фронтенда с высоким качеством дизайна и соответствием дизайн-системе. Оценка проводится по трем основным критериям: беспрепятственный переход от идеи к действию, высокое качество исполнения и надежность. ПРИМЕНЯТЬ ДЛЯ: анализа запросов на слияние, анализа дизайна, аудита доступности, проверки соответствия дизайн-системе, креативного фронтенд-дизайна, анализа кода пользовательского интерфейса, анализа компонентов, проверки адаптивного дизайна, тестирования тем и создания запоминающегося пользовательского интерфейса. НЕ ИСПОЛЬЗОВАТЬ ДЛЯ: анализа бэкенд-API, анализа схем баз данных, работы с инфраструктурой или DevOps, чистой бизнес-логики без пользовательского интерфейса или кода, не относящегося к фронтенду.
Как работает рабочий процесс на вышестоящем уровне
Рабочий процесс системы проектирования
Проверьте компонент в вашей Storybook/библиотеке компонентов на предмет API и использования. Используйте режим разработчика Figma, чтобы получить точные спецификации (отступы, токены, свойства). Реализуйте, используя компоненты дизайн-системы + токены дизайна. Сравните реализацию с дизайном Figma.
проход вверх по течению · L54 ↗Процесс проверки
Определите задачу пользователя. Проверьте систему проектирования на соответствие шаблонам. Оцените эстетическое направление. Определите область применения (компонент, функция или поток).
проход вверх по течению · L72 ↗Основные принципы
Выполнение задачи: Минимум кликов. Каждый экран отвечает на вопросы «Что я могу сделать?» и «Что произойдет дальше?». Иерархия действий:1-2Основные действия для каждого представления. Постепенное раскрытие информации для второстепенных действий. Ввод в курс: объяснение функций при ознакомлении. Интеллектуальные настройки по умолчанию вместо конфигурации. Навигация: понятная.entry/exitбаллов.Back/cancelВсегда в наличии. Хлебные крошки для глубокого потока.
проход вверх по течению · L82 ↗Требования и настройка
Из этого файла не был выбран фрагмент с краткими требованиями. Это не означает, что у навыка нет зависимостей. Проверьте инструкции по настройке репозитория и указанные файлы.
Ограничения и проверки качества
2Качество – это мастерство.
Соответствие системе дизайна: соответствует спецификациям Figma, использует дизайн-токены. Эстетическое направление: выразительная типографика, гармоничная цветовая гамма, целенаправленная анимация.
проход вверх по течению · L99 ↗Начните с безопасного пробного периода.
- Проверьте поддерживаемый хост и инструкции по установке репозитория. Храните каталог Skill, а также связанные с ним скрипты, ресурсы и документацию вместе;SKILL.mdВ одиночку можно опустить зависимости.
- Предоставьте агенту ваши реальные входные данные, желаемый результат и критерии приемки. Синтаксис вызова и доступные инструменты зависят от хоста; данный сайт не предполагает универсальной команды установки.
- Попробуйте запустить исходный рабочий процесс в тестовом проекте или в его копии. Перед тем как разрешить операции, изменяющие файлы, удаленные сервисы или оплачиваемые ресурсы, проверьте их.
- Проверьте выходные данные на соответствие исходным проверкам качества и вашим собственным требованиям. Успешный запуск или большое количество звезд в репозитории не гарантируют корректного результата.
Подробнее читайте в источнике.
- Обзор дизайна фронтенда
- Режим1: Обзор дизайна
- Режим2: Креативный дизайн интерфейса пользователя
- Креативный дизайн интерфейса
- Эстетические рекомендации
- Рабочий процесс системы проектирования
- Процесс проверки
- Основные принципы
- 1Беспрепятственный переход от аналитических данных к практическим действиям.
- 2Качество – это мастерство.
- 3. Надежное здание
- Формат вывода результатов проверки
- Модификаторы типа обзора
- Краткий контрольный список
- Примеры шаблонов
- Благодарности
Смежные навыки
Перевод и сфера применения
В этом руководстве по чтению представлены избранные отрывки из закрепленного текста выше по течению.SKILL.mdПеревод выполнен с помощью переводчика. Это не полное руководство и не гарантия проверенной совместимости. Перед использованием ознакомьтесь с оригиналом и указанными в нем файлами.
Данное введение относится к закрепленной ниже версии; текущая активность в репозитории и время сбора данных отображаются отдельно.
- Закрепленный источник
- Прочитайте оригинал ↗
- Источник получен
- Исходный коммит
00d66a64919edca5bca2c673373444e36a4b5461- Исходный SHA-256
639b68cdc6f9b4cdd66a111851555afee2eb82d4de37bf9cbad3be845bb00c2d