reimagine-it-variations — скилл Claude Code: что делает, установка
Скилл создаёт несколько дизайн-направлений из одного HTML-файла и собирает их на контрастном листе. Пригодится для сравнения вариантов до выбора финального.
npx skills add Kayforkind/reimagine-it --skill variations -a claude-codeЧто делает reimagine-it-variations
Скилл берёт один HTML-источник и создаёт от 2 до 8 самостоятельных направлений. Для каждого варианта он сохраняет отдельную страницу, а в index.html размещает все направления рядом. Файл variations.json содержит ранг, токен, seed, voice, fit, quality и fidelity.
Количество задаётся через -n; без отдельной просьбы процедура советует начать с -n 3. Набор можно повторить с тем же seed, а --ref house.lock.json задаёт референс для сохранения фирменного направления. Без seed набор нельзя воспроизвести. Если fidelity варианта ниже 80%, его нельзя выдавать как готовую опцию для выбора.
Какие задачи решает
- сравнить несколько направлений одного HTML-макета
- показать варианты рядом на одном контрастном листе
- получить отдельную страницу для каждого направления
- ранжировать варианты по quality и fidelity
- повторить набор по сохранённому seed
Примеры запросов агенту
- Сделай несколько вариантов для
page.htmlи положи результат вreview/через/reimagine-it variations. - Покажи 4 дизайн-направления для
page.htmlи сравни их рядом. - Повтори набор для
page.htmlс seed42, чтобы получить те же варианты.
Как установить reimagine-it-variations
1Через Skills CLI (Vercel)
npx skills add Kayforkind/reimagine-it --skill variations -a claude-code2Вручную: положить файлы
~/.claude/skills/variations/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/variations/
1Через Skills CLI (Vercel)
npx skills add Kayforkind/reimagine-it --skill variations -a codex2Вручную: положить файлы
.agents/skills/variations/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Kayforkind/reimagine-it --skill variations -a cursor2Вручную: положить файлы
.cursor/skills/variations/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Kayforkind/reimagine-it variations2Вручную: положить файлы
.github/skills/variations/SKILL.md1Через Skills CLI (Vercel)
npx skills add Kayforkind/reimagine-it --skill variations -a gemini-cli2Командой платформы
gemini skills install https://github.com/Kayforkind/reimagine-it --path skills/reimagine-it/variationsВручную: положить файлы
.devin/skills/variations/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Kayforkind/reimagine-it --skill variations -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о reimagine-it-variations
Как установить reimagine-it-variations в Claude Code?
Выполните npx skills add Kayforkind/reimagine-it --skill variations -a claude-code, затем откройте ~/.claude/skills/variations/SKILL.md.
Что делает reimagine-it-variations?
Скилл создаёт от 2 до 8 дизайн-направлений из одного HTML-файла, отдельные страницы для них и index.html с боковым сравнением. Отчёт variations.json содержит оценки и данные для повторного запуска.
Можно ли воспроизвести тот же набор вариантов?
Да. Сохраните seed и передайте его через --seed, например npx reimagine-it variations -i page.html -n 4 --seed 42 -o review/. Один seed воспроизводит весь набор.
Исходный текст
SKILL.md · MIT
---
name: reimagine-it-variations
description: >-
Generate several distinct design directions from one HTML source plus a
contrast sheet that shows every direction side by side. Use when the user
says /reimagine-it variations, "show me options", "give me three takes",
"which direction works best", or wants to compare design directions before
choosing one. CLI: npx reimagine-it variations -i page.html -n 4 -o review/.
Part of the reimagine-it Content-Derived Design suite.
license: MIT
metadata:
author: Kayforkind
version: "2.15.0"
parent: reimagine-it
hosts:
- claude-code
- cursor
- codex
- copilot
- gemini-cli
keywords:
- design-variations
- design-exploration
- contrast-sheet
- direction-review
- content-derived-design
category: Design
capabilities:
- multi-direction-generation
- contrast-sheet-review
- seeded-reproduction
trigger_phrases:
- /reimagine-it variations
- show me design options
- give me three takes
- compare design directions
- which direction works best
---
# /reimagine-it variations
**Parent:** [../SKILL.md](../SKILL.md) — the full Content-Derived Design engine. This sub-skill handles only multi-direction exploration.
Generates 2–8 distinct directions from one source plus an `index.html`
contrast sheet that lays them out side by side with per-direction quality,
fidelity, and voice. One seed reproduces the whole set.
## Usage
```bash
npx reimagine-it variations -i page.html -n 4 -o review/
npx reimagine-it variations -i page.html -n 4 --seed 42 -o review/ # reproducible
npx reimagine-it variations -i page.html -n 4 --ref house.lock.json # on-brand
```
Output per run:
| File | What it is |
|------|-----------|
| `variation-1-<token>.html` … | One standalone page per direction |
| `index.html` | Contrast sheet: all directions side by side |
| `variations.json` | Ranked report: token, seed, voice, fit, quality, fidelity |
## Procedure
1. Run with `-n 3` unless the user asked for a different count.
2. Read `variations.json` back to the user: rank, token, quality, fidelity.
3. Name the *structural* difference between the top two — not just the colors.
4. Print the seed and tell the user how to reproduce the set.
5. Once a direction is chosen, generate it standalone with
`npx reimagine-it -i page.html -t <token> --seed <seed>`.
## Must not
- Present variations as options when fidelity is below 80% for any of them
- Describe two variations as different if they share a silhouette
- Lose the seed — the set is only reviewable if it is reproducible
- Skip the contrast sheet; side-by-side comparison is the point
Part of [reimagine-it](https://github.com/Kayforkind/reimagine-it) — MIT.
© Kayforkind · MIT · Kayforkind/reimagine-it