# Скетчер HTML-макетов > Создавайте 2-3 интерактивных варианта HTML-макетов, чтобы сравнить направления UI/UX-дизайна, прежде чем остановиться на одном подходе. Быстро исследуйте различные визуальные подходы и собирайте обратную связь. - Canonical: https://nanoskill.ai/ru/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/ru/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: ru - Source type: github - Popularity signal: 2137 ## Sources - https://github.com/NousResearch/hermes-agent ## Install ```shell npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch ``` ## About HTML Mockup Sketcher — это мощный навык, разработанный для того, чтобы помочь пользователям быстро исследовать и сравнивать направления UI/UX-дизайна с помощью одноразовых HTML-макетов. Вместо того чтобы придерживаться одного дизайна, этот инструмент генерирует 2-3 интерактивных варианта, позволяя параллельно сравнивать различные визуальные подходы. Он идеально подходит для ранней стадии исследования дизайна, помогая визуализировать концепции и собирать обратную связь до значительных инвестиций в разработку. Этот навык сосредоточен на создании функциональных, интерактивных HTML-макетов, которые выходят за рамки статичных изображений. Каждый вариант представляет собой автономный HTML-файл с инлайн-CSS, системными шрифтами и реалистичным контентом. Важно, что макеты включают базовую интерактивность, такую как кликабельные ссылки, состояния наведения и как минимум один переход состояния, что дает более ощутимое представление о пользовательском опыте. Встроенные инструменты браузера позволяют визуально проверить макеты, гарантируя их чистоту и отсутствие ошибок. Чтобы облегчить принятие обоснованных решений, Скетчер HTML-макетов предоставляет структурированное сравнение. Каждый вариант сопровождается подробным файлом \`README.md\`, описывающим принципы дизайна, ключевые решения, компромиссы и наиболее подходящие сценарии использования. После генерации сравнительная таблица суммирует различия по различным аспектам дизайна, сопровождаемая аргументированным анализом, который поможет выбрать победителя, объединить элементы или провести дальнейшие итерации. ## Key features - **Генерация нескольких вариантов дизайна**: Одновременно создавайте 2-3 различных варианта HTML макетов, каждый из которых исследует разный подход к дизайну (например, плотность, акценты, эстетика, макет) для параллельного сравнения. - **Интерактивные HTML макеты**: Создавайте самодостаточные HTML файлы со встроенным CSS, системными шрифтами и реалистичным фиктивным контентом. Макеты интерактивны: позволяют кликать по ссылкам, наводить курсор для эффектов и имеют как минимум один переход состояния. - **Визуальная проверка с помощью инструментов браузера**: Используйте встроенную навигацию браузера и инструменты визуализации для визуального осмотра и проверки каждого HTML макета, гарантируя, что макеты чистые, читаемые и без ошибок перед презентацией. - **Структурированная документация вариантов**: Каждый вариант HTML макета включает файл \`README.md\` с подробным описанием его дизайнерской позиции, ключевых решений (макет, типографика, цвет, взаимодействие), компромиссов и идеальных вариантов использования для облегчения обоснованного сравнения. - **Таблица сравнительного анализа**: Представляйте все созданные варианты HTML макетов в сравнительной таблице, выделяя различия по ключевым параметрам, таким как плотность, видимость основного действия, легкость сканирования и общее ощущение, а также субъективное резюме. ## Use cases - **Изучение направлений дизайна UI/UX**: Быстро создавайте и сравнивайте несколько вариантов HTML макетов для изучения различных идей дизайна пользовательского интерфейса и пользовательского опыта перед тем, как вкладывать значительное время в разработку. - **Сбор обратной связи по визуальным концепциям**: Представляйте интерактивные HTML макеты заинтересованным сторонам или пользователям для получения ранней обратной связи по различным визуальным направлениям, помогая уточнить концепции и принимать обоснованные дизайнерские решения. - **Быстрое прототипирование новых функций**: Создавайте одноразовые HTML макеты для быстрого прототипирования новых функций или экранов, фокусируясь на основной функциональности и визуальном потоке, а не на готовом к продакшену коде. ## Result preview Посмотрите реальные HTML-примеры веб-сайтов бутик-отелей, созданные этим навыком агента. ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg) ## Result walkthrough ### Шаг 1：Установить Добавьте навык в своего агента. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### Шаг 2：Опишите ваш веб-сайт Опишите подробную информацию (например, стиль, тип) веб-сайта, который вы хотите создать. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### Шаг 3：Просмотрите результат Просмотрите и сравните созданные HTML-макеты. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # Эскиз Используйте этот навык, когда пользователь хочет **увидеть направление дизайна прежде чем утвердить его** — исследование идей UI/UX в виде одноразовых HTML-макетов. Смысл в том, чтобы сгенерировать 2-3 интерактивных варианта, чтобы пользователь мог сравнивать визуальные направления бок о бок, а не создавать готовый к отправке код. Загружайте этот навык, когда пользователь говорит что-то вроде: "набросай этот экран", "покажи, как может выглядеть X", "сравни макет A и B", "дай мне 2-3 варианта этого UI", "позволь мне увидеть несколько вариантов", "сделай макет до того, как я начну строить". ## Когда НЕ использовать этот навык - Пользователь хочет продакшен-компонент — используй `claude-design` или построй нормально - Пользователь хочет отполированный одноразовый HTML-артефакт (лендинг, презентацию) — `claude-design` - Пользователь хочет диаграмму — `excalidraw`, `architecture-diagram` - Дизайн уже утверждён — просто построй это ## Если у пользователя установлена полная система GSD Если `gsd-sketch` появляется как родственный навык (установленный через `npx get-shit-done-cc --hermes`), предпочтительно использовать **`gsd-sketch`** для полного рабочего процесса: постоянная директория `.planning/sketches/` с MANIFEST, анализ в режиме фронтира, аудиты согласованности по предыдущим эскизам и интеграция с остальной частью GSD. Этот навык — облегчённая автономная версия — одноразовое создание эскизов без машины состояний. ## Основной метод ``` сбор данных → варианты → прямое сравнение → выбор победителя (или итерация) ``` ### 1. Сбор данных (пропустите, если пользователь уже дал достаточно) Перед созданием вариантов получите три вещи — по одному вопросу за раз, не все сразу: 1. **Ощущение.** "Каким должно быть ощущение? Прилагательные, эмоции, вайб." — *"спокойный, редакторский, как Linear"* говорит вам больше, чем *"минималистичный"*. 2. **Референсы.** "Какие приложения, сайты или продукты передают ощущение, которое вы себе представляете?" — реальные референсы лучше абстрактных описаний. 3. **Основное действие.** "Что самое важное делает пользователь на этом экране?" — варианты должны хорошо это обслуживать; если нет, то это просто украшение. Кратко обдумывайте каждый ответ перед следующим вопросом. Если пользователь уже предоставил все три заранее, сразу переходите к вариантам. ### 2. Варианты (2-3, никогда 1, редко 4+) Создайте **2-3 варианта** за один раз. Каждый вариант — это полный, самодостаточный HTML-файл. Не описывайте варианты — стройте их. Смысл в сравнении. Каждый вариант должен занимать **разную дизайнерскую позицию**, а не отличаться значениями пикселей. Три хорошие оси для вариантов: - **Плотность:** компактный / воздушный / сверхплотный (выберите два контрастных полюса) - **Акцент:** контент-первый / действие-первый / инструмент-первый - **Эстетика:** редакторский / утилитарный / игривый - **Макет:** одноколоночный / сайдбар / разделённая панель - **Основа:** на карточках / чистый контент / документный стиль Выберите одну ось и разойдитесь от неё. Два варианта, отличающиеся только цветом акцента, — потраченные усилия — пользователь не сможет их различить. **Именование вариантов:** описывайте позицию, а не номер. ``` sketches/ ├── 001-calm-editorial/ │ ├── index.html │ └── README.md ├── 001-utilitarian-dense/ │ ├── index.html │ └── README.md └── 001-playful-split/ ├── index.html └── README.md ``` ### 3. Сделайте их настоящим HTML Каждый вариант — это **один самодостаточный HTML-файл**: - Встроенный ` ``` ### 4. README варианта `README.md` каждого варианта отвечает на: ```markdown ## Вариант: {название позиции} ### Дизайнерская позиция Одно предложение о принципе, движущем этим вариантом. ### Ключевые решения - Макет: ... - Типографика: ... - Цвет: ... - Взаимодействие: ... ### Компромиссы - Силён в: ... - Слаб в: ... ### Лучше всего для - Тип пользователя или сценарий использования, который этот вариант на самом деле обслуживает ``` ### 5. Прямое сравнение После построения всех вариантов представьте их как сравнение. Не просто перечисляйте — **высказывайте мнение**: ```markdown ## Три взгляда на главный экран | Измерение | Спокойный редакторский | Утилитарный плотный | Игривый разделённый | |-----------|----------------|-------------------|---------------| | Плотность | Низкая | Высокая | Средняя | | Заметность основного действия | Низкая | Высокая | Средняя | | Сканируемость | Высокая | Средняя | Низкая | | Ощущение | Спокойное, доверительное | Резкое, как инструмент | Приглашающее, энергичное | **Моё мнение:** Утилитарный плотный для опытных пользователей, спокойный редакторский для аудитории, ориентированной на контент. Игривый разделённый слабее всех — пытается делать и то, и другое, и ни к чему не приходит. ``` Позвольте пользователю выбрать победителя, или объединить два в гибрид, или запросить ещё один раунд. ## Тематизация (когда у проекта есть визуальная идентичность) Если у пользователя есть существующая тема (цвета, шрифты, токены), поместите общие токены в `sketches/themes/tokens.css` и `@import` их в каждом варианте. Минимизируйте токены: ```css /* sketches/themes/tokens.css */ :root { --color-bg: #fafafa; --color-fg: #1a1a1a; --color-accent: #0066ff; --color-muted: #666; --radius: 8px; --font-display: "Inter", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, sans-serif; } ``` Не переусердствуйте с токенизацией для одноразового эскиза — трёх цветов и одного шрифта обычно достаточно. ## Планка интерактивности Эскиз достаточно интерактивен, когда пользователь может: 1. **Кликнуть по основному действию** и происходит что-то видимое (изменение состояния, модальное окно, уведомление, имитация перехода) 2. **Увидеть один осмысленный переход состояния** (фильтрация списка, переключение режима, открытие/закрытие панели) 3. **Навести на узнаваемые аффордансы** (кнопки, строки, вкладки) Больше этого — переинжиниринг одноразового. Меньше этого — просто скриншот. ## Режим фронтира (выбор, что заскетчить следующим) Если эскизы уже существуют и пользователь говорит "что мне набросать следующим?": - **Пробелы в согласованности** — два победивших варианта из разных эскизов приняли независимые решения, которые ещё не были скомпонованы вместе - **Незаскетченные экраны** — упоминались, но не исследованы - **Покрытие состояний** — "счастливый путь" заскетчен, но не пустое / загрузка / ошибка / 1000 элементов - **Адаптивные пробелы** — проверено в одном viewport; держится ли на мобильном / сверхшироком? - **Паттерны взаимодействия** — статические макеты есть; переходы, перетаскивание, поведение скролла отсутствуют Предложите 2-4 именованных кандидата. Дайте пользователю выбрать. ## Вывод - Создайте `sketches/` (или `.planning/sketches/` если пользователь использует соглашения GSD) в корне репозитория - По одной поддиректории на вариант: `NNN-stance-name/index.html` + `README.md` - Сообщите пользователю, как их открыть: `open sketches/001-calm-editorial/index.html` на macOS, `xdg-open` на Linux, `start` на Windows - Держите варианты одноразовыми — эскиз, который вы почувствовали необходимость сохранить, должен быть повышен до реального кода проекта, а не курироваться как актив **Типичная последовательность инструментов для одного варианта:** ``` terminal("mkdir -p sketches/001-calm-editorial") write_file("sketches/001-calm-editorial/index.html", "...") write_file("sketches/001-calm-editorial/README.md", "## Вариант: Спокойный редакторский\n...") browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html") browser_vision(question="Как это выглядит? Есть ли очевидные проблемы с макетом?") ``` Повторите для каждого варианта, затем представьте сравнительную таблицу. ## Атрибуция Адаптировано из рабочего процесса `/gsd-sketch` проекта GSD (Get Shit Done) — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). Полная система GSD поставляется с постоянным состоянием эскизов, ссылками на шаблоны тем/вариантов и рабочими процессами аудита согласованности; установите с помощью `npx get-shit-done-cc --hermes --global`. ## FAQ ### Что такое HTML макет? HTML макет — это одноразовая интерактивная веб-страница, созданная с помощью HTML и базовых стилей (часто inline CSS), для быстрой визуализации и сравнения различных идей дизайна UI/UX. Он не предназначен для продакшена, а для исследования дизайна на ранней стадии. ### Сколько вариантов HTML макетов генерирует этот навык? Этот навык обычно генерирует 2-3 интерактивных варианта HTML макета за раз. Цель — предоставить контрастные дизайнерские решения для сравнения, а не исчерпывающий список незначительных изменений. ### Можно ли использовать этот навык для создания готового к продакшену кода? Нет, этот навык специально разработан для создания 'одноразовых' HTML макетов для изучения направлений дизайна. Для готовых к продакшену компонентов или отшлифованных артефактов используйте другие инструменты или навыки, такие как \`claude-design\`. ### Какого рода интерактивность есть у HTML макетов? Сгенерированные HTML макеты интерактивны: ссылки кликабельны, ховеры работают, и присутствует как минимум один переход состояния (например, открытие/закрытие панели, фильтрация списка). Это обеспечивает более реалистичное ощущение, чем статические изображения. ### Как этот навык помогает мне сравнивать разные дизайны? После создания HTML макетов навык предоставляет сравнительную таблицу, в которой выделяются ключевые различия по различным параметрам дизайна (например, плотность, макет, эстетика). Также предлагается субъективное резюме, помогающее принять решение. ### Какую информацию мне нужно предоставить для генерации HTML макета? Для создания эффективных HTML макетов вас спросят о желаемом 'ощущении' (прилагательные, атмосфера), эталонных приложениях/сайтах, передающих это ощущение, и самом важном 'основном действии', которое пользователь выполняет на экране.