hps-y2k-chrome

name hps-y2k-chrome en_name Write a KPI Decision Brief like a CFO-Ready Analytics Lead zh_name 像能让 CFO 读懂的分析负责人一样写 KPI 决策简报 description OpenDesign's KPI decision brief: activation and retention drivers, what's working, and the one metric to move next. Built as a decision-grade data & finance deck for CRO, RevOps, leadership. en_description OpenDesign's KPI decision brief: activation and retention drivers, what's working, and the one metric to move next. Built as a decision-grade data & finance deck for CRO, RevOps, leadership. zh_description 像能让 CFO 读懂的分析负责人一样写 KPI 决策简报——一份可商业交付的数据财务 Deck，围绕真实主题、证据链与决策目标组织。 tags ["data-finance","product-analytics-deck","finance","kpi","metrics","decision-deck","commercial-slide-agent","hps-y2k-chrome"] triggers ["product-analytics-deck","data-finance","Write a KPI Decision Brief like a CFO-Ready Analytics Lead","像能让 CFO 读懂的分析负责人一样写 KPI 决策简报","kpi","finance","metrics","html deck","html slides"] od {"mode":"deck","surface":"web","upstream":"https://github.com/lewislulu/html-ppt-skill","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false},"speaker_notes":true,"animations":true,"example_prompt_i18n":{"zh-CN":"用千禧银铬把我的内容做成单文件 HTML 幻灯片。先确认主题、观众和页数，然后从种子 example.html 出发——完整保留它的银铬 token 表、磨砂玻璃卡、slide 骨架和键盘运行时，只替换幻灯片内容，使用真实内容，不要 lorem ipsum。"},"category":"data-finance","scenario":"finance","example_prompt":"Create \"Write a KPI Decision Brief like a CFO-Ready Analytics Lead\" as a decision-grade Data, KPI & finance deck in this template's own visual system. Subject: OpenDesign's KPI decision brief: activation and retention drivers, what's working, and the one metric to move next. Audience: CRO, RevOps, 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."} Y2K Chrome (hps-y2k-chrome) Single-theme deck plugin locked to the y2k-chrome theme from the upstream MIT-licensed lewislulu/html-ppt-skill (36 themes × 31 layouts × 27 animations — this plugin ships exactly one of those skins, fully baked into one self-contained seed: example.html ). Start from example.html . Replace content only. Never rewrite the design system or the runtime script. No colors or fonts outside this spec. Locked token sheet ( :root — do not add, remove, or recolor) :root { --bg : #dfe4ec ; --bg-soft : #eef1f6 ; --surface : rgba ( 255 , 255 , 255 ,. 72 ); --surface-2 : rgba ( 255 , 255 , 255 ,. 5 ); --border : rgba ( 120 , 135 , 170 ,. 32 ); --border-strong : rgba ( 80 , 100 , 140 ,. 55 ); --text-1 : #1a1f2e ; --text-2 : #4a536a ; --text-3 : #8590a6 ; --accent : #8a5cff ; --accent-2 : #3ccfd8 ; --accent-3 : #ff84c4 ; --good : #1fb98c ; --warn : #e8a13d ; --bad : #e0445a ; --grad : linear-gradient ( 135deg , #b8c4d8 0% , #f5f7fb 30% , #8a9ab8 55% , #e8ecf4 80% , #6b7a95 100% ); --grad-soft : linear-gradient ( 135deg , #c9e4ff , #f5d6ff 50% , #d6fffa ); --chrome-text : linear-gradient ( 180deg , #f8faff 0% , #9aa8c4 50% , #4a5670 100% ); --radius : 26px ; --radius-sm : 16px ; --radius-lg : 36px ; --shadow : 0 12px 30px rgba ( 70 , 90 , 130 ,. 22 ),inset 0 1px 0 rgba ( 255 , 255 , 255 ,. 9 ),inset 0 - 1px 0 rgba ( 80 , 100 , 140 ,. 2 ); --shadow-lg : 0 24px 60px rgba ( 70 , 90 , 130 ,. 35 ),inset 0 2px 0 rgba ( 255 , 255 , 255 ,. 95 ); --font-sans : 'Space Grotesk' , 'Inter' , 'Noto Sans SC' ,sans-serif; --font-display : 'Space Grotesk' , 'Inter' ,sans-serif; --font-mono : 'JetBrains Mono' ,SFMono-Regular,Menlo,monospace; --letter-tight :-. 03em ; --letter-normal :-. 01em ; --ease : cubic-bezier (. 4 , 0 ,. 2 , 1 ); } Fonts: Space Grotesk is both display and body type ( 'Noto Sans SC' fallback for CJK), JetBrains Mono for code/labels. Loaded via Google Fonts @import only — the sole permitted external resource. Signature devices (use these, nothing else) Silver-metal canvas — body carries the full-bleed 5-stop gradient linear-gradient(135deg,#c4cfe0 0%,#f0f3f8 25%,#aab8d0 50%,#f5f7fb 75%,#b8c4d8 100%) . Every slide is transparent over it. Never paint an opaque slide background. Chrome-clipped type — .h1 , .chrome-text , .stat-big clip --chrome-text (white→steel→gunmetal) via background-clip:text , plus filter:drop-shadow(0 2px 3px rgba(40,55,85,.38)) so the white top stop keeps letter definition over the light canvas. Display numerals and hero words are always chrome, never flat color. Frosted-glass cards — .card = --surface (72% white) + backdrop-filter:blur(16px) saturate(140%) + --shadow . The inset 0 1px 0 rgba(255,255,255,.9) top highlight is the signature — never drop it. Mega radius --radius:26px (lg surfaces 36px). Candy accents — purple --accent leads (kickers, progress bar, checks), aqua --accent-2 and pink --accent-3 support (orbs, chart bars, eyebrow tints). Accents are for small surfaces only; large fills use --grad / --grad-soft . Glossy orbs — .orb radial-gradient candy spheres with a white specular highlight, absolutely positioned, z-index:0 , decor only. Chrome sparkles — inline 4-point star SVGs ( .sparkle ) filled with the chrome gradient or candy accents. Chrome capsule pills — .pill = linear-gradient(180deg,#fff,#d4dcec) with --border stroke; .pill-accent tints with --accent . Forbidden: dark mode, neon-on-black, hard offset shadows, flat untextured H1 color, any hex value or font family not listed above. Page structure & runtime (keep verbatim from the seed) One self-contained HTML file: inline <style> + inline <script> , zero build, zero external JS. Charts are pure CSS / inline SVG — never Chart.js or mermaid. Icons are inline SVG. No external images. Every page is <section class="slide" data-title="…"> inside <div class="deck" id="deck"> — a horizontal scroll-snap strip, one 100vw × 100vh screen per slide, padding 72px 96px , no internal scrolling. Fixed chrome: .deck-header (deck name + y2k-chrome theme chip), .deck-footer (attribution + N / total counter), .progress-bar (accent fill). Keyboard runtime: ← → Space PageUp PageDown Home End navigate; #/N (1-based) hash deep-links with history.replaceState in try/catch (srcdoc-safe). The script dedupes the dual window/document capture-phase key listeners by Event identity and auto-focuses <body> so keys work without a click — these solve real iframe-host bugs, do not "simplify" them away. This variant is theme-locked: no T cycling. Speaker notes: one hidden <div class="notes">…</div> per slide. Layout masters (upstream 31-layout catalog) group layouts Openers & transitions cover toc section-divider Text-centric bullets two-column three-column big-quote Numbers & data stat-highlight kpi-grid table chart-bar chart-line chart-pie chart-radar Code & terminal code diff terminal Diagrams & flows flow-diagram arch-diagram process-steps mindmap Plans & comparisons timeline roadmap gantt comparison pros-cons todo-checklist Visuals image-hero image-grid Closers cta thanks Composition default: cover → toc → ( section-divider → 2–4 content pages) × N → cta / thanks . The seed demonstrates 11 masters: cover, toc, section-divider, two-column, kpi-grid, stat-highlight, chart-bar, process-steps, comparison, big-quote, thanks. Class vocabulary (replace content, not classes): typography .eyebrow .kicker .h1 .h2 .h3 .h4 .lede .dim .dim2 .mono .chrome-text .gradient-text ; layout .row .row.wrap .grid .g2 .g3 .g4 .center .mt-s/.mt-m/.mt-l ; components .card .card-soft .card-accent .pill .pill-accent .divider-accent .section-num .kpi .stat-big .bar-chart .steps .quote .check .orb .sparkle . Animations (upstream subset inlined in the seed): anim-rise-in , anim-fade-up , anim-stagger-list . Restraint rule: at most one hero animation plus one stagger per slide. Authoring checklist Copy example.html ; keep all <style> blocks and the <script> verbatim. Replace the 11 demo slides with the planned layout sequence; the script computes the N / total counter automatically. Real content, real numbers — no lorem ipsum, no placeholder images. Write 1–3 sentence speaker notes per slide in .notes . Verify: arrows + Space navigate, #/5 deep-links, every H1 reads as chrome over the metal canvas, no slide overflows vertically. Attribution Visual system, token vocabulary, layout taxonomy, and the y2k-chrome palette come from the upstream MIT-licensed lewislulu/html-ppt-skill (© lewis < sudolewis@gmail.com >). The LICENSE file ships alongside this plugin — keep it in place when redistributing.