跳到正文
cccskills
免费在 GitHub 公开

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.

中文简介正在准备中。当前显示原文说明。

实测评分 未实测

查看安装方法

包含的文件(1)

  • SKILL.md4.3 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

/reimagine-it infographic

Parent: ../SKILL.md — the full Content-Derived Design engine. Research pack: ../references/research/infographic-craft.md — 15-source infographic method (Cleveland–McGill, Tufte, Bertin, ISOTYPE, Minard/Snow, Cairo, Lupi, FT Visual Vocabulary, USWDS, WCAG charts, InfoAlign layouts). Domain pack: ../references/domains/infographic.md — the infographic domain non-negotiables.

Builds a statistical poster of facts already in the source — not an ops dashboard, not a CV, not an AntV template clone.

Hard non-negotiables

  1. Cleveland–McGill perceptual ranking. Position along a common scale > length > angle > area > volume > color saturation. Encode the most important comparisons as positions, not pies.
  2. ISOTYPE unit counts when the data is discrete countable things (Neurath: one pictogram = N units, repeated, not scaled).
  3. Custom glyphs from the source. Lupi/Fragapane pattern — draw a visual alphabet from the data itself (leaves, braids, snakes, whatever the content demands), not generic bar/pie/donut.
  4. Lossless data table. Every chart has a companion table; the infographic is a supplement to the data, not a replacement.
  5. No pies, donuts, gauges, or 3D charts. Pie charts rank last in Cleveland–McGill; donuts are pies with the center punched out (worse); 3D distorts perception.
  6. No fabricated KPIs. Every number on the poster comes from the source, not extrapolated or invented.

Structure router

Before drawing, sniff the source and lock a structure:

StructureWhenInfoAlign scenery
listUnordered peersgrid, star
sequenceSteps / dated beatsportrait, landscape
hierarchyTree / nestingportrait
compareTwo+ groupsportrait-grid
valuesMagnitudesportrait-grid
relationNodes + edges the source namesspiral

Do not default to gold Texas (sequence+compare on portrait-grid). Derive from THIS source.

Procedure

  1. Load ../references/research/infographic-craft.md and ../references/domains/infographic.md.
  2. Extract anchors from the source (3–5 concrete nouns, dates, numbers).
  3. Route the structure (list/sequence/hierarchy/compare/values/relation).
  4. Pick InfoAlign scenery (grid/star/portrait/landscape/portrait-grid/spiral).
  5. Derive palette from source content (≤ 5 colors).
  6. Build a custom visual alphabet from one datapoint.
  7. Encode comparisons using common-scale positions (not pies).
  8. Include a lossless data table below the poster.
  9. Verify: every number traceable to source, no fabricated KPIs, no AntV template chrome.

Must not

  • Clone gold Texas infographic's scenery or poster chrome onto a different source
  • Use a pie chart, donut, gauge, or 3D chart
  • Invent statistics the source does not contain
  • Use AntV/Looker/Datawrapper templates
  • Skip the structure router and default to portrait-grid
  • Ship without a lossless data table

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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-it2112026年10月22日 更新

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-it2112026年10月22日 更新

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-it2112026年10月22日 更新

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-it2112026年10月22日 更新

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-it2112026年10月22日 更新

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-it2112026年10月22日 更新

查看 Kayforkind 的全部技能

报告此技能的问题