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

reimagine-it-extract — скилл для Claude Code: сигналы страницы в JSON

Вытаскивает из HTML-файла заголовок, ссылки, имена, даты, числа, почты и палитру в JSON. Ничего не перерисовывает — только показывает, что видит движок.

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

Что делает 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-code

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

~/.claude/skills/extract/SKILL.md

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

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

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

Все скиллы по теме «Данные и базы» →
web-search 101-skills Скилл даёт агенту веб-поиск и извлечение текста через Tavily и Exa. Пригодится для ресёрча, проверки фактов и RAG-пайплайнов. CX Codex +1 110 000установок exa-contents exa-labs Скилл учит агента вызывать Exa Contents напрямую через cURL: отдаёт чистый текст, выдержки или сводки по известным адресам без нового поиска. CX Codex +1 1 100установок content-pattern-analyzer-sms blacktwist Разбирает историю постов и показывает, какие темы, форматы и хуки стабильно работают, а какие нет. Нужен, когда непонятно, что менять в контенте. CX Codex +1 1 800установок ux-extract jezweb Обходит эталонное веб-приложение экран за экраном, снимает состояния и собирает библиотеку UX-паттернов, с которой потом сравнивают свою сборку. CX Codex +1 664установок extract-design-system arvindrk Скилл находит базовые токены дизайна на веб-странице и создаёт начальные файлы tokens.json и tokens.css. Он полезен для быстрого старта стилизации в новом репозитории. CX Codex +1 130 700установок statistical-and-uncertainty-visualization официальный OpenAI Помогает строить графики и дашборды, которые показывают разброс, интервалы и пропуски в данных, а не прячут их. CX Codex GP ChatGPT 10установок

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

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

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