anydesign — скилл
Скилл Claude превращает сайты, картинки и файлы Figma в дизайн-систему: Markdown, токены DTCG и промпты для сборки элементов
- 242 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Скрипт capture_site.py открывает сайты в браузере Playwright и читает их стили
- Файлы Figma читаются через подключенный Figma MCP с доступом к вашему аккаунту
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/anydesignОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скрипт capture_site.py открывает сайты в браузере Playwright и читает их стили
- Файлы Figma читаются через подключенный Figma MCP с доступом к вашему аккаунту
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
anydesign работает в Claude, а результат подходит любому инструменту: простой Markdown и JSON в формате W3C DTCG понимают v0, Lovable, Cursor, Bolt, Claude Code и живой дизайнер. Каждый вывод помечен уровнем уверенности, цвета берутся как реальные hex-значения, а выдумывать токены автор считает хуже, чем признать нехватку данных. Режимов два, они выбираются по запросу. Полный анализ (`извлеки дизайн-систему из этого сайта`) дает `design.md` из семи разделов, `design-tokens.json` в формате DTCG и необязательный отчет по WCAG. Режим элемента (`скопируй эту навигацию`, `воссоздай эту 3D-графику`) дает короткий `element.md` с кодовой спецификацией и промптом для сборки либо промпт для изображения, привязанный к извлеченной палитре. Сам скилл ставится копированием папки в `~/.claude/skills/`. Для отдельных скриптов нужны Python и Playwright с Chromium (`capture_site.py`). Файлы Figma читаются через подключенный Figma MCP.
Для кого. Дизайнерам и фронтендерам, которые хотят вытащить токены и спецификацию из готового сайта, картинки или макета и отдать их агенту для сборки.
Подходит, если
- Из референса-сайта нужна дизайн-система с цветами, шрифтами и отступами в виде токенов
- По скриншоту надо понять палитру и получить настоящие hex-значения
- Из конкурента нужен один элемент, например навигация, как промпт для воссоздания
- Требуется отчет о контрасте по WCAG для извлеченных цветов
- Макет Figma переводится в Markdown-спецификацию для v0 или Cursor
Не подходит, если
- Нужно скопировать чужой сайт целиком: скилл извлекает токены и отдельные элементы, а авторские права и условия сайта остаются за вами
- Нужна сборка готового приложения: результат это спецификация, ее отдают другому инструменту
- Нет Figma MCP: файлы Figma без него не читаются
Пример запроса к агенту
Извлеки дизайн-систему из этого сайта и сохрани design.md и design-tokens.jsonОграничения
Скилл запускается только в Claude: другие клиенты получают его результат, но не сам скилл. Для скрипта capture_site.py нужны Python, зависимости из requirements.txt и Chromium для Playwright, первая загрузка около 300 МБ. Файлы Figma анализируются только с подключенным в приложении Claude коннектором Figma MCP. Результат состоит из выводов с пометками уверенности, поэтому места с низкой уверенностью стоит проверять вручную. Последний коммит сделан в сентябре 2026 года.
Как отключить. Удалите папку anydesign из ~/.claude/skills/ или из каталога .claude/skills/ проекта. Загруженный Chromium для Playwright удаляется отдельно.
Частые вопросы
Что получится на выходе?
В полном режиме design.md из семи разделов и design-tokens.json в формате DTCG плюс отчет WCAG по желанию. В режиме элемента короткий element.md с кодовой спецификацией и промптом для воссоздания.
Как скилл относится к выдумкам?
Любой вывод помечается уровнем уверенности, цвета берутся реальными, а недостающую информацию скилл называет недостающей вместо придумывания токенов.
Можно ли анализировать файл Figma?
Да, но нужно подключить Figma MCP в приложении Claude: Settings, Connectors.
Что такое режим элемента?
Режим для копирования одного элемента, от навигации до 3D-графики. Дает код-спецификацию и промпт для воссоздания либо промпт для изображения, привязанный к палитре.
Нужны ли команды для запуска?
Нет, скилл включается сам, когда вы просите извлечь дизайн-систему, скопировать элемент или назвать палитру сайта.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл дизайна веб-страниц для Claude Code: сначала спецификация DESIGN.md, потом код по ней
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Скилл для дизайн-систем Figma: чтение, аудит с проверкой WCAG, создание компонентов и выгрузка токенов в код.
Скилл и CLI, которые снимают с публичного сайта цвета, шрифты, отступы, скругления и тени и сохраняют их как токены JSON и CSS
Скилл-движок дизайна для локальных агентов: мокапы, прототипы, лендинги, дашборды и слайды в виде самодостаточного HTML прямо в редакторе
Пакет скиллов и команд для Claude Code: аудит токенов и компонентов, управление, документация и отчеты для команды дизайн-системы
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| anydesign (эта карточка) | нет | 242 | ||
| Design Systems MCP | нет | не нужна | 227 | MCP-сервер с данными дизайн-систем; anydesign сам извлекает систему из сайта, картинки или Figma |
| Design System Extractor MCP | нет | не нужна | 73 | MCP-экстрактор для Storybook; anydesign работает с сайтами, картинками и Figma |
Коротко о README
Описание обещает дизайн-систему из чего угодно визуального. Дальше два режима работы, примеры из трех актов (сайт Vercel, плеер Poolsuite, 3D-сцена Discord), установка и отдельные скрипты командной строки.