taste (разбор дизайна сайта)
taste
Скилл /taste разбирает дизайн сайта по ссылке: токены, принципы с компромиссами и готовые правила для Cursor и Claude Code
- 449 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Скилл открывает в браузере любые адреса, которые вы укажете, поэтому внутренние и закрытые страницы лучше не давать
- Скрипт `extract.js` исполняется на странице внутри Playwright, а `CLAUDE.md` и правила Cursor дописываются в ваш проект
- Результат повторяет оформление чужого сайта: перенос чужого брендированного дизайна один в один может нарушать права
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/tasteОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл открывает в браузере любые адреса, которые вы укажете, поэтому внутренние и закрытые страницы лучше не давать
- Скрипт `extract.js` исполняется на странице внутри Playwright, а `CLAUDE.md` и правила Cursor дописываются в ваш проект
- Результат повторяет оформление чужого сайта: перенос чужого брендированного дизайна один в один может нарушать права
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл принимает адрес сайта и через Playwright MCP открывает страницу в настоящем браузере. Он снимает экран окна и всей страницы, затем скрипт `extract.js` собирает данные из DOM, до 8000 элементов. По желанию агент заходит еще на две-три связанные страницы: значения, которые повторяются на нескольких страницах, он считает признаками системы. Анализ идет в четыре шага: замеры по 20 категориям с точными px и hex, поиск пяти-восьми правил системы, четыре принципа вкуса и контроль качества. Каждый принцип записан по схеме: условие, решение, причина, доказательство и компромисс. Расплывчатые определения вроде «чисто» и «современно» скилл отбрасывает и проверяет итог поиском по запрещенным словам. На выходе два файла: `{домен}.md` с картой дизайна и описанием принципов и `{домен}.json` для машинной обработки. Затем скилл пишет правила под выбранный инструмент: Cursor, Windsurf, Claude Code, Copilot, Bolt, Antigravity, v0, Figma Make и Lovable.
Для кого. Фронтенд-разработчикам и дизайнерам, которые изучают визуальный язык чужого сайта или хотят передать агенту ориентир для нового интерфейса.
Подходит, если
- Нужен дизайн-ориентир для лендинга в духе Linear или Stripe, а агент пока выдает типовые шаблоны
- Перед редизайном сравнивают визуальный язык конкурента: цвета, шрифты, радиусы, глубину и сетку
- Команде надо понять, почему на странице нет акцентного цвета и откуда берется ощущение воздуха
- Правила дизайна нужно положить в `.cursor/rules` или `CLAUDE.md`, чтобы агент не терял стиль между сессиями
Не подходит, если
- Нужно собрать содержимое страницы или данные: скилл анализирует только вид сайта
- Страница за логином: Playwright откроет форму входа вместо нужного экрана
- Сайт закрыт защитой от ботов вроде Cloudflare: вместо страницы скилл увидит проверку
- Нужны иллюстрации, иконки или анимация: скилл не извлекает графику
Пример запроса к агенту
/taste https://linear.app и сохрани правила для Claude CodeОграничения
Скилл работает только вместе с Playwright MCP, без него он останавливается и просит поставить сервер. При первом запуске Playwright скачивает Chromium около 100 МБ, поэтому первый переход может занять от 30 до 60 секунд.
Пользовательские свойства CSS вроде `var(--color)` скилл получает уже как вычисленные значения: названия переменных в итог не попадают. На тяжелых SPA, например Figma и Notion, страница может не успеть загрузиться, и тогда в отчет добавляется оговорка. Скилл ждет до шести секунд.
Если у страницы высота больше шести экранов, снимок всей страницы пропускается. Последний коммит в репозитории датирован июлем 2026 года.
Как отключить. Удалите папку `~/.claude/skills/taste` (или `~/.gemini/skills/taste`). Playwright MCP остается подключенным: уберите его командой `claude mcp remove playwright`, если он больше не нужен.
Частые вопросы
Чем taste отличается от обычного извлечения токенов дизайна?
Кроме цветов, шрифтов и отступов скилл фиксирует принципы: когда применять решение, что отвергнуто и какой ценой. Благодаря этому агент может решить, как оформить страницу, которой не видел.
Зачем в команде Playwright стоит флаг `--isolated`?
Каждый запуск стартует с чистого состояния браузера: cookies и вход в аккаунт не попадают в анализ. Без флага при открытой сессии Linear скилл разобрал бы приложение вместо публичной страницы.
Куда скилл записывает результат?
В текущий каталог: `{домен}.md` и `{домен}.json`. Файл для выбранного инструмента пишется отдельно: `.cursor/rules/{домен}-taste.mdc` для Cursor, `.windsurf/rules/{домен}-taste.md` для Windsurf, для Claude Code раздел добавляется в `CLAUDE.md`.
Работает ли скилл в Gemini CLI?
Да. Репозиторий клонируют в `~/.gemini/skills/taste`, а Playwright MCP добавляют в блок mcpServers файла `~/.gemini/settings.json`. Если слэш-команды не поддерживаются, пишут «run taste on linear.app».
Сколько страниц сайта скилл анализирует?
Агент спрашивает перед стартом: одну страницу или еще две-три связанные, например Product, Pricing, Community. При нескольких страницах значения, которые повторяются, считаются признаками системы.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл и CLI, которые снимают с публичного сайта цвета, шрифты, отступы, скругления и тени и сохраняют их как токены JSON и CSS
Скилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
Скилл дизайна веб-страниц для Claude Code: сначала спецификация DESIGN.md, потом код по ней
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Мета-скилл разбирает бренд по ссылке, названию или скриншоту и создает из него полноценную дизайн-систему как новый скилл
Скилл для верстки дорогих интерфейсов: лендинги, дашборды и мобильные экраны по четырем маршрутам с проверкой на дешевизну
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| taste (разбор дизайна сайта) (эта карточка) | нет | 449 | |
| designlang | нет | 4 782 | CLI, который достает токены дизайна из сайта в файлы; taste добавляет принципы с компромиссами |
| Taste Skill | нет | 110 763 | правила антишаблонного фронтенда для генерации интерфейсов, разбор чужого сайта в них не входит |
Коротко о README
README начинается с вопроса, зачем нужен вкус при наличии токенов, и показывает пример результата для linear.app. Дальше идут таблица форматов экспорта, раздел о том, для чего скилл годится и для чего нет, установка в Claude Code и Gemini CLI, схема конвейера по фазам, структура папки и список ограничений с обходами. В конце приведен журнал версий.
Бейдж для README
Исходный SKILL.md
---
name: taste
description: >-
Reverse-engineer the design taste of any website. Given a URL, captures DOM data
and a screenshot via real browser, then runs a 4-step analysis to produce
{domain}.md + {domain}.json with practical design tokens (colors, typography,
spacing, radii, shadows, grid) AND taste DNA (Trigger → Decision → Reason →
Evidence trade-offs explaining WHY the design works).
compatibility: >-
Requires Playwright MCP. Claude Code: `claude mcp add playwright -s user -- npx -y
@playwright/mcp@latest --isolated`. Gemini CLI: add to ~/.gemini/settings.json
mcpServers block (see README).
metadata:
version: "1.1.0"
author: Senlin
---
# Taste — Reverse-Engineer a Website's Design DNA
This skill turns a URL into two files:
- **`./{domain}.md`** — human-readable. Two sections:
- **Design Map** — practical tokens (colors, type scale, spacing, radii, shadows, grid)
- **Taste DNA** — 3-4 opinionated trade-offs (Trigger → Decision → Reason → Evidence)
- **`./{domain}.json`** — structured. Same data, machine-parseable, for downstream tools (Cursor, Windsurf, design systems).