🏠 Главная › user guide › creative sketch

{/ Эта страница автоматически создается на основе файла SKILL.md навыка с помощью сайта site/scripts/generate-skill-docs.py. Редактируйте исходный код SKILL.md, а не эту страницу. /}

Эскиз

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

Метаданные навыков
Источник В комплекте (устанавливается по умолчанию)
Путь навыки/креатив/эскиз
Версия 1.0.0
Автор Агент Hermesа (адаптировано из gsd-build/get-shit-done)
Лицензия Массачусетский технологический институт
Платформы Linux, MacOS, Windows
Теги эскиз, макет, дизайн, ui, прототип, html, варианты, исследование, каркас, сравнение
Сопутствующие навыки spike, claude-design, popular-web-designs, excalidraw

Ссылка: полная версия SKILL.md

ℹ️ Info

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

Эскиз

Используйте этот навык, когда пользователь хочет увидеть направление дизайна, прежде чем приступить к нему — изучить идею UI/UX в виде одноразовых HTML-макетов. Цель состоит в том, чтобы сгенерировать 2-3 интерактивных варианта, чтобы пользователь мог параллельно сравнивать визуальные направления, а не создавать готовый к отправке код.

Загружайте это, когда пользователь говорит такие вещи, как «нарисуйте этот экран», «покажите мне, как мог бы выглядеть X», «сравните макет A и B», «дайте мне 2–3 варианта этого пользовательского интерфейса», «дайте мне посмотреть несколько вариантов», «сделайте макет этого, прежде чем я построю».

Когда НЕ использовать это

Если у пользователя установлена полная система GSD

Если gsd-sketch отображается как родственный навык (устанавливается через npx get-shit-done-cc --hermes), отдайте предпочтение gsd-sketch для полного рабочего процесса: постоянный .planning/sketches/ с MANIFEST, анализ пограничного режима, аудит согласованности предыдущих эскизов и интеграцию с остальной частью GSD. Этот навык представляет собой облегченную автономную версию — одноразовое набросок без государственного аппарата.

Основной метод

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

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

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

  1. Чувствовать. «На что это должно быть похоже? Прилагательные, эмоции, атмосфера». — "спокойный, редакционный, как линейный" говорит вам больше, чем "минимальный".
  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-файл:

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

Проверяйте варианты визуально — используйте инструменты браузера 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 возвращает AI-описание того, что на самом деле находится на странице, а также путь к скриншоту — выявляет ошибки макета, которые пропускает чистая проверка исходного кода (например, импорт шрифта, который не был выполнен автоматически, гибкий контейнер, который рухнул). Исправляйте и перемещайтесь заново, пока каждый вариант не будет выглядеть правильно.

Сброс 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;
}

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

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

Эскиз является достаточно интерактивным, если пользователь может:

  1. Нажмите на основное действие, и произойдет что-то видимое (изменение состояния, модальное окно, всплывающее уведомление, навигационный маневр).
  2. Увидеть один значимый переход состояний (фильтровать список, переключить режим, открыть/закрыть панель).
  3. Наведите указатель мыши на узнаваемые возможности (кнопки, строки, вкладки)

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

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

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

Предложите 2-4 названных кандидата. Пусть пользователь выбирает.

Вывод

Типичная последовательность инструментов для одного варианта:

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 Лекс Кристоферсон (gsd-build/get-shit-done). Полная система GSD обеспечивает постоянное состояние эскиза, ссылки на шаблоны тем/вариантов и рабочие процессы аудита согласованности; установите с помощью npx get-shit-done-cc --hermes --global.