Снять дизайн-токены с сайта

extract-design-system

Навык анализирует чужой публичный сайт и превращает его цвета, шрифты и отступы в готовые файлы токенов для старта своего дизайна.

Как установитьОткрыть на GitHub (откроется в новой вкладке)

Что делает

Чем навык помогает в работе.

  • Сканирует указанный сайт через headless-браузер
  • Определяет цвета, шрифты, отступы, радиусы и тени
  • Собирает файлы токенов (JSON и CSS-переменные)
  • Предупреждает, что результат — черновик, а не точная копия

Примеры задач

Опишите задачу — и запустите навык в чате.

Сними дизайн-токены с сайта stripe.com и сделай из них стартовый набор.

Разбери цветовую палитру и шрифты этого сайта для моего нового проекта.

Как установить

Одна команда в терминале — навык добавится вашему агенту.

Терминал
npx skills add https://github.com/arvindrk/extract-design-system --skill extract-design-system

Понадобится Node.js. Навык работает в Claude Code и других агентах, которые читают скиллы из папки проекта.

Безопасность

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

Похожие скиллы

Создаёт сайты и интерфейсы с продуманным видом: подбирает цвета, шрифты и расположение блоков, а затем пишет готовый код.

ДизайнОфициальныйУстановок: 844,1 тыс

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

ДизайнОфициальныйУстановок: 599,3 тыс

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

ДизайнОфициальныйУстановок: 109,8 тыс