Icon Systemавтор Owl-Listener

Icon System Skill.

Задайте иконкам единую конструкцию и систему имён вместо набора несвязанных символов.

Дизайн-системы
Спецификации

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

Обзор источника · Icon SystemSKILL.md

Задача Дизайн-системы Результат • Спецификация конструкции и размеров иконок • Категории имён и требования к поставке • Правила доступности и вклада в библиотеку Перед началом Агент, способный изучить репрезентативные иконки, их предполагаемые размеры, а также нужные форматы для дизайна и кода.

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

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

Icon System: стандартизация иконографии продукта

Определяет, как иконки рисуются, называются, поставляются и доступно используются в продукте.

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

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

Icon System задаёт правила для библиотеки иконок продукта: сетку, ключевые линии, толщину штриха, скругления, варианты размеров, именование и поставку. Он различает штриховое, заливное и двухтональное использование, а не считает все стили иконок взаимозаменяемыми.

Источник также охватывает подписи, скрытие декоративных элементов, контраст и интерактивные области. Предлагаемые размеры в пикселях — ориентиры, которые нужно адаптировать под продукт. Спецификация системы иконок не означает, что полная библиотека SVG уже нарисована или протестирована.

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

Спецификация конструкции и размеров иконок
Категории имён и требования к поставке
Правила доступности и вклада в библиотеку

Посмотреть пример запроса

От запроса до проверки

01
Задайте правила конструкции
Определите сетку, ключевые линии, штрих, скругления и поддерживаемые стили.
02
Организуйте библиотеку
Выберите категории, имена, варианты и нужные форматы исходников или компонентов.
03
Проверьте использование в контексте
Проверьте поддерживаемые размеры, подписи, текст для критичных действий и интерактивные области.

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

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

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

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

Разнородные библиотеки иконокПриведите непоследовательные семейства символов к единому стандарту конструкции.
Общие компоненты продуктаОпределите имена и обёртки, которыми дизайн и разработка смогут пользоваться единообразно.

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

Не полное руководство по иллюстрацииБолее широкие повествовательные иллюстрации относятся к illustration-style.
Не автоматическое создание ассетовИсточник описывает систему; сами иконки и обёртки всё равно нужно создавать.

Что подготовить

Текущие иконкиПредоставьте репрезентативные символы и конфликтные случаи.
Размеры использованияПеречислите предполагаемые размеры отображения и контексты взаимодействия.
Стек поставкиУкажите потребности в SVG, спрайтах, обёртках-компонентах или дизайн-библиотеке.

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

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

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

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

Попробуйте сфокусированный запрос

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

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

Загрузите SKILL.md этой задачи из репозитория designer-skills в поддерживаемое место для навыков вашего агента. Входной файл не задаёт универсальной команды установки.

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

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md

Предоставьте репрезентативные иконки и контексты их использования. Навык определяет правила; создание и тестирование самих иконок — отдельная работа.

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

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

Пример запроса

Используйте icon-system, чтобы стандартизировать наши разнородные иконки навигации. Определите правила сетки, штриха, скруглений, размеров и именования, затем опишите поставку в SVG и в виде компонентов. Отделите декоративные иконки от действий с подписями и укажите, где необходим видимый текст.

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

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

Иконки следуют документированным правилам конструкции.
Имена различают категорию и вариант.
Доступность соответствует каждому случаю использования.

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

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

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

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

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

Владелец источника: Owl-Listener
Репозиторий: Owl-Listener/designer-skills
Файл навыка: design-systems/skills/icon-system/SKILL.md
Лицензия: MIT
Изученный снимок: 2026-10-07 · 9a6930cf84a8

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

Определяет, как иконки рисуются, называются, поставляются и доступно используются в продукте.

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

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

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

Равен ли визуальный размер иконки её области касания?

Нет. Источник рассматривает размер отображения и рекомендации по интерактивной области как отдельные вопросы.

Нужно ли давать доступное имя каждой иконке?

Значимым иконкам нужны подходящие подписи; декоративные можно скрыть от вспомогательных технологий.

Охватывает ли это главные иллюстрации?

Нет. Источник направляет более широкую работу с иллюстрациями к отдельному навыку.

OpenDesign

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

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

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