본문으로 건너뛰기
cccskills
무료GitHub에 공개

reimagine-it-lock

Design DNA capture — extracts palette, type stack, motifs, motion, and 3D signatures from a shipped HTML file and saves them as a reusable reference pack. Use when the user says /reimagine-it lock, "lock this design", "save design DNA", "capture this look", or wants to reuse a shipped design on a different target. Locks capture palette, type, motif, and motion from a shipped HTML file. Part of the reimagine-it Content-Derived Design suite.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Kayforkind/reimagine-it
설치 방법 보기

포함된 파일(1)

  • SKILL.md3.8 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

/reimagine-it lock

Parent: ../SKILL.md — the full Content-Derived Design engine. This sub-skill handles design DNA capture and reuse.

Captures a shipped design's full identity into a portable markdown pack so it can be reused on any source file:

/reimagine-it lock gold/domains/cinematic/after.html as house-cinema
/reimagine-it lock examples/end-users/horizon/auto.html as ops-console

What gets captured

CategoryWhatExample
PaletteGround, accent, support colors with hex values#08141a ground, #3ae098 accent
Type stackDisplay family, body family, fallbacksIowan Old Style, Georgia, serif
MotifsRepeating visual patternsPulse wave, heartbeat ring
MotionAnimation budget, keyframe durationsalive-micro, 2–4 loops
3D signature3D approach for the mediummatcap-hero, card-fan
Section structurePage anatomy gridHero → Cards → Footer

Token translation

Locks include a translation table so a webpage lock can inform another HTML token:

/reimagine-it webpage --ref house-cinema
/reimagine-it infographic --ref house-cinema
/reimagine-it dashboard --ref house-cinema

CLI (machine-readable)

The agent pack is markdown for the LLM. The CLI writes JSON the engine can apply without an agent:

npx reimagine-it lock -i house-style.html -o house.lock.json
npx reimagine-it -i my-page.html --ref house.lock.json -t landing -o on-brand.html
npx reimagine-it -i my-page.html --ref competitor.html --auto -o study.html

--ref accepts a .lock.json file or raw HTML (reverse-lock). Structure stays content-derived; only palette, type, and voice are pinned.

Procedure

  1. Read the target file (HTML with inline CSS).
  2. Extract palette: scan :root { } block and all var(--*) usage for hex values.
  3. Extract type stack: scan font-family declarations; capture display, body, fallbacks.
  4. Extract motifs: scan SVG <pattern>, <linearGradient>, keyframe @keyframes names.
  5. Extract motion: count @keyframes blocks, note durations, check prefers-reduced-motion.
  6. Extract 3D: scan for perspective, rotateX, rotateY, translateZ.
  7. Extract section structure: scan semantic HTML (<header>, <main>, <section>, <footer>).
  8. Write the pack to references/locks/<name>.md.
  9. Report LOCKED: <name> → references/locks/<name>.md with a summary of what was captured.

Must not

  • Save outside references/locks/ (or the host's configured locks path)
  • Capture invented colors not actually in the source CSS
  • Overwrite an existing lock without asking
  • Skip the token translation table

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

reimagine-it

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Kayforkind/reimagine-it2092026년 10월 22일 업데이트

reimagine-it-audit

무료

Design Health — runs 19 deterministic quality checks on HTML output. Use when the user says /reimagine-it audit, "audit this page", "check design quality", or wants to verify craft-floor compliance before shipping. Catches blank plates, missing focus rings, non-compositor motion, off-palette accents, dead motion, fabricated content. No LLM, no API key. CI-ready with --json and exit codes. Part of the reimagine-it Content-Derived Design suite.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Kayforkind/reimagine-it2092026년 10월 22일 업데이트

reimagine-it-extract

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Kayforkind/reimagine-it2092026년 10월 22일 업데이트

reimagine-it-generate

무료

Generate one Content-Derived Design direction from an HTML source, or let Auto choose the strongest direction. Use when the user says /reimagine-it generate, "redesign this page", "make it a landing page", "turn this into an infographic", names a token (all 17: webpage, infographic, svg, 3js, simulation, artistic, cinematic, dashboard, photography, landing, editorial, gradient, showcase, motion, glass, lookbook, particles), or wants a content-aware redesign instead of a mood board. CLI: npx reimagine-it --auto -i page.html -o out.html. Part of the reimagine-it Content-Derived Design suite.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Kayforkind/reimagine-it2092026년 10월 22일 업데이트

reimagine-it-infographic

무료

Content-derived infographic poster — reads the source file and builds a statistical poster from the facts already in it. Not a dashboard, not a CV, not an AntV template. Uses common-scale encodings (Cleveland–McGill floor), ISOTYPE unit counts (Neurath), custom data glyphs (Lupi/Fragapane), and a lossless data table. Palette, glyphs, and composition are derived from the source's own content. No pies, donuts, gauges, 3D charts, or fabricated KPIs. Part of the reimagine-it Content-Derived Design suite.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Kayforkind/reimagine-it2092026년 10월 22일 업데이트

reimagine-it-variations

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Kayforkind/reimagine-it2092026년 10월 22일 업데이트

Kayforkind의 스킬 모두 보기

이 스킬의 문제 신고