reimagine-it-extract — скилл для Claude Code: сигналы страницы в JSON
Вытаскивает из HTML-файла заголовок, ссылки, имена, даты, числа, почты и палитру в JSON. Ничего не перерисовывает — только показывает, что видит движок.
npx skills add Kayforkind/reimagine-it --skill extract -a claude-codeЧто делает reimagine-it-extract
Скилл разбирает одну страницу и отдаёт типизированный JSON: title, profile, density, palette, anchors, properNouns, headings, dates, numbers, emails, links, sourceHex и счётчики абзацев со списками. Флаг --full добавляет сырые массивы paragraphs и items. Запуск из терминала: npx reimagine-it extract -i page.html -o signals.json, можно и через stdin — cat page.html | npx reimagine-it extract -o -.
Полезен, когда нужно понять, из чего вообще складывается будущий редизайн, или перенести контент на другую систему. JSON стабильный и типизированный, поэтому его удобно скармливать дальше — в анализ, миграцию или сборку дизайн-системы.
Важная граница: hex-цвета в sourceHex действительно были в исходнике, а palette — производная от них. Скилл не округляет и не «причёсывает» даты с числами, это цитаты. Если в отчёте появилось число, которого нет на странице, значит его дописали вручную — сам движок такого не делает.
Какие задачи решает
- снять с HTML-страницы список фактов перед редизайном
- вытащить hex-цвета и производную палитру в JSON
- собрать инвентарь ссылок, почт и дат для миграции контента
- проверить, какие данные движок вообще читает со страницы
- получить типизированную сводку контента для дизайн-системы
Примеры запросов агенту
- Запусти
/reimagine-it extractдляpage.htmlи сохрани результат вsignals.json - Что движок видит на этой странице? Вытащи палитру и факты
- Собери инвентарь ссылок, дат и почт со страницы
index.html
Как установить reimagine-it-extract
1Через Skills CLI (Vercel)
npx skills add Kayforkind/reimagine-it --skill extract -a claude-code2Вручную: положить файлы
~/.claude/skills/extract/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/extract/
1Через Skills CLI (Vercel)
npx skills add Kayforkind/reimagine-it --skill extract -a codex2Вручную: положить файлы
.agents/skills/extract/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Kayforkind/reimagine-it --skill extract -a cursor2Вручную: положить файлы
.cursor/skills/extract/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Kayforkind/reimagine-it extract2Вручную: положить файлы
.github/skills/extract/SKILL.md1Через Skills CLI (Vercel)
npx skills add Kayforkind/reimagine-it --skill extract -a gemini-cli2Командой платформы
gemini skills install https://github.com/Kayforkind/reimagine-it --path skills/reimagine-it/extractВручную: положить файлы
.devin/skills/extract/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Kayforkind/reimagine-it --skill extract -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о reimagine-it-extract
Как установить reimagine-it-extract в Claude Code?
Выполните npx skills add Kayforkind/reimagine-it --skill extract -a claude-code, после чего файл скилла окажется в ~/.claude/skills/extract/SKILL.md.
Что делает reimagine-it-extract?
Читает HTML-файл и выдаёт JSON с заголовком, ссылками, именами, датами, числами, почтами и палитрой. Сам редизайн не генерирует.
Чем sourceHex отличается от palette?
sourceHex — цвета, которые были в исходной странице. palette строится из них, это производная, а не то, что страница объявила.
Исходный текст
SKILL.md · MIT
---
name: reimagine-it-extract
description: >-
Emit the content signals reimagine-it reads from an HTML file — title,
anchors, proper nouns, dates, numbers, emails, links, source hex colors,
and the derived palette — as JSON without generating a redesign. Use when
the user says /reimagine-it extract, "what does the engine see in this
page", "extract the palette", "pull the facts from this page", or wants
content analysis for research, migration, or design-system work. CLI:
npx reimagine-it extract -i page.html -o signals.json. 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:
- content-extraction
- palette-extraction
- content-analysis
- design-signals
- content-derived-design
category: Data
capabilities:
- content-signal-extraction
- palette-derivation
- fact-inventory
trigger_phrases:
- /reimagine-it extract
- what does the engine see
- extract the palette
- pull the facts from this page
- analyze this page's content
---
# /reimagine-it extract
**Parent:** [../SKILL.md](../SKILL.md) — the full Content-Derived Design engine. This sub-skill handles only the extraction surface — the honesty layer the whole method stands on.
The redesign is only as honest as its extraction. This verb emits exactly what
the engine reads, as JSON, without generating anything: title, profile,
density, derived palette, anchors, proper nouns, headings, dates, numbers,
emails, links, and source hex colors. Every extracted fact exists in the
source — property-tested against hostile and malformed input.
## Usage
```bash
npx reimagine-it extract -i page.html -o signals.json
cat page.html | npx reimagine-it extract -o - # stdin → stdout
npx reimagine-it extract -i page.html --full -o signals.json # + prose
```
Payload shape (default):
```json
{
"source": "page.html",
"title": "…",
"profile": "restaurant | saas | civic | …",
"density": "sparse | medium | dense",
"palette": { "ground": "…", "accent": "…", "muted": "…", "surface": "…", "ink": "…" },
"anchors": ["…"],
"properNouns": ["…"],
"headings": ["…"],
"dates": ["…"],
"numbers": ["…"],
"emails": ["…"],
"links": ["…"],
"sourceHex": ["#6B3A2A"],
"counts": { "paragraphs": 4, "listItems": 16 }
}
```
`--full` adds `paragraphs` and `items` (the raw prose arrays).
## Procedure
1. Run it before any redesign when the user asks "what would you even use
from this page?" — the JSON answers with the engine's actual inputs.
2. To audit honesty: every `dates`, `numbers`, `emails`, and `links` entry
must be findable in the source. Nothing else is allowed to appear.
3. Use it for migration/research: the payload is a stable, typed summary of
a page's content — no redesign attached.
## Must not
- Add facts not present in the payload to any downstream summary
- Present the derived `palette` as colors the source *declared* — hex colors
in `sourceHex` were in the source; the rest is derivation
- Round or "clean up" extracted numbers and dates; they are quotes
Part of [reimagine-it](https://github.com/Kayforkind/reimagine-it) — MIT.
© Kayforkind · MIT · Kayforkind/reimagine-it