Web Design Engineerавтор ConardLi

Web Design Engineer Skill.

Определите визуальный контракт, прежде чем расширять интерфейс.

Фронтенд-дизайн
Прототипирование
Дизайн-системы

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Web Design EngineerSKILL.md

Задача Фронтенд-дизайн Результат • Визуальный артефакт HTML/CSS/JavaScript или React • Документированная оценка визуального направления и выбора дизайн-токенов • Ранний черновик, который можно посмотреть, а затем готовые состояния и взаимодействия Перед началом Нужны агент, умеющий работать с кодом, и среда фронтенда, отображаемая в браузере. Отдельные паттерны могут использовать React, Babel, диаграммы или другие библиотеки; для приёмки в браузере нужен подходящий браузерный инструмент.

Редакционное резюме · проверенный источник 2026-10-07 · не сгенерированный пример

01 Возможности

Web Design Engineer

Метод дизайн-инжиниринга, начинающийся с контекста: требования к ассетам, калибровка дизайна, ранние черновики, режимы сохранения и раздельные пути для критики и браузерного контроля качества.

Процесс на основе источникаНе бенчмарк выполнения

Рабочий подход

Web Design Engineer — процесс для браузерных артефактов: страниц, дашбордов, прототипов, слайд-презентаций и визуализаций. Вместо того чтобы считать каждый запрос новым лендингом, он сначала определяет артефакт, аудиторию и режим работы с существующим. Расширение продукта, сохранение контрактов редизайна и пересборка визуального направления — разные задачи с разными разрешениями.

Его оценка дизайна использует пять настраиваемых измерений: вариативность, движение, плотность информации, зависимость от ассетов и верность бренду. Они формируют заявленную систему и ранний черновик, который можно посмотреть, до детальной реализации. Для брендовых работ настоящие логотипы, фотографии продукта и снимки интерфейса важнее одной палитры. Навык также разделяет лёгкую самопроверку и исполняемую браузерную приёмку, которую источник оставляет для явного запроса на QA.

Ожидаемые результаты

Визуальный артефакт HTML/CSS/JavaScript или React
Документированная оценка визуального направления и выбора дизайн-токенов
Ранний черновик, который можно посмотреть, а затем готовые состояния и взаимодействия

Смотреть пример брифа

От брифа до проверки

01
Изучите существующий контекст
Просмотрите предоставленный исходный код, скриншоты, материалы бренда и ограничения. Определите, является ли работа расширением, редизайном с сохранением или более широкой переработкой.
02
Объявите дизайн-контракт
Объясните визуальное направление, аудиторию, плотность, движение и ассеты, затем опишите типографику, отступы, палитру, поверхности и подход к взаимодействию. Дождитесь, пока пользователь утвердит эту дизайн-систему, прежде чем писать первый код.
03
Покажите черновик, который можно посмотреть
Проверьте направление на ключевых макетах и честных заглушках. Дождитесь отдельного одобрения этого раннего черновика, прежде чем наполнять каждый компонент или состояние взаимодействия.
04
Сборка и проверка
Завершите утверждённые взаимодействия и состояния. Выполните самопроверку из источника; если запрошена браузерная приёмка, отдельно соберите фактические данные по размерам окна и взаимодействиям.

02 Когда использовать

Когда использовать

Нужны агент, умеющий работать с кодом, и среда фронтенда, отображаемая в браузере. Отдельные паттерны могут использовать React, Babel, диаграммы или другие библиотеки; для приёмки в браузере нужен подходящий браузерный инструмент.

Хорошо подходит

Расширение существующего продуктаПолезно, когда новый экран должен выглядеть частью продукта и сохранять окружающие маршруты, формы и ожидания от взаимодействия.
Исследование дизайн-направленийПодходит для расплывчатого визуального брифа, где нужны действительно разные направления или настраиваемые варианты, прежде чем команда выберет одну композицию.

Ограничения, которые стоит проверить

Границы визуального фронтендаБэкенд-API, инструменты командной строки и обработка данных не входят в предполагаемый результат навыка. Процессы для статей и презентаций с дикторским сопровождением также выделены отдельно.
Качество — это не результат тестаДизайн-критика или просмотр исходного кода не доказывают адаптивное поведение в работающем браузере. Запросите исполняемую приёмку, если нужны такие доказательства.

Подготовьте эти входные данные

Артефакт и аудиторияНазовите экран или сценарий, кто им пользуется, а также важные размеры просмотра или условия презентации.
Существующие контрактыПредоставьте код, ссылки на дизайн-систему и защищаемое поведение. Укажите, какие части можно менять, а какие должны остаться узнаваемыми.
Реальный контент и ассетыПредоставьте утверждённые тексты, подлинные изображения продукта, логотипы и данные. Отметьте всё, чего ещё нет, вместо того чтобы выдумывать отзывы или метрики.

03 Важные решения

Важные решения

Сохранение как дизайнерское решение
Явный режим работы помогает не допустить, чтобы привлекательный редизайн незаметно изменил полезные конвенции продукта или заменил действующие решения бренда.
Варианты, а не просто перекраска
Его система калибровки позволяет менять плотность, организацию и взаимодействие независимо, а не показывать несколько косметических версий одного макета.

04 Пример задания

Попробуйте точечный бриф

Приведённый ниже пример брифа не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Используйте полную папку навыка Garden, чтобы были доступны его дизайн-рецепты, протокол сохранения и необязательные материалы по приёмке.

Исходный файл в апстриме

https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-design-engineer/SKILL.md

Начните с одного результата

Перед запуском навыка адаптируйте в этом брифе объём, исходные материалы и ограничения.

Пример брифа

Используйте Web Design Engineer, чтобы расширить наш существующий аналитический интерфейс экраном сохранённых отчётов. Сохраните его навигацию, токены отступов и конвенции таблиц. Изучите предоставленные компоненты и скриншоты, предложите дизайн-систему и дождитесь моего одобрения перед написанием кода. Затем покажите черновик, который можно посмотреть, с планами состояний загрузки и пустого экрана. После моего одобрения черновика завершите реализацию и проведите браузерную приёмку на предоставленных размерах для десктопа и мобильных устройств. Не выдумывайте статистику использования отчётов.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

Документированный режим работы соответствует изменениям, фактически внесённым в существующий интерфейс.
Готовый экран включает состояния взаимодействия, относящиеся к брифу.
Любое утверждение о браузерной приёмке сопровождается фактически проверенными размерами окна и результатами.

OpenDesign предоставляет локальное дизайн-пространство для агентов, пишущих код. Этот листинг не означает, что навык включён в комплект или что в него входят внешние инструменты, учётные данные и программные зависимости.

Скачать OpenDesign Читать краткое руководство

05 Источник и лицензия

Источник и лицензия

Эта страница описывает зафиксированную версию источника, ссылка на которую приведена ниже. Поведение и требования апстрима могут измениться.

Владелец источника: ConardLi
Репозиторий: ConardLi/garden-skills
Файл навыка: skills/web-design-engineer/SKILL.md
Лицензия: MIT
Проверенный снимок: 2026-10-07 · aaf9a82f5efd

Редакционное резюме источника

Метод дизайн-инжиниринга, начинающийся с контекста: требования к ассетам, калибровка дизайна, ранние черновики, режимы сохранения и раздельные пути для критики и браузерного контроля качества.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Всегда ли получается проект на React?

Нет. HTML — это среда вывода, но источник охватывает как обычный HTML/CSS/JavaScript, так и ориентированные на React прототипы и визуальные артефакты.

Заменит ли он существующую дизайн-систему?

Не автоматически. Процесс различает расширение, редизайн с сохранением и переработку; этот выбор нужно сделать до начала правок.

Включает ли каждая сборка автоматические браузерные тесты?

Источник требует лёгкой самопроверки для любой работы, но исполняемый набор приёмки запускается только по явному запросу о браузере, адаптивности или QA.

OpenDesign

Освободите место для следующей итерации дизайна.

Храните бриф, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Проверьте собственную настройку навыка, прежде чем добавлять его в рабочий процесс.

Скачать OpenDesign Смотреть дизайн-навыки