image-to-codeавтор Leonxlnx

Image to Code Skill.

Навык для Claude Code и Codex для UI-дизайна: сначала генерирует и анализирует изображение дизайна, затем реализует соответствующую страницу.

Web и UI
UI-код

Скачать OpenDesign Инструкция по использованию

Leonxlnx/taste-skill · skills/image-to-code-skill/SKILL.mdSKILL.md

--- name: image-to-code description: Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. MANDATORY IMAGE-FIRST RULE ## 3. GENERATE ENOUGH IMAGES RULE ## 4. CODEX-SPECIFIC SECTION IMAGE RULE ## 5. DO NOT CROP OLD IMAGES RULE ## 6. FRESH RE-GENERATION RULE

Метаданные и заголовки секций прочитаны из исходного файла 2026-09-14 · 36 361 символ полностью

01 Что делает

Что делает skill image-to-code в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Этот skill требует обязательного workflow «сначала изображение» для визуально важных веб-задач. Агент должен сначала самостоятельно сгенерировать изображения дизайна, прежде чем писать код, а затем детально проанализировать эти изображения, чтобы извлечь типографику, отступы, кнопки, цвета и логику компоновки. В Codex по умолчанию генерируется одно крупное, читаемое изображение на секцию, а не сжатые многосекционные доски, и для отдельных секций или детальных видов создаются новые самостоятельные изображения, а не обрезка существующих.

Skill активно избегает вложенных блочных компоновок, фальшивых UI-подписей, крошечных «pills» и тесных hero-секций. Hero должен оставаться чистым, с заголовком максимум в 1-3 строки. Skill обеспечивает щедрые отступы, снижает визуальный шум и реализует фронтенд, точно соответствующий сгенерированным референсам, а не уходит в общие типовые компоновки.

Сервис генерации изображенийUI-код

Смотрите пример запроса ↗

Как это работает

01
Создание отдельных изображений секций в Codex
Внутри Codex skill генерирует одно крупное читаемое изображение на секцию, а не сжимает несколько секций в одну доску.
02
Генерация новых изображений, никогда — обрезка
Когда секции требуется отдельный вид, skill генерирует новое изображение, сохраняя тот же язык дизайна, а не обрезает его из ранее сгенерированного более крупного изображения.
03
Глубокий анализ всех сгенерированных изображений
Прежде чем реализовывать дизайн, skill извлекает из каждого изображения точный видимый текст, взаимосвязи типографики, логику отступов, детали кнопок, цветовую палитру, структуру компоновки и стилизацию компонентов.
04
Реализация фронтенда в соответствии с референсами
Код точно переводит проанализированный дизайн, сохраняя логику компоновки, ритм отступов, порядок секций, настроение типографики и стиль компонентов, не уходя в общие шаблоны.

02 Определите своё применение

Когда использовать skill image-to-code

Используйте skill image-to-code в Claude Code или Codex, когда задача связана с дизайном UI такого рода. Применимость и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

Hero-секции, целевые страницы, маркетинговые сайты, сайты стартапов и редакционные брендовые страницы, где важно визуальное качество
Премиальные многосекционные сайты и редизайны, где ключевую роль играют визуальный вкус и точность реализации

Знайте границы

Чисто технические задачи, исправление ошибок или запросы, где уже задана точная design system и генерация изображений не нужна
Структурные задачи, которые по своей природе преимущественно технические, а не визуальные

Что предоставить

Количество секций или тип сайтаSkill определяет необходимое количество секций или тип сайта (только hero, landing-страница из 4 секций, сайт из 8 секций и т. д.), чтобы решить, сколько изображений сгенерировать.
Визуальное направление или предпочтения по стилюЗапросы пользователя вроде «чисто», «безумно креативно», «премиальный SaaS» или «редакционный» определяют интерпретацию skill'ом параметров DESIGN_VARIANCE, ART_DIRECTION и других базовых конфигурационных настроек.

03 Внутри скилла

Правила, которые skill image-to-code задаёт Claude Code и Codex

6 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

Генерация изображений — обязательный первый шаг
Для запросов на дизайн сайта, где важно визуальное качество, skill должен сгенерировать изображения дизайна до написания какого-либо кода.
Заголовки hero — максимум 1-3 строки
Заголовок hero в идеале должен оставаться в пределах 1-3 строк. Если заголовок становится слишком длинным, skill должен уменьшить количество слов, а не увеличивать число строк.
Никаких карточек внутри карточек внутри карточек
Skill не должен по умолчанию использовать вложенные блочные макеты с гигантскими закруглёнными контейнерами разделов, оборачивающими карточки внутри более крупных карточек внутри внешних карточек.
Агрессивно сокращайте засорённость микро-UI
Skill не должен загромождать дизайн ненужными пилюлями, псевдосистемными маркерами, фальшивыми метками элементов управления, декоративными тегами в стиле кода или бессмысленными мелкими метаданными, которые не улучшают ясность.
Генерируйте достаточно изображений для качества
Skill должен генерировать столько изображений, сколько нужно для читаемости и возможности извлечения дизайна. Лучше сгенерировать слишком много чётких изображений, чем слишком мало сжатых.
Первый экран должен быть чистым на маленьких ноутбуках
Герой-блок и область первого просмотра должны выглядеть удобными и чистыми на маленьком ноутбуке.

04 Применение

Установить image-to-code в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить image-to-code в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill image-to-code

Общая форма CLI skills для skills/image-to-code-skill/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Design me an 8-section landing page for [AI startup name]. Keep the hero clean and readable, use separate images for each section so I can extract typography and spacing properly, and make sure the first screen feels premium on a small laptop. Avoid nested cards and fake system labels.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Убедитесь, что изображения дизайна были сгенерированы до реализации кода для визуально значимых задач
Убедитесь, что текст остаётся читаемым, а если нет — проверьте, что были созданы дополнительные детальные изображения или новые генерации, а не обрезка
Проверьте, что было сгенерировано достаточно изображений и что их количество не было сокращено ради удобства
Убедитесь, что герой-блок остаётся чистым с заголовками максимум 1-3 строки и не выглядит перегруженным на маленьком ноутбуке
Убедитесь, что удалены ненужные вложенные блоки, бесполезные пилюли, метки и фальшивые технические микроэлементы
Проверьте, что реализованный код точно соответствует сгенерированным референсам, не скатываясь в типовые кодовые макеты

В OpenDesign импортируйте image-to-code по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Ветка main
Файл skill: skills/image-to-code-skill/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит ccbc156
License: MIT Из LICENSE.
Звёзды репозитория: 86 946 Снимок GitHub сделан 2026-09-14 для всего репозитория Leonxlnx/taste-skill, который содержит 11 навыков в этом каталоге. Это не рейтинг и не счётчик использования для image-to-code.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

ОСНОВНАЯ ДИРЕКТИВА: ДИЗАЙН ВЕБ-САЙТА В КОД, НАЧИНАЯ С ИЗОБРАЖЕНИЙОпределяет задачу skill как генерацию premium-референсов сайта, удобных для реализации, с последующим превращением их в реальный фронтенд
АКТИВНАЯ БАЗОВАЯ КОНФИГУРАЦИЯЗадаёт числовые значения по умолчанию для вариативности дизайна, визуальной плотности, арт-дирекшна, ясности реализации и других управляющих параметров
ОБЯЗАТЕЛЬНОЕ ПРАВИЛО: СНАЧАЛА ИЗОБРАЖЕНИЯТребует сначала генерировать изображения для визуальных задач по сайту; код — это слой перевода после анализа изображений
ПРАВИЛО ДОСТАТОЧНОГО КОЛИЧЕСТВА ИЗОБРАЖЕНИЙУказывает генерировать столько изображений, сколько нужно для читаемости и извлечения; никогда не сокращать их количество ради удобства
ПРАВИЛО ИЗОБРАЖЕНИЙ РАЗДЕЛОВ, СПЕЦИФИЧНОЕ ДЛЯ CODEXВ Codex предпочтительно одно крупное изображение на раздел, а не сжатие множества разделов в одну нечитаемую доску
ПРАВИЛО ЗАПРЕТА ОБРЕЗКИ СТАРЫХ ИЗОБРАЖЕНИЙГенерируйте новые изображения для конкретных разделов, а не обрезайте или нарезайте ранее сгенерированные более крупные изображения
ПРАВИЛО НОВОЙ ГЕНЕРАЦИИЕсли раздел неясен, сгенерируйте его снова как новое отдельное изображение, сохраняя тот же визуальный язык
ПРАВИЛО ОПЦИОНАЛЬНОГО ДЕТАЛЬНОГО / ИЗВЛЕКАЮЩЕГО ИЗОБРАЖЕНИЯСоздавайте дополнительные приближённые детальные изображения для разделов, когда качество извлечения требует более крупного текста или более чётких отступов
ТРЕБОВАНИЕ ГЛУБОКОГО АНАЛИЗА ИЗОБРАЖЕНИЙОтноситесь к сгенерированным изображениям как к спецификациям дизайна; извлекайте текст, типографику, отступы, кнопки, цвета и макет перед реализацией
ВОРКФЛОУ КОДЕКСА ДЛЯ САЙТОВ, ОТ ИЗОБРАЖЕНИЯ К КОДУЗадаёт порядок выполнения: сгенерировать изображения секций, провести глубокий анализ, извлечь дизайн-систему, реализовать фронтенд в соответствии с ней
ДВИЖОК КОМБИНАТОРНЫХ ВАРИАЦИЙПредлагает варианты визуального направления для темы, фона, типографики, архитектуры героя, системы секций и характерных компонентов
ПРАВИЛА МИНИМАЛИЗМА ГЕРОЯТребует чистых кинематографичных геро-секций с заголовком максимум в 1–3 строки, без лишних элементов, читаемых на небольших ноутбуках

Собственное описание skill

«Элитный skill преобразования изображения в код для веб-сайтов в Codex. Для визуально важных веб-задач он должен сначала сам сгенерировать изображения дизайна, глубоко проанализировать их, а затем реализовать веб-сайт максимально близко к ним. В Codex он должен предпочитать большие, читаемые изображения конкретных секций вместо крошечных сжатых досок, генерировать свежие отдельные изображения для секций или детальных видов вместо обрезки старых, избегать ленивой недогенерации, избегать UI с карточками внутри карточек внутри карточек и держать hero чистым, просторным, читаемым и видимым на маленьком ноутбуке.»

Описание из front-matter файла SKILL.md. Полный файл содержит около 36 361 символа. Читайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill image-to-code

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

С каким агентом для кода следует использовать этот skill?

Skill разработан для Codex и явно ссылается на специфичное для Codex поведение. В нём указано, что внутри Codex нужно предпочитать крупные читаемые изображения по секциям вместо сжатых досок, и по умолчанию генерируется одно изображение на секцию. Вне Codex допускается более компактная многосекционная композиция.

Что происходит, если сгенерированное изображение дизайна нечёткое или текст слишком мелкий?

Skill должен сгенерировать дополнительные детализирующие или уточняющие изображения для этой секции либо перегенерировать секцию как новое отдельное изображение.

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

Image to Code

Запустите image-to-code на реальной задаче UI-дизайна.

Скачайте OpenDesign, импортируйте image-to-code по ссылке из его SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/Leonxlnx/taste-skill --skill image-to-code