원클릭으로 Manus에서 모든 스킬 실행

html-paper-figure-style

스타1

포크1

업데이트2026년 7월 9일 06:33

Academic Figure genre (white + muted categorical + captions). Use when: 论文配图, 实证结果, figure, benchmark plot, ablation, multi-panel chart, 学术图表, NeurIPS/arXiv figure. Trigger: 论文配图 / 实证结果 / figure / benchmark plot / ablation / multi-panel chart / 学术图表 / academic figure. Inherits typography-system. Single-surface scientific figure.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

MARUCIE

MARUCIE/claude-html-style-router

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

name: html-paper-figure-style description: "Use for an ACADEMIC multi-panel FIGURE page: white sheet, subpanels labelled (a)-(e) each with a small chart (line / grouped bars / donut / scatter), thin hairline axes, muted categorical palette, italic Fig. captions, tabular-nums. Trigger: 论文配图/实证结果/figure/benchmark plot/ablation/multi-panel chart/学术图表/NeurIPS-arXiv style. NOT for marketing visuals. Routed by html-style-router." combo-tags: [html-rendering]

HTML Genre — Academic Figure (学术图版)

Typography base (inherited): composes ON TOP of typography-system; inline tokens/typography.css FIRST, then layer color/accent/brand-font ONLY. Reference template: examples/genre/paper-figure.html (all 3 gates green).

Pixel-sampled from an ML-paper figure composite. The canonical scientific multi-panel look — restrained, chart-dense, caption-driven. DNA: the source reference set (pixel-sampled from real designs).

Layout frame + tokens (inject FIRST)

:root{ --pf-page-max:1000px; --pf-page-gutter-total:clamp(32px,6vw,80px);
  --pf-paper:#FEFEFF; --pf-ink:#1A1A2E; --pf-axis:#9B93A8; --pf-cap:#46465A;
  /* the canonical ML-paper categorical set (sampled): */
  --pf-c1:#8265CF; --pf-c2:#4B8BB8; --pf-c3:#CF7B71; --pf-c4:#E0B84A; --pf-c5:#423F75;
  --pf-hair:#E3DADE; }
.pf-sheet{ box-sizing:border-box; background:var(--pf-paper);
  width:min(var(--pf-page-max),calc(100% - var(--pf-page-gutter-total)));
  margin-inline:auto; }

Structure: .pf-head (mono kicker + bold title, 2px underline) → .pf-grid (2-col) of .pf-panel, each .pl ((a) mono label + name) + .pf-fig (chart: inline <svg> line/scatter, or .pf-bars CSS bars, or .pf-donut conic-gradient) + .pf-legend (swatch chips via --c) + .pf-cap (italic Fig. a. caption, <b> un-italics the label).

Gotchas

Charts are inline SVG or pure CSS — line/scatter as <svg><polyline>, bars as flex <i height:%>, donut as conic-gradient + radial mask. No raster, so the figure is self-contained and crisp.
The categorical palette is FIXED and muted (--pf-c1..c5, the sampled purple/blue/coral/gold/violet). Don't substitute saturated brand hues — the academic read depends on the desaturated set. Gold #F4D57E is too light for text/thin lines; it's #E0B84A for marks and pairs with a dark legend label.
Captions carry the meaning, italic, AA on white (--pf-cap #46465A ~7:1). Fig. x. label is <b> (un-italic, bold) inside the italic caption.
tabular-nums everywhere (axis ticks, legend percents) so columns align — the foundation already sets it for tables; add to chart legends.
Hairline axes (1.5px ink for the L-frame, --pf-hair for panel borders) — never heavy chrome; the data is the ink.

Verify

python3 scripts/build-genre-templates.py
python3 skills/typography-system/scripts/validate_typography.py --render examples/genre/paper-figure.html
python3 scripts/html-inline-assets.py check examples/genre/paper-figure.html

Your Name | your@email.com

이 저장소의 다른 Skills

같은 저장소

html-archive-brutalist-style

MARUCIE/claude-html-style-router

Swiss Archival Brutalist genre (cream + serif + mono, compact info density). Use when: 档案, 复盘, dossier, archive note, condition map, positioning, 紧凑信息密度, Swiss brutalist, takeaway grid. Trigger: 档案 / 复盘 / dossier / archive note / condition map / positioning / Swiss brutalist / takeaway grid. Inherits typography-system. Single-surface note; NOT a warm long-form doc.

2026-07-091

html-bloomberg-style

MARUCIE/claude-html-style-router

Bloomberg Terminal genre — data-dense, quantitative. Use when: financial report, earnings, valuation, portfolio, P&L, cashflow, dashboard, KPI report, metrics, performance/market/risk data, investment/trading memo, allocation, returns, yield. Trigger: financial report / earnings / valuation / portfolio / P&L / dashboard / KPI / metrics / data analysis / market data / investment memo / trading / 财报 / 估值 / 看板 / 数据. Inherits typography-system. NOT for: prose reports (economist/document).

2026-07-091

html-blueprint-style

MARUCIE/claude-html-style-router

Engineering Blueprint genre (graph-paper + mono + gauges). Use when: 技术图解, 拆解, 原理, blueprint, schematic, spec sheet, 参数对比, 工程海报, MOD panels. Trigger: 技术图解 / 拆解 / 原理 / blueprint / schematic / spec sheet / 参数对比 / 工程海报. Inherits typography-system. Single-surface technical poster.

2026-07-091

html-document-style

MARUCIE/claude-html-style-router

Claude Warm Academic Humanism genre — the safe warm default. Use when: guide, manual, handbook, tutorial, proposal, kickoff, whitepaper, thought-leadership, memo, announcement, changelog, or postmortem. Trigger: guide / manual / handbook / how-to / tutorial / documentation / reference / spec / onboarding / proposal / kickoff / whitepaper / vision / manifesto / memo / newsletter / changelog / release notes / postmortem / 指南 / 手册 / 文档 / 提案 / 白皮书 / 说明. Inherits typography-system. NOT for: data dashboards (bloomberg), strategy decks (mckinsey), research briefs (economist).

2026-07-091

html-economist-style

MARUCIE/claude-html-style-router

The Economist Editorial genre — measured analytical register. Use when: research report, analysis, findings, study, survey, market/competitive landscape, benchmark, due diligence, briefing, executive summary, intelligence brief, policy/regulatory/compliance/risk analysis. Trigger: research / report / analysis / findings / study / market analysis / competitive / benchmark / briefing / executive summary / digest / policy / regulatory / audit / 研究 / 分析 / 简报 / 对标 / 竞品. Inherits typography-system. NOT for: warm guides (document), board decks (mckinsey).

2026-07-091

html-hermes-style

MARUCIE/claude-html-style-router

Hermes retro-TUI / mythological genre — character-driven dev storytelling. Use when: AI agent biography/profile, CLI tool story, fork-vs-upstream history, dev-blog mythology, character-driven postmortem. Trigger: agent introduction / agent profile / CLI tool story / fork vs upstream / dev-blog history / project mythology / 智能体传记 / CLI故事 / retro terminal. Inherits typography-system. NOT for: business reports or dashboards.

2026-07-091

name	html-paper-figure-style
description	Academic Figure genre (white + muted categorical + captions). Use when: 论文配图, 实证结果, figure, benchmark plot, ablation, multi-panel chart, 学术图表, NeurIPS/arXiv figure. Trigger: 论文配图 / 实证结果 / figure / benchmark plot / ablation / multi-panel chart / 学术图表 / academic figure. Inherits typography-system. Single-surface scientific figure.

name: html-paper-figure-style description: "Use for an ACADEMIC multi-panel FIGURE page: white sheet, subpanels labelled (a)-(e) each with a small chart (line / grouped bars / donut / scatter), thin hairline axes, muted categorical palette, italic Fig. captions, tabular-nums. Trigger: 论文配图/实证结果/figure/benchmark plot/ablation/multi-panel chart/学术图表/NeurIPS-arXiv style. NOT for marketing visuals. Routed by html-style-router." combo-tags: [html-rendering]

HTML Genre — Academic Figure (学术图版)

Typography base (inherited): composes ON TOP of typography-system; inline tokens/typography.css FIRST, then layer color/accent/brand-font ONLY. Reference template: examples/genre/paper-figure.html (all 3 gates green).

Layout frame + tokens (inject FIRST)

:root{ --pf-page-max:1000px; --pf-page-gutter-total:clamp(32px,6vw,80px);
  --pf-paper:#FEFEFF; --pf-ink:#1A1A2E; --pf-axis:#9B93A8; --pf-cap:#46465A;
  /* the canonical ML-paper categorical set (sampled): */
  --pf-c1:#8265CF; --pf-c2:#4B8BB8; --pf-c3:#CF7B71; --pf-c4:#E0B84A; --pf-c5:#423F75;
  --pf-hair:#E3DADE; }
.pf-sheet{ box-sizing:border-box; background:var(--pf-paper);
  width:min(var(--pf-page-max),calc(100% - var(--pf-page-gutter-total)));
  margin-inline:auto; }

Gotchas

Charts are inline SVG or pure CSS — line/scatter as <svg><polyline>, bars as flex <i height:%>, donut as conic-gradient + radial mask. No raster, so the figure is self-contained and crisp.
The categorical palette is FIXED and muted (--pf-c1..c5, the sampled purple/blue/coral/gold/violet). Don't substitute saturated brand hues — the academic read depends on the desaturated set. Gold #F4D57E is too light for text/thin lines; it's #E0B84A for marks and pairs with a dark legend label.
Captions carry the meaning, italic, AA on white (--pf-cap #46465A ~7:1). Fig. x. label is <b> (un-italic, bold) inside the italic caption.
tabular-nums everywhere (axis ticks, legend percents) so columns align — the foundation already sets it for tables; add to chart legends.
Hairline axes (1.5px ink for the L-frame, --pf-hair for panel borders) — never heavy chrome; the data is the ink.

Verify

python3 scripts/build-genre-templates.py
python3 skills/typography-system/scripts/validate_typography.py --render examples/genre/paper-figure.html
python3 scripts/html-inline-assets.py check examples/genre/paper-figure.html

Your Name | your@email.com