Научил Claude верстать HTML из PSD

Друзья, делюсь лайфхаком. Научил Claude верстать HTML из PSD. Я управляю собственной маркетинговой компанией – делаем сайты, сопровождаем клиентов по маркетингу и PR. Моя личная специализация именно PR и маркетинг. Именно как программист я не очень, могу только проверить результат и вектор работы показать. Но тут у меня нарисовалась срочная задача, а делегировать некому – все заняты текучкой. Надо было срочно HTML заверстать, а макет в PSD. Начал искать информацию, как это сделать. Оказывается, что Claude не умеет «читать» PSD, единственный вариант, который предлагался - делать PNG каждого блока, он сверстает блоки отдельно, а потом надо объединить.

Конечно, меня это не устроило. Пошел общаться с Claude. Загрузил ему PSD, ну говорит, что типа да, не может. Я настоял на том, что надо научиться. Начали мы с ним размышлять, как быть. По итогу договорились, что надо написать скрипт на Питоне, который разложит PSD в читаемый структурированный формат, а если точнее, скрипт открывает PSD через psd-tools, рендерит превью и раскладывает слои в JSON (имена, боксы, текст, шрифты, цвета), чтобы модель могла пересобрать дизайн в адаптивный HTML/CSS.

Написали. Протестировали. Получилось!

Итого после создания скрипта Clаude за 8 минут вывел мне HTML вёрстку. Да, всё круто. Claude смог это сделать с моей помощью. Первая версия кода была достаточно простая, даже заголовков «h» не было. Поэтому я «погонял» нейросеть по базовым навыкам HTML/CSS и создал skill, который может сам раскладывать PSD на читаемый формат для ИИ. Конечная версия скилла от первой в рамках теста отличается более чем на 1000 строк кода. Заголовки делать научил, со стилями работать тоже.

Выкладываю скилл для Клода. Со скриптом работал через VS Code, так же нужно отдельно установить Python. Если кому-то нужен только скрипт, что бы PSD разложить его вывел в отдельную ветку.