reimagine-it — скилл
Скилл и CLI перерабатывают HTML-страницу из ее же фактов, чисел и цветов в автономный файл: 17 направлений, без сети и ключей
- 214 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скилл запускает пакет из npm через `npx` на вашей машине и пишет HTML-файлы на диск.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/reimagine-itОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл запускает пакет из npm через `npx` на вашей машине и пишет HTML-файлы на диск.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
reimagine-it берет готовую HTML-страницу и собирает новую самостоятельную страницу из ее же заголовков, фактов, имен, дат, чисел, ссылок и цветов. Исходный файл остается нетронутым, а результат — один HTML без CDN, сборки и ключа API. Скилл `/reimagine-it` требует от агента запускать CLI; верстать страницу вручную он не должен. Команда `npx reimagine-it --auto -i page.html -o redesign.html` сама выбирает одно из 17 направлений: от инфографики и дашборда до 3D-сцены и симуляции. `variations` готовит несколько вариантов с листом сравнения, `lock` сохраняет стиль бренда в JSON, `audit` проверяет страницу по 19 правилам. Тот же движок работает как MCP-сервер с инструментами `design_auto`, `design_variations`, `design_lock`, `audit_html` и другими.
Для кого. Дизайнерам, маркетологам и фронтенд-разработчикам с готовой страницей в HTML, которой нужен новый визуал без переписывания содержимого.
Подходит, если
- Лендинг устарел, а менять его тексты и цифры никто не собирается.
- Отчет или бюджет в HTML превращают в инфографику или дашборд с теми же числами.
- Клиенту показывают несколько направлений командой `variations` и листом сравнения.
- Стиль бренда сохраняют в `house.lock.json` и переносят на другие страницы.
- Готовую страницу прогоняют через аудит правил перед выкладкой, в том числе в CI.
Не подходит, если
- Исходник лежит в PDF, PPTX или DOCX: движок читает только HTML, остальное нужно сначала превратить в страницу.
- Нужна верстка под конкретный фреймворк: на выходе один автономный HTML-файл.
- Содержимое страницы подгружается скриптами с сервера: результат строится по тому, что записано в самом файле.
Пример запроса к агенту
/reimagine-it сделай из `report.html` инфографику с теми же цифрами и покажи еще два варианта направления.Ограничения
Вход — HTML-файл или поток stdin. Для запуска нужен Node.js, команда идет через `npx`, пакет скачивается из npm. Результату не нужны сеть и ключ API, пока не включен `--web-fonts` для шрифтов Google. Если CLI не запустился, агент обязан назвать причину и не вправе подменить его ручной версткой. По умолчанию `-o` перезаписывает существующий файл, а `--no-clobber` запрещает замену. Одинаковый результат повторяется при том же `--seed`.
Как отключить. Удалите скилл `reimagine-it` из каталога скиллов агента, а плагин снимите менеджером плагинов самого агента. Из конфига MCP уберите запись `reimagine-it`.
Частые вопросы
Как поставить reimagine-it в Claude Code?
Выполните `npx skills add Kayforkind/reimagine-it` либо `/plugin marketplace add Kayforkind/reimagine-it` и `/plugin install reimagine-it@reimagine-it`. После этого вызывайте `/reimagine-it`.
Нужны ли ключ API или сеть?
Нет. Движок детерминирован и работает офлайн. Сеть нужна для скачивания пакета и для шрифтов Google, если включен `--web-fonts`.
Как получить несколько вариантов?
Команда `npx reimagine-it variations -i page.html -n 4 -o review/` создает четыре направления и лист сравнения. Понравившийся вариант воспроизводит тот же `--seed`.
Как подключить reimagine-it как MCP-сервер?
Добавьте в конфиг клиента сервер с командой `npx` и аргументами `-y --package reimagine-it reimagine-it-mcp`. Он дает инструменты `reimagine`, `design_auto`, `design_variations`, `design_lock`, `extract_content`, `list_tokens`, `audit_html` и `list_rules`.
Чем он отличается от сервиса Reimagine It?
Это другой проект. Здесь CLI Kayforkind перестраивает HTML по его же содержимому, а сервис reimagineit.ai с интервью никак с ним не связан.
Как проверить готовую страницу?
Команда `npx reimagine-it audit redesign.html` запускает Design Health: 19 правил без модели и без ключей. Для CI есть отдельное действие `Kayforkind/design-health-action`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
Скиллыdesign-to-code — сайт из изображения дизайна
design-to-code
Скилл превращает скриншот, макет, кадр Figma или живую страницу в адаптивный сайт и сверяет результат с дизайном
Скилл рисует макеты интерфейсов и лендингов и переносит их в HTML, в проект на React или в мини-приложение WeChat
Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Проверка по 147 правилам дизайна: находит признаки ИИ-интерфейса, чинит механические и передает остальное скиллу агента
Дизайн-скилл против шаблонных AI-интерфейсов: новые страницы, аудит, редизайн и разбор чужого дизайна по скриншоту или URL
Скилл /taste разбирает дизайн сайта по ссылке: токены, принципы с компромиссами и готовые правила для Cursor и Claude Code
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| reimagine-it (эта карточка) | нет | 214 | |
| Impeccable | нет | 108 873 | Impeccable ведет ревью и правку интерфейса командами в браузере; reimagine-it пересобирает готовую страницу из содержимого ее HTML |
| Frontend Design (Ilm-Alan) | нет | 167 | Frontend-design задает эстетические якоря для новой верстки; reimagine-it переделывает уже существующую страницу |
Коротко о README
Страница проекта показывает девять примеров «до и после», шесть страниц публичных ведомств и таблицу оценок по направлениям. Отдельно описаны расширение для браузера и действие для CI.
Бейдж для README
Исходный SKILL.md
---
name: reimagine-it
description: >-
Content-Derived Design — reads existing HTML and writes a stronger standalone
page from headings, facts, names, dates, numbers, links, emails, and colors
already in that file. CLI: npx reimagine-it --auto -i page.html -o out.html;
also variations, lock, and audit. Use when the user says /reimagine-it, "reimagine it", "reinvent this",
"redesign this page", "make an infographic", wants a content-aware redesign
or a visual leap instead of a mood board. All 17 tokens: webpage,
infographic, svg, 3js, simulation, artistic, cinematic, dashboard,
photography, landing, editorial, gradient, showcase, motion, glass,
lookbook, particles — plus leftover words as a brief. Also /reimagine-it
audit for quality checks. The agent runs the CLI; it does not hand-author
the page.
Installed via npx skills add Kayforkind/reimagine-it or plugin marketplace.
Not /better. Not a mood board. Does not ingest PDF, PPTX, or DOCX.
license: MIT
metadata:
author: Kayforkind
version: "2.15.0"
hosts:
- claude-code
- cursor
- codex
- copilot
- gemini-cli
- factory-droid
- agent-skills
keywords:
- content-derived-design
- redesign
- infographic
- svg
- threejs
- frontend
- html
- css
- palette
- motion
- offline