Визуальная правка дизайна сайта в CSS Studio с переносом в код через Claude Code
CSS Studio позволяет править вид сайта прямо в браузере, а подключённый по MCP агент вроде Claude Code переносит изменения в исходники. Замеров на странице нет, только пример с двумя правками в файле стилей.
Что сделали
CSS Studio запускают на локальной версии сайта и подключают к нему свой агент для кода, например командой /studio в проекте. Пользователь выбирает элемент и либо описывает изменение в чате, либо меняет стили, раскладку, текст и анимации визуальными контролами. Агент следит за этими изменениями и вписывает их в исходные файлы. Варианты и адаптации под мобильные идут отдельными фоновыми задачами.
Что получилось
На странице показан пример, где правки внутреннего отступа и скругления углов сохранились в файл Hero.css как 2 правки. Замеров и отзывов пользователей нет.
На что обратить внимание
Программа продаётся разовой покупкой, будущие обновления входят в цену. Работает с HTML, CSS, Tailwind и React, но агент для кода нужен свой.
Пояснение
MCP это протокол, через который агент подключается к внешним инструментам. Здесь через него CSS Studio передаёт агенту правки, сделанные мышью в браузере.
Кому пригодится
Дизайнерам и фронтенд-разработчикам, которым проще поправить вид сайта мышью, чем описывать правки словами.
Попробуйте сами с Claude Code
Настрой MCP-подключение CSS Studio, чтобы я мог визуально править вид сайта по адресу [локальный адрес сайта] в браузере. Когда я меняю дизайн, перенеси изменение в код в [путь], используя существующие стили и компоненты, и покажи diff. После каждого изменения останавливайся, чтобы я одобрил его, прежде чем переходить к следующему.
Нужна помощь с запуском? Вступайте в сообщество AI Pack ↗
Источник: cssstudio.ai ·