C✳CODEZ.WIN
🌐 Русский

Локализованное руководство по чтению

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 ↗

Начните с безопасного пробного периода.

  1. Проверьте поддерживаемый хост и инструкции по установке репозитория. Храните каталог Skill, а также связанные с ним скрипты, ресурсы и документацию вместе;SKILL.mdВ одиночку можно опустить зависимости.
  2. Предоставьте агенту ваши реальные входные данные, желаемый результат и критерии приемки. Синтаксис вызова и доступные инструменты зависят от хоста; данный сайт не предполагает универсальной команды установки.
  3. Попробуйте запустить исходный рабочий процесс в тестовом проекте или в его копии. Перед тем как разрешить операции, изменяющие файлы, удаленные сервисы или оплачиваемые ресурсы, проверьте их.
  4. Проверьте выходные данные на соответствие исходным проверкам качества и вашим собственным требованиям. Успешный запуск или большое количество звезд в репозитории не гарантируют корректного результата.

Формат навыков и спецификация каталога ↗

Подробнее читайте в источнике.

Перевод и сфера применения

В этом руководстве по чтению представлены избранные отрывки из закрепленного текста выше по течению.SKILL.mdПеревод выполнен с помощью переводчика. Это не полное руководство и не гарантия проверенной совместимости. Перед использованием ознакомьтесь с оригиналом и указанными в нем файлами.

Данное введение относится к закрепленной ниже версии; текущая активность в репозитории и время сбора данных отображаются отдельно.

Закрепленный источник
Прочитайте оригинал ↗
Источник получен
Исходный коммит
00d66a64919edca5bca2c673373444e36a4b5461
Исходный SHA-256
639b68cdc6f9b4cdd66a111851555afee2eb82d4de37bf9cbad3be845bb00c2d
Вернуться к полному каталогу навыков