# Design Canvas

> N вариантов дизайна бок-о-бок в одном HTML: pan/zoom, фокус. Триггеры: «сравни 3 версии», «покажи варианты». НЕ постеры/арт → canvas-design.

- Skill: `jhamidun/design-canvas` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jhamidun/design-canvas`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhamidun/design-canvas/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/design-canvas

---


# Design canvas

Один HTML, в котором лежит N карточек-артбордов в сетке, каждый — независимый дизайн. Пользователь может:
- зумить и панорамировать всю сетку колесом / трекпадом
- открыть любой артборд во весь экран по клику
- листать артборды стрелками в фокус-режиме

Лучше, чем плодить `option-1.html`, `option-2.html`, `option-3.html`.

## Каркас

`templates/canvas-template.html` содержит готовый шаблон с:
- зум-сценой через `transform: scale()`
- секциями (`<dc-section title="...">`)
- артбордами (`<dc-artboard label="..." width="..." height="...">`)
- фокус-оверлеем

## Использование

```html
<dc-canvas>
  <dc-section title="Header variations">
    <dc-artboard label="A — minimal"     width="1200" height="600">
      <iframe src="header-a.html"></iframe>
    </dc-artboard>
    <dc-artboard label="B — with hero"   width="1200" height="600">
      <iframe src="header-b.html"></iframe>
    </dc-artboard>
    <dc-artboard label="C — full bleed"  width="1200" height="600">
      <iframe src="header-c.html"></iframe>
    </dc-artboard>
  </dc-section>
</dc-canvas>
```

Содержимое артборда — либо inline-разметка, либо iframe со ссылкой на отдельный HTML-вариант.

## Правила

- Артборды — это **статичные кадры**, не скролл-зоны. Не используй `height: 100%; overflow: auto` внутри. Размер артборда задаётся атрибутами `width`/`height`, и контент должен в них помещаться.
- Между секциями делай минимум 80px вертикального расстояния, чтобы при зум-ауте читалось как разные группы.
- Лейбл артборда (`label="..."`) должен описывать **отличие** от соседей, не содержание. «A — без иконок» лучше, чем «Header v1».
- Не больше 6 артбордов в одной секции — глаза устают.

## Что хорошо вынести в варианты

- Ось визуала: минимализм vs богатая графика
- Ось плотности: компактно vs воздушно
- Ось копирайта: лаконично vs развёрнуто
- Ось взаимодействия: статика vs анимация
- Ось интерфейсной парадигмы: классика vs нестандартный layout

Лучше дать 4 артборда, явно различающихся по одной оси, чем 8 случайных вариаций.