Designer’s Toolkit for Claude Code. Как дизайнеру использовать Claude Code и сопутствующие инструменты для экспериментов, аудита и настройки UI.

Designer’s Toolkit for Claude Code

Кайл Зантос из UX Tools Labs в интервью поделился тем, как дизайнеры могут применять Claude Code. Вот что он выделяет:

В Cursor есть визуальный редактор наподобие Figma: в нём можно править интерфейс без написания промтов. Кайл показал это на примере своего приложения и объяснил, как работать в таком редакторе.

Инструментов вокруг много — и подключать их все не обязательно. Лучше опираться на свои идеи и задачи, собирать собственные «наборы» и пробовать разные связки. Например, Кайл сделал веб-приложение для экспериментов с анимированной кнопкой, а когда результат его устроил — перенёс получившийся код в Claude Code.

Если вы не уверены в программистской терминологии и вам сложно формулировать задачу для нейросети, можно опираться на готовые решения. Так, Кайл просто вставил в Claude Code твит-пост про создание многослойных теней, чтобы потом использовать этот эффект в своих проектах.

Используя Skills и бесплатный плагин Compound Engineering, Кайл собрал агента, который перенял стиль работы с кодом и часть приёмов Джея Томпкинса и Якуба Крехеля. Такой агент делает аудит сгенерированного дизайна, опираясь на подходы этих специалистов.

Ещё один приём: скажите Claude Code, что хотите использовать панель управления Leva. Этот инструмент даёт возможность в реальном времени менять детали интерфейса — например, настраивать анимацию при наведении или расстояния. Claude Code сам импортирует библиотеку Leva, создаст нужные ползунки и кнопки и подключит панель к вашему проекту.
https://www.youtube.com/watch?v=HcLz3ikw-n0