CodeariaAcademy

Skisso

Расширение Chrome, в котором правку дизайна не описываешь агенту словами, а делаешь мышкой прямо на странице. Агенту уходит короткий список: какой элемент, какое свойство, что было и что стало. Бесплатно, без аккаунта.

Сами не запускали: описание по документации и репозиторию.

В цифрах

расширение в Chrome Web Store
версия расширения на 19.10.2026, альфа
агентов в чате панели: Claude Code, Codex, Gemini CLI, Copilot CLI, Cursor Agent

Что это

Кто собирал сайт вместе с Claude Code или Cursor, знает этот цикл: видишь, что кнопкам тесно, и пишешь абзац про «чуть больше воздуха между кнопками справа». Агент угадывает, не тот элемент, не та величина, ещё один круг. Skisso убирает перевод с картинки на слова: выделяешь элемент на живой странице, двигаешь отступы, меняешь цвет, шрифт или текст, пока не станет как надо, и одной клавишей копируешь изменения. Агент получает адрес элемента и пары «было → стало» в настоящем CSS, а файлы проекта по-прежнему правит он сам.

От Spline и других дизайн-инструментов в каталоге он отличается тем, что ничего не рисует с нуля: он работает поверх уже готового интерфейса, на localhost, тестовом или боевом сайте. Это мостик между браузером, где ты видишь результат, и терминалом, где работает агент. Через локальный MCP-сервер агент сам читает выделенное, а в панели расширения можно говорить с агентом прямо со страницы или превратить правки в задачу на GitHub.

Как устроено

Ctrl+Shift+1
Открывает инспектор на любой странице. Наводишь, щёлкаешь, меняешь размеры, отступы, цвета, шрифты, текст и состояние при наведении; Shift-щелчок держит сразу несколько элементов.
Tokens
Вкладки Library и Tokens находят на странице переменные CSS и пресеты шрифтов и цветов, чтобы правка шла по токенам проекта, а не случайным значением.
patch
Enter копирует только изменения: селектор элемента, свойства со старым и новым значением, по желанию твою пометку и скриншот.
npx -y skisso
Локальный мост в папке проекта и MCP-сервер: claude mcp add --scope user skisso -- npx -y skisso mcp. Для Cursor, Windsurf, Cline и Claude Desktop тот же сервер прописывается в конфиге MCP.
Chat | Issue
В панели чат с твоим агентом: он видит выделенное, показывает CSS на странице и меняет файлы только с разрешения. Режим Issue превращает правки в задачу на GitHub.

Знать до установки

Это альфа одного автора без открытого репозитория, npm-пакет моста идёт под закрытой лицензией.
Токены и пресеты Skisso находит по странице, а не из исходников проекта. Авторы сами пишут, что это не полноценная дизайн-система.
Работает только в Chrome. Чат и MCP требуют запущенного моста и установленного агента со своей подпиской.

Комментарии