SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillslovstudio-professional-infographic

lovstudio-professional-infographic

Testing & quality

View repository

Updated 10-16 00:01

About this skill

Professional Infographic

Build an evidence-led consulting Exhibit, not a decorated summary.

Requires Python 3.8+. PNG rendering and browser audit require Playwright for Python and Chromium. Brand assets and output paths remain user-configurable.

source
→ decision and evidence graph
→ title mode + governing recommendation
→ semantic Exhibit template
→ visible evidence + direct annotation
→ recommendation after evidence
→ code-rendered master
→ technical + semantic gate
→ human visual review

Default to a 16:9 master. Treat 4:5, 1:1, and A4 as separately recomposed derivatives.

Non-negotiable outcome

Deliver:

  • one display title that makes the subject, purpose, or reader job clear;
  • one dominant visual relationship that supports a governing conclusion;
  • one evidence-backed recommendation after the main visual;
  • visible values, units, periods, definitions, caveats, and sources;
  • semantic color, position, length, shape, connection, order, or containment;
  • direct annotations at decision-changing evidence;
  • editable poster.html and high-resolution poster.png;
  • brand Logo at upper-right or lower-right;
  • attribution such as 本信息图由 LovStudio 的「专业信息图」Skill 生成;
  • brief.md, source.md, and audit.json.

For a standalone executive Exhibit with known context, action title mode may state the conclusion at the top and omit the tail recommendation. Reject generic card walls, prose tables, unsupported scores, duplicated conclusions, oversized titles, decorative AI imagery, and any output that merely passes a technical audit.

Required references

Read these before authoring:

  1. references/exhibit-benchmark.md
  2. references/consulting-standard.md
  3. references/visual-grammar.md
  4. references/spec-schema.md

Read references/hybrid-rendering.md only if a custom text-free illustration may materially improve comprehension. Read references/user-config.md when brand or output configuration is unresolved.

Workflow

1. Preserve and scope the source

If the user says “以上内容”, “当前结果”, or similar, use the current conversation result. Do not ask them to paste it again.

Save exact input as source.md. Identify:

  • audience and decision/use moment;
  • governing conclusion;
  • evidence type: qualitative, quantitative, or mixed;
  • material gaps that prevent a defensible chart;
  • what must be omitted to keep one argument.

Split genuinely separate stories into separate Exhibits.

2. Build brief.md

Create an evidence graph before visual code:

ID Claim / criterion Exact evidence Encoding Annotation
C1 S1 position / length / color / connection

For every visible mark, record:

  • exact source and location;
  • unit, denominator, and period;
  • fact, estimate, assumption, or interpretation;
  • caveat.

Do not invent proxy values. Label qualitative positions and judgments.

3. Choose title mode and place the recommendation

Default to topic mode for public-facing infographics:

  1. Header: explain the subject, purpose, or comparison job.
  2. Main visual: present the evidence relationship.
  3. Tail: state the recommendation, boundary, or next action.

Use action mode only when the audience already knows the subject and expects an executive Exhibit. Then the title may state subject + directional finding + implication, and no separate recommendation band should repeat it.

In either mode, avoid empty labels such as “趋势分析” without a reader job. Keep the recommendation linked to visible evidence and source IDs.

4. Select one semantic template

Use references/visual-grammar.md.

Relationship Template
Alternatives × consistent criteria comparison-matrix
Sequential constraints decision-tree
Result → drivers → subdrivers driver-tree
Two independent axes positioning-map
Additive value movement waterfall
Phases, milestones, gates roadmap
Actors, capabilities, flows, outcomes operating-model
Repeated comparison on one scale small-multiples

Use a single user-choice prompt only when two materially different templates remain plausible. Pre-fill the recommendation, two alternatives, master aspect, and brand. Do not re-ask explicit choices.

5. Resolve brand configuration

Resolution order:

  1. explicit --brand-profile;
  2. LOVSTUDIO_PROFESSIONAL_INFOGRAPHIC_BRAND_PROFILE;
  3. LOVSTUDIO_SKILLS_BRAND_PROFILE;
  4. brand.profile in the shared LovStudio profile;
  5. packaged public LovStudio default.

Initialize only when none is usable:

python3 "$SKILL_DIR/scripts/infographic_cli.py" init-brand \
  --name "Brand Name" \
  --logo "/absolute/path/to/logo.svg" \
  --copyright "Generated by Brand's Professional Infographic Skill"

Never hard-code a private workspace path into the public Skill.

6. Scaffold the selected Exhibit

python3 "$SKILL_DIR/scripts/infographic_cli.py" scaffold \
  --title "<subject, purpose, or comparison job>" \
  --title-mode topic \
  --recommendation "<evidence-backed advice>" \
  --source "<source path>" \
  --template comparison-matrix \
  --mode qualitative \
  --aspect 16:9 \
  --output-dir "<project directory>" \
  --brand-profile "<brand.json>"

The template is a semantic skeleton, not finished design. Replace every placeholder. Preserve data-* contracts so the audit can inspect the visual argument.

7. Author the Exhibit

Use HTML/CSS/SVG. Apply these rules:

  • keep header at 7%–18% of canvas area;
  • give the main visual 58%–82%;
  • use alignment and rules before containers;
  • attach evidence with data-source-ref;
  • declare visual variables with data-encoding;
  • mark plotted evidence, annotations, and the decision;
  • keep the recommendation after the visual and before the source footer;
  • map the recommendation to evidence with data-source-ref;
  • use a shared scale for comparisons;
  • label axes at both ends;
  • label branches and outcomes;
  • put units beside values;
  • make color encode one meaning;
  • keep source, caveats, brand, and attribution readable but subordinate.

Do not copy the scaffold text or geometry blindly. The source relationship determines exact composition.

8. Use image generation only as support

Use the hybrid route only for a physical scene, object, or metaphor that cannot be communicated efficiently with geometry. The generated asset must contain no text, numbers, charts, logos, watermarks, or pseudo-UI. Keep all facts and labels in code.

9. Render and run the machine gate

python3 "$SKILL_DIR/scripts/infographic_cli.py" render \
  --input "<project>/poster.html" \
  --output "<project>/poster.png" \
  --scale 2

python3 "$SKILL_DIR/scripts/infographic_cli.py" audit \
  --input "<project>/poster.html" \
  --image "<project>/poster.png" \
  --report "<project>/audit.json"

The audit checks:

  • template-specific semantic contract;
  • title mode, recommendation presence, placement, evidence linkage, and duplication;
  • evidence linkage and unit requirements;
  • header, visual, footer, and generic-card area;
  • data points, annotations, decision markers, and encoding tokens;
  • low-occupancy blocks;
  • copy, overflow, contrast, images, logo, and PNG dimensions;
  • a 100-point machine proxy with an 85 threshold and critical-dimension floors.

The proxy is not proof of professional quality.

10. Inspect the rendered image

Open poster.png at original detail and at thumbnail size. Review:

  1. Can the reader state what the infographic is for after five seconds?
  2. Does the reading path move from topic to evidence to recommendation?
  3. Is the recommendation visible at the tail and supported by the visual?
  4. Does each color, position, length, shape, or connection have a named meaning?
  5. Are decisive differences directly annotated?
  6. Is there any large empty container or prose disguised as a chart?
  7. Are units, axes, branches, zones, source, and caveats explicit?
  8. Does it look commissioned rather than template-generated?

Perform deliberate revisions until both the strict gate and visual review pass. Do not report success because audit.json contains zero technical errors.

Record the exact reviewed image and concrete review evidence, then run the release gate:

python3 "$SKILL_DIR/scripts/infographic_cli.py" audit \
  --input "<project>/poster.html" \
  --image "<project>/poster.png" \
  --report "<project>/audit.json" \
  --human-review passed \
  --review-note "<what was verified at full size and thumbnail size>" \
  --strict

passed without both --image and a specific review note is invalid.

11. Deliver

Return clickable paths to:

  • poster.png
  • poster.html
  • brief.md
  • audit.json
  • source.md

State the selected title mode, template, evidence mode, aspect, proxy score, and human-review result. Disclose assumptions and omitted material.

CLI

python3 "$SKILL_DIR/scripts/infographic_cli.py" --help
python3 "$SKILL_DIR/scripts/infographic_cli.py" init-brand --help
python3 "$SKILL_DIR/scripts/infographic_cli.py" scaffold --help
python3 "$SKILL_DIR/scripts/infographic_cli.py" render --help
python3 "$SKILL_DIR/scripts/infographic_cli.py" audit --help

Rendering and browser audit require:

python3 -m pip install "playwright>=1.45,<2"
python3 -m playwright install chromium