К основному содержанию
скилл CX Codex

reimagine-it-variations — скилл Claude Code: что делает, установка

Скилл создаёт несколько дизайн-направлений из одного HTML-файла и собирает их на контрастном листе. Пригодится для сравнения вариантов до выбора финального.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Kayforkind/reimagine-it --skill variations -a claude-code
Открыть на GitHub

Что делает 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 с seed 42, чтобы получить те же варианты.

Как установить reimagine-it-variations

1Через Skills CLI (Vercel)

npx skills add Kayforkind/reimagine-it --skill variations -a claude-code

2Вручную: положить файлы

~/.claude/skills/variations/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/variations/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Дизайн» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. 979 543установок codebase-design Matt Pocock Скилл помогает проектировать модули с небольшим интерфейсом и скрытой внутри сложностью. Подходит для рефакторинга, тестируемости и поиска чистого seam. 850 344установок

Из того же набора7

reimagine-it-lock Скилл снимает палитру, шрифты, мотивы и анимацию с готового HTML-файла и сохраняет их как переносимый набор для повторного использования. CX Codex +1 ★ 212звёзд репо reimagine-it-infographic Строит статистический инфографический плакат строго по фактам из переданного файла. Помогает визуализировать данные без шаблонных диаграмм и выдуманных метрик. CX Codex +1 ★ 212звёзд репо reimagine-it-generate Читает HTML-страницу и перестраивает её в новом визуальном направлении — лендинг, инфографику, дашборд или одно из 17 других. Факты из исходника сохраняются, меняется только композиция. CX Codex +1 ★ 212звёзд репо reimagine-it-extract Вытаскивает из HTML-файла заголовок, ссылки, имена, даты, числа, почты и палитру в JSON. Ничего не перерисовывает — только показывает, что видит движок. CX Codex +1 ★ 212звёзд репо reimagine-it-audit Скилл запускает 19 детерминированных проверок HTML-страницы без обращения к LLM. Находит проблемы с вёрсткой, анимацией, типографикой и доступностью перед релизом. CX Codex +1 ★ 212звёзд репо reimagine-it Скилл анализирует HTML-страницу и создаёт отдельную версию на основе её текста и цветов. Пригодится, когда нужно переосмыслить существующую страницу или сделать инфографику. CX Codex +1 ★ 212звёзд репо

Спонсоры проекта

Компании, которые помогают держать аналитику открытой