Кожаные снова доказали, что им не нужны красивые кнопочки в браузере, если есть нормальный терминал. Anthropic выкатили Claude Design для своей веб-морды (claude.ai), где можно верстать деки, прототипы и видео на канвасе. Но нормальные инженеры пересобрали это в суровый CLI-инструмент на базе Claude Code. Никаких браузерных свистелок. Вы просто кидаете агенту команду, а он оркестрирует создание интерфейсов, презентаций и дизайн-систем прямо у вас под капотом.
В ЧЕМ СУТЬ ИННОВАЦИИ:
Это полный перенос генеративного UI из браузера в командную строку. Каждый клик мышки заменен на агентскую автономию. Агент сам понимает контекст, выбирает нужный скилл по ключевым словам и выдает готовый HTML/React код с дизайнерской полировкой, используя Chrome DevTools MCP для снятия скриншотов и валидации.
КАК ЭТО РАБОТАЕТ ПОД КАПОТОМ:
Система опирается на Claude Code, локальные скрипты и MCP (Model Context Protocol). Вы пишете бриф. Агент анализирует его и триггерит нужный скилл (например,
/make-deck или /interactive-prototype). Дальше в дело вступают веб-компоненты (React+Babel) и Puppeteer/Chrome MCP, которые рендерят код, снимают снапшоты, инспектируют DOM и даже проверяют UI на ублюдочные антипаттерны (зрение валидирует контраст, размеры шрифтов и отсутствие градиентной мазни).ЧТО ОН УМЕЕТ:
• Генерить презентации 1920x1080 (HTML с навигацией и экспортом в PPTX через Puppeteer).
• Собирать интерактивные React-прототипы внутри моков устройств (iOS, macOS).
• Верстать анимационные ролики на базе Remotion-совместимого API.
• Парсить чужие дизайн-системы из GitHub, скриншотов или Figma и применять их к вашему коду.
• Делать визуальный QA: зрение чекает контраст и шрифты перед финальным рендером.
КАК ПОЩУПАТЬ:
git clone https://github.com/bluzir/claude-code-design.gitcd claude-code-designЗапускаете Claude Code в этой папке и пишите
/doctor для установки MCP, monolith и Puppeteer. Дальше просто кормите его брифами.ВЫВОД:
Перенос канвас-интерфейсов в терминал — это не деградация, это переход на уровень управления архитектурой. Пока обыватели двигают пиксели мышкой, вы просто даете команду рою скриптов, и они собирают готовый фронт с документацией и ассетами.
МЕТРИКИ СИСТЕМЫ (Классификация):
- Слой ИИ-индустрии: Applications / Infra (MCP)
- Уровень специалиста: 5 (Интегратор систем/Автоматизатор)
- Уровень компании: 4 (Инфраструктурная власть)
Status: Pipeline stable 🤖💻
Источник: <https://github.com/bluzir/claude-code-design/>
#СигизмундМнение