---
name: sketch-to-html
description: Грубый рукотворный скетч / whiteboard photo → HTML каркас. Идентифицирует layout regions, превращает в HTML divs/sections с placeholder-контентом для дальнейшей детализации в interactive-prototype или slides.
when_to_use: Юзер прислал фото маркерной доски / whiteboard / paper sketch / Excalidraw screenshot и хочет «превратить это в HTML каркас». Не для финального дизайна — только начальный wireframe-каркас.
---
# Sketch → HTML
Скетч — это структурный сигнал, не визуальный. Цель: понять иерархию и блоки, не воспроизвести каракули.
## Workflow
```
1. Load image (photo / screenshot / Excalidraw)
2. Identify regions (header / hero / 3 columns / footer)
3. Generate HTML с подписанными блоками
4. → wireframe / interactive-prototype для следующего шага
```
## Identification (визуально)
Claude Code умеет читать изображения через `Read` tool. Для скетча — описание, не парсинг:
```
[Юзер скидывает фото]
```
В response Claude:
1. Описывает что видит: «Hero сверху на 60% ширины, справа карточка с 3 пунктами, ниже — 3 равные секции по 33%, footer с лого»
2. Спрашивает уточнения если нужно: «У тебя в верхнем правом углу что-то закрашено — это иконка или CTA?»
3. Генерирует HTML
## Output: wireframe-style HTML
```html
Sketch interpretation
Hero (top, ширина ~60%)
[Заголовок 2-3 строки — что юзер написал в скетче]
[Подзаголовок если был]
Main content (left)
[Содержимое центрального блока — описать что было в скетче]
Sidebar card (right, ~30%)
[3 пункта/опции из скетча]
Feature 1
[Что юзер написал в первом блоке]
Feature 2
[Второй блок]
Feature 3
[Третий блок]
Footer
[Что было внизу скетча]
```
## Excalidraw / draw.io / Whimsical
Если скетч из этих tools — есть structured export:
### Excalidraw
- Save → `.excalidraw` (JSON)
- В JSON: elements with positions, text, types
- Можно парсить и mapping coords → HTML grid
```js
const sketch = JSON.parse(fs.readFileSync('mockup.excalidraw'));
const elements = sketch.elements;
// elements[i] = { type, x, y, width, height, text, ... }
// Группируешь по visual proximity → rows / columns
```
### draw.io
- Save → `.drawio` (XML)
- Mapping shapes → semantic blocks
## Photo recognition (whiteboard)
Это harder — нужно vision. Через Claude Code:
- `Read` tool принимает image
- Ты описываешь что видишь
- Спрашиваешь у юзера про неоднозначности
Если фото плохого качества — попроси юзера переснять или добавить подписи к блокам.
## Что НЕ переносить
- ❌ Точные пропорции рисованных коробок (палец дрожал)
- ❌ Цвета маркера (юзер использовал то что было)
- ❌ Стрелки между блоками — если важно, exposed как «sequence A → B»
- ❌ Художественные элементы (улыбки, человечки) — не нужны в каркасе
## Что переносить
- ✅ Структура (1, 2, 3 колонки)
- ✅ Иерархия (что больше = более важное)
- ✅ Текст-надписи (содержательные подписи)
- ✅ Sequence / порядок (если whiteboard это flow)
- ✅ Группировку (что рядом = одна секция)
## Уточняющие вопросы
После interpretation спрашивай:
```
«Я вижу 4 блока:
1. Hero сверху во всю ширину
2. Левая колонка с тремя bullet'ами
3. Правая колонка с большой иконкой
4. Footer с тремя кнопками
Угадал? Или что-то не так понял?»
```
## Stack
- `wireframe` — следующий шаг (детализировать структуру)
- `interactive-prototype` — далее (добавить интерактив)
- `placeholders` — для блоков-заглушек
## Антипаттерны
- Воспроизводить скетч буквально (с дрожащими линиями) → дешёвый «hand-drawn» эффект
- Игнорировать подписи юзера и придумывать свой контент
- Делать финальный hi-fi сразу из скетча → теряешь шаг wireframe
- Пытаться парсить фото алгоритмически без vision модели → 99% случаев garbage
- Не задавать уточняющих вопросов → строишь не то что юзер имел в виду
- Передавать sketch напрямую в slides без структурирования → теряется смысл