# Sketch To HTML

> Скетч, фото доски, салфетки или Excalidraw → HTML-каркас. Триггеры: «из скетча в html», «whiteboard в каркас». НЕ PDF/DOCX → document-import.

- Skill: `jhamidun/sketch-to-html` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jhamidun/sketch-to-html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhamidun/sketch-to-html/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: JHamidun (https://skillmd.com/u/jhamidun)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jhamidun/sketch-to-html

---


# Sketch to HTML

Не пытайся «распознавать» руками. У тебя есть способность видеть картинку — используй её прямо.

## Алгоритм

1. **Открой картинку.** Просто через `view_image` (или эквивалент в Claude Code — Read с путём к картинке).
2. **Опиши вслух, что видишь.** Не сразу строй HTML, сначала проговори:
   - Это один экран или флоу?
   - Сколько секций / прямоугольников / зон?
   - Есть ли подписи и стрелки между ними?
   - Что ты считаешь заголовком, что — текстом, что — кнопкой?
3. **Покажи описание пользователю.** «Вижу 3 экрана. На первом форма входа, на втором лента карточек, на третьем настройки. Между ними стрелки 1→2→3. Правильно понял?»
4. **Дождись подтверждения.** Не строй HTML, пока пользователь не согласился с описанием.
5. **Перейди в `wireframe`** — собери черновик в low-fi.
6. После утверждения — переходи в hi-fi через `interactive-prototype` или `slides`.

## Чего не делать

- ❌ Не угадывай детали, которых не видно. «Сделай красиво» — это сигнал спросить.
- ❌ Не игнорируй стрелки и подписи. Они часто несут важную инфу о флоу.
- ❌ Не теряй пропорции. Если на скетче sidebar занимает 1/4 ширины — на твоём wireframe тоже.

## Если скетч сделан в excalidraw / tldraw / .napkin

- `.napkin` — рисовалка с превью рядом. Если есть `scraps/.{name}.thumbnail.png` — открой превью.
- Excalidraw export — `.excalidraw.json` или `.png`. JSON парси, PNG смотри глазами.
- tldraw — `.tldr` это JSON. Можно вытащить shapes, но проще смотреть PNG-экспорт.

## Полезные пометки в описании

Когда описываешь скетч, размечай так:

```
Экран 1 — Login
  ┌────────────────┐
  │ [LOGO]         │
  │                │
  │ Email   [____] │
  │ Pass    [____] │
  │                │
  │   [Sign in →]  │
  │   forgot pwd?  │
  └────────────────┘
       ↓ on submit
Экран 2 — Feed
  ...
```

Эту разметку отправь пользователю как часть описания. Так ему легче подтвердить или поправить.

## После HTML

Сохрани оригинал скетча рядом с артефактом (`assets/sketch-source.png`), сошлись на него в комментарии в HTML — пригодится при будущих правках.

## Legacy reference

Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в `references/legacy-sketch-to-html.md`. Секции там: Workflow, Identification (визуально), Output: wireframe-style HTML, Excalidraw / draw.io / Whimsical, Photo recognition (whiteboard), Что НЕ переносить, Что переносить, Уточняющие вопросы, Stack, Антипаттерны.