extract-design-system

Установка

npx skills add arvindrk/extract-design-system

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл дает агенту повторяемый процесс: проверить, что сайт публичный и доступен, запустить встроенный CLI через Playwright, нормализовать результат и сгенерировать стартовые токены. На выходе сырые и нормализованные данные в .extract-design-system/, а также design-system/tokens.json в формате W3C и tokens.css с CSS-переменными. Перед изменением существующих стилей и кода приложения агент должен спросить разрешения.

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

Пример запроса к агенту

Сними дизайн-систему с https://linear.app и сделай стартовые токены для этого проекта

Ограничения

Только публичные сайты и одна страница за запуск. Результат это стартовые токены, без компонентов и без правки конфигурации фреймворка. На динамических сайтах данные бывают неполными. Нужен Chromium для Playwright.

Как отключить. Удалите папку extract-design-system из каталога скиллов агента, а созданные файлы из .extract-design-system/ и design-system/.

Проверка безопасности

• Запускает браузер и загружает сторонние сайты
• Пишет файлы в проект

Коротко о README

README описывает, что извлекается и какие файлы появляются в проекте, и дает команду установки через skills.sh. Приведены примеры запросов к агенту и шаги, по которым работает скилл. Отдельные разделы перечисляют ограничения и соображения безопасности: сайты считаются недоверенным вводом, токены нужно проверять. Лицензия MIT.

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>
```

Похожие