Skills/Сначала картинка, потом код (image-to-code)

Сначала картинка, потом код (image-to-code)

3 июля 2026

Для визуально важных страниц агент сначала генерирует макет-изображение, подробно его разбирает и только потом верстает сайт максимально близко к нему.

Описание

ДизайнБесплатно

Для визуально важных страниц агент сначала генерирует макет-изображение, подробно его разбирает и только потом верстает сайт максимально близко к нему.

Название
Сначала картинка, потом код (image-to-code)
Категория
Дизайн
Что умеет
  • генерирует макет страницы
  • разбирает композицию и детали
  • верстает по макету
  • сверяет результат с изображением
Источник
leonxlnx/taste-skill
Где работает
Claude Code и другие агенты, которые читают .claude/skillsКак устроены навыки
Куда ставить
Навык работает только в текущем проекте.
Как установить
  1. 1Скопируйте команду из блока «Установка» ниже и выполните её в терминале.
  2. 2Навык появится в папке .claude/skills/image-to-code-skill/
  3. 3Откройте новую сессию Claude Code — навык подхватится автоматически.

Что внутри

npx degit leonxlnx/taste-skill/skills/image-to-code-skill .claude/skills/image-to-code-skill
.claude/skills/
└── image-to-code-skill/
    └── SKILL.md

Действия

Открыть на GitHubДокументация
НазадБрендбук-борды (brandkit)ДалееРеференсы сайта через генерацию изображений
.claude/skills/image-to-code-skill/SKILL.md
  1. 1---
  2. 2name: image-to-code-skill
  3. 3description: Для визуально важных страниц агент сначала генерирует макет-изображение, подробно его разбирает и только потом верстает сайт максимально близко к нему.
  4. 4---
  5. 5​
  6. 6# Сначала картинка, потом код (image-to-code)
  7. 7​
  8. 8Для визуально важных страниц агент сначала генерирует макет-изображение, подробно его разбирает и только потом верстает сайт максимально близко к нему.
  9. 9​
  10. 10## Что делает
  11. 11​
  12. 12- Генерирует макет страницы
  13. 13- Разбирает композицию и детали
  14. 14- Верстает по макету
  15. 15- Сверяет результат с изображением
  16. 16​
  17. 17## Где работает
  18. 18​
  19. 19Claude Code и другие агенты, которые читают .claude/skills.
  20. 20​
  21. 21## Установка
  22. 22​
  23. 231. Выполните: npx degit leonxlnx/taste-skill/skills/image-to-code-skill .claude/skills/image-to-code-skill
  24. 242. Откройте новую сессию Claude Code — навык подхватится сам.