| name | huashu-pentagram-grid |
| en_name | Build a Positioning & Messaging System like a Brand Strategist |
| zh_name | 像品牌策略师一样搭建定位与信息体系 |
| description | OpenDesign's positioning & messaging system: the one-line promise, the pillars, and the proof — the source of truth for all copy. Built as a decision-grade marketing & GTM deck for brand & marketing team.
|
| en_description | OpenDesign's positioning & messaging system: the one-line promise, the pillars, and the proof — the source of truth for all copy. Built as a decision-grade marketing & GTM deck for brand & marketing team.
|
| zh_description | 像品牌策略师一样搭建定位与信息体系——一份可商业交付的市场增长 Deck，围绕真实主题、证据链与决策目标组织。
|
| tags | ["marketing-gtm","annual-marketing-plan","marketing","launch","campaign","pipeline","decision-deck","commercial-slide-agent","huashu-pentagram-grid"] |
| triggers | ["annual-marketing-plan","marketing-gtm","Build a Positioning & Messaging System like a Brand Strategist","像品牌策略师一样搭建定位与信息体系","launch","campaign","pipeline","html deck","html slides"] |
| od | {"mode":"deck","surface":"web","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":false},"example_prompt_i18n":{"zh-CN":"用「信息建筑·红」模板把我的数据故事做成瑞士网格 HTML 幻灯片：1920×1080 固定画布、上下 64px 黑色信息条、Helvetica Neue 强层级、唯一红色 #E63946、巨型 900 字重数字锚点、红/黑/灰三色对比条形图。从 example.html 出发只换内容，不要重写设计。"},"category":"marketing-gtm","scenario":"marketing","example_prompt":"Create \"Build a Positioning & Messaging System like a Brand Strategist\" as a decision-grade Marketing & GTM deck in this template's own visual system. Subject: OpenDesign's positioning & messaging system: the one-line promise, the pillars, and the proof — the source of truth for all copy. Audience: brand & marketing team. 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: can the plan connect creative choices to measurable growth."} |
Pentagram Info-Architecture · 信息建筑·红
Produce a single-file, Swiss-grid data deck. You are an information
architect working in HTML: every page is a measured grid, every number has a
coordinate, and red appears exactly where the eye must land. 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.
Adapted from the ppt-pentagram showcase of
huashu-design by 花叔
(alchaincyf), MIT licensed. The upstream file is a single data page; this
plugin extends it into a full multi-section deck while preserving its DNA.
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)
