| name | huashu-sparkline-arc |
| en_name | Write a Revenue-Driver Story like a Board-Level Finance Partner |
| zh_name | 像董事会级财务伙伴一样写收入驱动分析 |
| description | Open Design's revenue-driver narrative: what actually moves ARR, the leverage points, and the forecast. Built as a decision-grade data & finance deck for board, finance leadership.
|
| en_description | Open Design's revenue-driver narrative: what actually moves ARR, the leverage points, and the forecast. Built as a decision-grade data & finance deck for board, finance leadership.
|
| zh_description | 像董事会级财务伙伴一样写收入驱动分析——一份可商业交付的数据财务 Deck，围绕真实主题、证据链与决策目标组织。
|
| tags | ["data-finance","product-analytics-deck","finance","kpi","metrics","decision-deck","commercial-slide-agent","huashu-sparkline-arc"] |
| triggers | ["product-analytics-deck","data-finance","Write a Revenue-Driver Story like a Board-Level Finance Partner","像董事会级财务伙伴一样写收入驱动分析","kpi","finance","metrics","html deck","html slides"] |
| od | {"mode":"deck","surface":"web","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":false},"example_prompt_i18n":{"zh-CN":"用「叙事波形」模板把我的变革故事做成 Duarte 式 HTML 幻灯片：1920×1080 固定画布、每页一条横贯全屏的 SVG 贝塞尔波形线、品牌橙 #FF6B2C 只标转折点、灰化对照波形、stroke-dashoffset 逐段 reveal、Inter + Geist Mono 双字体。从 example.html 出发只换内容，不要重写设计。"},"category":"data-finance","scenario":"finance","example_prompt":"Create \"Write a Revenue-Driver Story like a Board-Level Finance Partner\" as a decision-grade Data, KPI & finance deck in this template's own visual system. Subject: Open Design's revenue-driver narrative: what actually moves ARR, the leverage points, and the forecast. Audience: board, finance leadership. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does every chart have a decision above it."} |
Narrative Sparkline · 叙事波形
Produce a single-file, Duarte-style narrative deck. You are a story
cartographer working in HTML: every page is built on one oscillating waveform
that travels between "what is" and "what could be", and orange appears only
where the story turns. The visual system, canvas contract, and navigation
runtime are locked by example.html. Start from example.html, replace
content only — do not rewrite the design or the script. Do not introduce any
color or font outside this spec.
Generated from the Sparkline叙事波形 / Narrative Sparkline (Duarte式) spec
(中性派, 还原91%) in references/design-styles.md of
huashu-design by 花叔
(alchaincyf), MIT licensed. Lineage: Nancy Duarte《Resonate》sparkline
structure, Al Gore An Inconvenient Truth, Duarte Inc. data storytelling.
Hard spec (locked — violating any line is a regression)
Canvas & runtime
- One
<div id="stage"> fixed at 1920 × 1080 px, centered with
position: fixed; top: 50%; left: 50%; a fit() function applies
translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080)) on
load and resize. All inner layout in px — the scaler owns responsiveness.
- Each page is one
<section class="slide"> inside #stage with a
data-screen-label="01 封面"-style label; exactly one slide carries
.active; dark pages add .dark.
- Navigation (keep the script verbatim):
←/↑/PageUp previous,
→/↓/Space/PageDown next, Home/End first/last; #/N hash
routing (1-indexed) read on load + hashchange, written via
history.replaceState; click left third = back, rest = forward; fixed
counter pill bottom-right, key-hint bottom-left. No external JS, no build
step — the file must open inside a sandboxed iframe via file://.
Design tokens (:root — keep the names, re-theme values only)
