Sketch

Одноразовые HTML-макеты: 2-3 варианта дизайна для сравнения.

Метаданные навыка


Источник	Встроенный (установлен по умолчанию)
Путь	`skills/creative/sketch`
Версия	`1.0.0`
Автор	Hermes Agent (adapted from gsd-build/get-shit-done)
Лицензия	MIT
Платформы	linux, macos, windows
Теги	`sketch`, `mockup`, `design`, `ui`, `prototype`, `html`, `variants`, `exploration`, `wireframe`, `comparison`
Связанные навыки	`spike`, `claude-design`, `popular-web-designs`, `excalidraw`

Справочник: полный SKILL.md

инфо

Ниже приведено полное определение навыка, которое Hermes загружает при его срабатывании. Именно это агент видит как инструкции, пока навык активен.

Sketch

Применяй этот навык, когда пользователь хочет увидеть направление дизайна, прежде чем выбрать одно — и проработать идею 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, анализ в режиме frontier, аудит согласованности по прошлым наброскам и связка с остальным GSD. А этот навык — лёгкая автономная версия: разовые наброски без машины состояний.

Базовый метод

intake  →  variants  →  head-to-head  →  pick winner (or iterate)

1. Сбор вводных (пропусти, если пользователь уже дал достаточно)

Прежде чем собирать варианты, выясни три вещи — по одному вопросу за раз, а не всё сразу:

Ощущение. «Каким это должно ощущаться? Прилагательные, эмоции, настроение». — «спокойно, по-редакторски, как Linear» скажет тебе больше, чем «минималистично».
Референсы. «Какие приложения, сайты или продукты передают то ощущение, которое ты представляешь?» — реальные референсы лучше абстрактных описаний.
Главное действие. «Что самое важное делает пользователь на этом экране?» — все варианты должны хорошо обслуживать именно это; если нет — они просто украшение.

Коротко проговаривай каждый ответ, прежде чем задать следующий вопрос. Если пользователь сразу дал все три — переходи прямо к вариантам.

2. Варианты (2-3, никогда 1, редко 4 и больше)

Сделай 2-3 варианта за один заход. Каждый вариант — самодостаточный HTML-файл. Не описывай варианты — собирай их. Весь смысл в сравнении.

Каждый вариант должен брать другую дизайнерскую позицию, а не другие значения пикселей. Хорошие оси для расхождения вариантов:

Плотность: компактно / воздушно / сверхплотно (выбери два контрастных полюса)
Акцент: на контенте / на действии / на инструментах
Эстетика: редакторская / утилитарная / игривая
Раскладка: одна колонка / сайдбар / split-pane
Опора: карточки / голый контент / документный стиль

Выбери одну ось и разводи варианты по ней. Два варианта, отличающихся только акцентным цветом, — потраченные впустую усилия: пользователь их не различит.

Именование вариантов: описывай позицию, а не номер.

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-файл:

Встроенный <style> — без шага сборки, без внешнего CSS
Системные шрифты или один Google Font через <link>
Tailwind через CDN (<script src="https://cdn.tailwindcss.com"></script>) — нормально
Реалистичный фейковый контент — настоящие фразы, настоящие имена, а не «Lorem ipsum»
Интерактивность: ссылки кликаются, ховеры работают, хотя бы один переход состояния (открыть/закрыть, фильтр, переключатель). Застывшая статичная картинка как набросок хуже, чем неряшливый, но анимированный.

Открой результат в браузере. Если что-то сломано — почини, прежде чем показывать пользователю.

Проверяй варианты визуально — используй браузерные инструменты Hermes. Не пиши HTML с надеждой, что он отрендерится: загрузи каждый вариант и посмотри на него:

browser_navigate(url="file:///absolute/path/to/sketches/001-calm-editorial/index.html")
browser_vision(question="Does this layout look clean and readable? Any visible bugs (overlapping text, unstyled elements, broken images)?")

browser_vision возвращает описание того, что реально на странице, от ИИ плюс путь к скриншоту — это ловит баги раскладки, которые ускользают при чтении одного только исходника (например, тихо не подгрузившийся импорт шрифта или схлопнувшийся flex-контейнер). Чини и переходи заново, пока каждый вариант не будет выглядеть правильно.

Дефолтный сброс CSS и стек системных шрифтов для быстрого старта:

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1a1a1a;
    background: #fafafa;
    line-height: 1.5;
  }
</style>

4. README варианта

README.md каждого варианта отвечает на вопросы:

## Variant: {stance name}

### Design stance
One sentence on the principle driving this variant.

### Key choices
- Layout: ...
- Typography: ...
- Color: ...
- Interaction: ...

### Trade-offs
- Strong at: ...
- Weak at: ...

### Best for
- The kind of user or use case this variant actually serves

5. Очная ставка

Когда все варианты собраны, покажи их как сравнение. Не просто перечисляй — высказывай мнение:

## Three takes on the home screen

| Dimension | Calm editorial | Utilitarian dense | Playful split |
|-----------|----------------|-------------------|---------------|
| Density   | Low            | High              | Medium        |
| Primary action visibility | Low | High | Medium |
| Scan-ability | High | Medium | Low |
| Feel | Calm, trusted | Sharp, tool-like | Inviting, energetic |

**My take:** Utilitarian dense for power users, calm editorial for content-forward audiences. Playful split is weakest — tries to do both and commits to neither.

Дай пользователю выбрать победителя, либо собрать гибрид из двух, либо запросить ещё один заход.

Темизация (когда у проекта есть визуальная идентичность)

Если у пользователя уже есть тема (цвета, шрифты, токены), сложи общие токены в sketches/themes/tokens.css и подключай их через @import в каждом варианте. Держи токены минимальными:

/* 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;
}

Не перетокенизируй одноразовый набросок — трёх цветов и одного шрифта обычно достаточно.

Планка интерактивности

Набросок достаточно интерактивен, когда пользователь может:

Кликнуть главное действие — и происходит что-то видимое (смена состояния, модалка, тост, имитация перехода)
Увидеть один осмысленный переход состояния (отфильтровать список, переключить режим, открыть/закрыть панель)
Навести курсор на узнаваемые элементы управления (кнопки, строки, вкладки)

Больше этого — переинженеренная одноразовая штука. Меньше — это скриншот.

Режим frontier (выбор, что набросать дальше)

Если наброски уже есть и пользователь спрашивает «что мне набросать следующим?»:

Пробелы согласованности — два выигравших варианта из разных набросков сделали независимые выборы, которые ещё не свели вместе
Ненабросанные экраны — упоминались, но ни разу не проработаны
Покрытие состояний — счастливый путь набросан, а пустое / загрузка / ошибка / 1000 элементов — нет
Пробелы по адаптивности — проверено на одном вьюпорте; держится ли на мобильном / ультраширокном?
Паттерны взаимодействия — статичные раскладки есть, а переходов, перетаскивания, поведения при скролле нет

Предложи 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", "<!doctype html>...")
write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...")
browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html")
browser_vision(question="How does this look? Any obvious layout issues?")

Повтори для каждого варианта, затем покажи таблицу сравнения.

Атрибуция

Адаптировано из рабочего процесса /gsd-sketch проекта GSD (Get Shit Done) — MIT © 2025 Lex Christopherson (gsd-build/get-shit-done). Полная система GSD поставляется с постоянным хранением набросков, ссылками на паттерны тем/вариантов и процессами аудита согласованности; установка через npx get-shit-done-cc --hermes --global.