extract-design-system — скилл
Скилл и CLI, которые снимают с публичного сайта цвета, шрифты, отступы, скругления и тени и сохраняют их как токены JSON и CSS
- 261 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Запускает браузер и загружает сторонние сайты
- Пишет файлы в проект
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/extract-design-systemОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускает браузер и загружает сторонние сайты
- Пишет файлы в проект
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл дает агенту повторяемый процесс: проверить, что сайт публичный и доступен, запустить встроенный CLI через Playwright, нормализовать результат и сгенерировать стартовые токены. На выходе сырые и нормализованные данные в .extract-design-system/, а также design-system/tokens.json в формате W3C и tokens.css с CSS-переменными. Перед изменением существующих стилей и кода приложения агент должен спросить разрешения.
Для кого. Для фронтенд-разработчиков и дизайнеров, которым нужна отправная точка дизайн-системы по образцу сайта.
Подходит, если
- Нужно быстро получить стартовые токены по сайту-референсу
- Нужно разобрать визуальные примитивы сайта перед редизайном
- Хотите повторяемый процесс вместо ручного разбора в DevTools
Не подходит, если
- Нужна полная библиотека компонентов или точная копия верстки
- Сайт закрыт авторизацией или сильно зависит от скриптов
Пример запроса к агенту
Сними дизайн-систему с https://linear.app и сделай стартовые токены для этого проектаОграничения
Только публичные сайты и одна страница за запуск. Результат это стартовые токены, без компонентов и без правки конфигурации фреймворка. На динамических сайтах данные бывают неполными. Нужен Chromium для Playwright.
Как отключить. Удалите папку extract-design-system из каталога скиллов агента, а созданные файлы из .extract-design-system/ и design-system/.
Частые вопросы
Можно ли без агента?
Да, внутри есть CLI: npx extract-design-system <url>. Скилл просто оборачивает его процессом.
Поменяет ли агент мои стили?
Скилл требует спросить подтверждение перед изменением существующего кода, стилей и конфигурации.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
CLI, который вытаскивает дизайн-систему любого сайта в токены: цвета, шрифты, отступы, тени за один запуск
Мета-скилл разбирает бренд по ссылке, названию или скриншоту и создает из него полноценную дизайн-систему как новый скилл
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Из блога
Коротко о README
README описывает, что извлекается и какие файлы появляются в проекте, и дает команду установки через skills.sh. Приведены примеры запросов к агенту и шаги, по которым работает скилл. Отдельные разделы перечисляют ограничения и соображения безопасности: сайты считаются недоверенным вводом, токены нужно проверять. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
--- name: extract-design-system description: Extract design primitives from a public website and generate starter token files for your project. --- # Extract Design System Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files. ## Before You Start Ask for: - the target public website URL - whether the user wants extraction only or starter files too Set expectations: - this v1 extracts tokens and starter assets, not a full component library - results are useful for initialization, not pixel-perfect reproduction - do not overwrite an existing design system or app styling without confirmation ## Workflow 1. Confirm the target URL is public and reachable. 2. Run: ```bash npx playwright install chromium npx extract-design-system <url> ```