Community图像github.com

dailyoozoo/link-to-infographic

链接转深度研究、2000px 矢量高清信息图与推特 (X) 爆款文案全自动生成工作流。支持网页/推特文章穿透研读、4 维背景拓研、双重事实核验门禁、真实 SVG 手绘架构流、2x Retina 无损渲染与全套推特发文文案包。

link-to-infographic 是什么?

link-to-infographic is a Claude Code agent skill that 链接转深度研究、2000px 矢量高清信息图与推特 (X) 爆款文案全自动生成工作流。支持网页/推特文章穿透研读、4 维背景拓研、双重事实核验门禁、真实 SVG 手绘架构流、2x Retina 无损渲染与全套推特发文文案包。.

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/dailyoozoo/link-to-infographic/tree/HEAD

Installed? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Link-to-Infographic & X-Viral Radar: Deep Research, Ultra-HD Vector Infographics & Twitter Blockbuster Workflow

Positioning: A professional-grade Agent delivery workflow integrating "Article/Tweet Link Deep Decryption", "2000px Retina Vector Infographics", and a "Full Suit of Twitter (X) Blockbuster Copywriting".


Core Routing Overview (Dual-Track Architecture)

flowchart TD
    Input["User Input (Link URL or Token Name/Symbol)"] --> Check{"Determine Input Type"}
    
    Check -->|Article / Tweet Post URL| ModeA["Mode A: Link Deep Research, Infographic & Twitter Full Case"]
    ModeA --> A1["Stage 1: Penetrate Fetch Body & Thread (Jina / FxTwitter / curl)"]
    A1 --> A2["Stage 2: Web-Wide 4-Dimension Deep Research (Primary Sources + Benchmarks)"]
    A2 --> Gate["⚠️ Stage 2.5: Full-Pipeline Double Verification Gate (Timeliness + Metric Verification)"]

    Check -->|Token Name / Symbol (e.g., Monad, $BERA)| ModeB["Mode B: Token-Specific Deep Research & Investment Poster"]
    ModeB --> B1["Step 1: 5-Dimensional Data Penetration Retrieval (Background/Financing/TGE/Valuation/Economics)"]
    B1 --> B2["Step 2: Organize Three-Scenario Valuation Benchmark Model (Bear / Base / Bull)"]
    B2 --> Gate

    Gate --> Out1["Stage 3: Produce Deep Technical Report (<name>-report.md)"]
    Gate --> Out2["Stage 4: Build 1000px Light Magazine Template (<name>-infographic.html)"]
    Out2 --> Out3["Stage 5: Render 2000px Ultra-Clear 2x Retina PNG (render.js)"]
    Gate --> Out4["Stage 6: Generate Twitter Blockbuster Copy Pack (tweet-<name>.md: Single + Thread + English Version)"]

Stage 1: Auto-Fetch Details (Article & Tweet Ingestion)

Use penetration fetch channels based on link type (see article-fetcher.md):

Link TypeRecommended Fetch ChannelDegradation Fallback Channel
Regular Web Page/Blog (Tech news, news, Substack)Jina Reader: https://r.jina.ai/<URL>curl.exe -sL direct read
Tweet/X Post (x.com/..., twitter.com/...)Jina Reader / FxTwitter API (api.fxtwitter.com/...)Extract Status ID for web-wide search or keyword search
WeChat Official Account Article (mp.weixin.qq.com/...)Jina Reader proxy fetchSearch for original title quote

Stage 2: Search Core Materials & 4-Dimension Deep Research

A single article may have biased perspectives or incomplete data. A secondary deep research must be performed (see deep-research.md):

  1. Primary Sources: Official GitHub Releases, official blog announcements, arXiv papers or author pinned statements;
  2. Authoritative Industry Data (Benchmark & Industry Stats): Real-world benchmark comparisons, competitive product consumption comparisons, third-party authoritative evaluations;
  3. Supplementary Background & Timeline (Timeline & Context): Evolution lineage and historical precedents;
  4. Diverse Perspectives & Failure Reflections (Counter-Arguments / Debates): Potential risks, abnormal dead-ends, or backfire cases.

⚠️ Core Gate: Pre-Flight Full-Pipeline Double Verification Gate

Before injecting any data into the template and commencing final rendering, the following verifications must be unconditionally performed (see preflight-verification-gate.md):

  1. Primary Source Penetration: Confirm whether it is a full official release, gray-scale beta test, or pure paper stage;
  2. Cross-Verification of Key Quantitative Metrics: Core numbers (e.g., multiples, token counts, time consumption) must have at least 2 independent sources for cross-verification. Never blindly copy exaggerated self-media claims;
  3. Timeliness Reversal Check: Search for dynamics in the last 24 hours to confirm whether there is an official correction (Errata) or fact reversal for this event;
  4. Token Report Must Check Exchange Listing & Exact Confirmed Dates: If the official confirmation date has been announced, strictly prohibit vague expressions like "Q3/Q4"; strictly calculate Total Supply × Unit Price = FDV.

Stage 3: Deliverables Production Matrix (Standard Deliverables)

Each run must deliver a complete set of 5 major companion files:

1. Deep Technical Report: <topic>-report.md

  • Covers Executive Summary, multi-dimensional deep analysis, full quantitative test matrix, micro failure mechanism breakdown, and engineering implementation decision tree.

2. Light Magazine Infographic Source Code: <topic>-infographic.html

  • Canvas Specs: Width strictly set to 1000px, warm light background (#f4f6f9 / #ffffff), pure white cards, delicate hairline borders (#e2e8f0), light shadow (see infographic-design-system.md);
  • Real Data Visualization:
    • Top 4 core metric cards (large font 32px JetBrains Mono);
    • Core benchmark data uses CSS gradient progress bars to display real proportions (.chart-bar-track / .chart-bar-fill);
    • Core failure/contrast cases use side-by-side code comparison boxes (green correct vs red false data).
  • Hand-Drawn Real SVG Architecture Data Flow Diagram:
    • ⚠️ Core Pitfall Rule (see svg-diagramming-rules.md):
      • Strictly forbid using any HTML tags inside SVG <text> (e.g., <code>, <br>, <b>), otherwise it will crash the browser's SVG parsing tree, causing the right-side chart to be completely blank!
      • Strictly forbid writing CSS semicolons in XML attributes (must use standard fill="#e11d48" font-weight="700");
      • <defs> arrow markers must be placed at the very top of the <svg> root node.
  • Minimal Closure (No Watermark): At the very bottom, remove any redundant watermarks and lengthy disclaimers. Only retain triple metadata tags and a minimal footer bar.

3. 2x Retina Retinal Lossless Rendering: render.js ➔ <topic>-infographic.png

  • Dispatch resources/render.js to launch headless Edge/Chrome;
  • Set width: 1100, height: 2600, deviceScaleFactor: 2;
  • Use waitUntil: 'domcontentloaded' with a brief stabilization wait to ensure web fonts and SVG rendering are complete;
  • Capture the #infographic container and export a precise width 2000px ultra-clear lossless PNG.

4. Twitter (X) Blockbuster Copy Pack: tweet-<topic>.md

  • Strictly follow twitter-viral-formula.md to provide 3 sets of schemes:
    • Scheme A: Single High-Density Blockbuster Long Tweet (800~1,500 characters, attach 2000px infographic poster directly, very high bookmark & retweet rate);
    • Scheme B: 1/8 Deep Deconstruction Thread (high-interaction multi-tweet version with hard evidence in each, excellent algorithmic weight);
    • Scheme C: English International Rapid Tweet (targeted at Global tech & open-source communities).

5. System Change Log: CHANGELOG.md

  • Record at the top the source links, core technical evolution points, and a complete list of changed files for each modification.

相关技能