huashu-pentagram-grid

用途

huashu-pentagram-grid 是 OpenDesign 定位与信息传达系统的一部分，用于制作单文件、瑞士网格风格的数据演示文稿。它面向需要在 HTML 中构建信息建筑（information architecture）的场景：每一页都是经过测量的网格，每个数字都有坐标，红色精确出现在视线必须落下的位置。该技能改编自花叔（alchaincyf）huashu-design 的 ppt-pentagram 展示（MIT 许可），上游文件是单页数据页，本插件将其扩展为完整的多章节 deck，同时保留其视觉 DNA。

主要能力

• 锁定视觉系统：画布、运行时和导航由 example.html 锁定，用户只需替换内容，不重写设计或脚本。
• 固定画布与缩放：一个 <div id="stage"> 固定在 1920 × 1080 px，居中定位；fit() 函数在加载和调整大小时应用 translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080))。所有内部布局使用 px，缩放器负责响应式。
• 页面结构：每个页面是 #stage 内的一个 <section class="slide">，带有 data-screen-label="01 封面" 风格的标签；恰好一个 slide 带有 .active；深色页面添加 .dark。
• 导航运行时：←/↑/PageUp 上一页，→/↓/Space/PageDown 下一页，Home/End 首页/末页；#/N 哈希路由（1 起始）在加载和 hashchange 时读取，通过 history.replaceState 写入；点击左侧三分之一后退，其余前进；右下角固定计数器胶囊，左下角按键提示。无外部 JS，无构建步骤，文件必须能通过 file:// 在沙盒 iframe 中打开。
• 设计令牌：:root 中定义令牌名称，仅可重新主题化值。包括 --paper #FFFFFF（浅色页面背景）、--night #111111（深色页面 + 装饰条）、--ink #111111（浅色主文本）、--night-ink #FFFFFF（深色主文本）、--accent #E63946（唯一红色，唯一强调色）、--grid #E8E8E8（细线/列线）、--track #F5F5F5（条形图轨道）、--bar-base #E0E0E0（失败/基线条）、--muted #999999（次要标签）、--muted-2 #666666（浅色正文）、--faint #BBBBBB（三级说明）、--night-line #333333（深色页面细线）、--night-mut #888888（深色次要文本）、--sans 字体栈（唯一字族）。零外部依赖：无 Google Fonts、无 @import、无 CDN。一种字体栈，一种强调色。
• 标志性视觉装置：每个浅色页面顶部和底部 64px 黑色装饰条；网格细线（绝对定位的 1px 垂直线和水平线，不透明度 0.05 黑/0.08 白）；巨型数字锚点（每张主页面一个 180–260px、weight-900、负字距的数字，小数点、斜杠或单位字形为红色）；红/黑/灰条形图（.bar-row = 右对齐 90px 标签 + 轨道 + 填充，值打印在内部，页面主题始终是红色条）；摘要条（border-top: 1px solid var(--grid) 的 .summary-items 行）；红色描边徽章（.open-badge，2px 红边框，红色大写 11px 文本，可选内联 SVG 点字形，方角）。
• 布局枚举：封面、目录、大数字、数据剧场、分隔页、双栏、时间线、引言、统计网格、结尾。每个 deck 使用 5 种以上布局，避免单一布局。
• 排版与尺度：标题 64–120px weight 900，字距 −2 到 −5px；主数字 180–260px weight 900；正文 15–18px，--muted-2，行高 1.7，强调 span 用 --ink 700；标签 11–13px，weight 700，letter-spacing 2–3px，大写。中文文案使用「」引号和全角标点；红色仅应用于标题内的单个标点字形（。 ， /），绝不整段标题。
• 节奏与纪律：默认 10 页（允许 8–11 页）。白色页面为主；最多 2–3 个深色页面（分隔页 + 结尾，可选一个深色主页面）。红色预算：每页 ≤ 4 处红色（条形图算一个装置）。无 emoji、无图标字体、无装饰插图、无渐变、无阴影、无圆角。仅真实内容——用户实际数字；缺失数据用诚实的 <!-- 待用户提供 --> 占位符，绝不编造统计。

使用方式

1. 澄清一次：主题、受众、页数，以及哪 2–4 个数字是主角。该风格依赖主数字——在写任何页面之前先选定它们。
2. 复制 example.html，重命名标题，然后按照布局枚举替换每个 section 的内容。保持装饰条、网格细线、令牌名称和脚本不变。仅通过更改令牌值重新主题化——且仅在用户品牌确实需要时；红/黑/白三色是身份标识。
3. 对于 ≥ 5 页，先展示：构建封面 + 一个数据剧场页面，确认语法，然后批量处理其余页面。
4. 交付前自检：用箭头键浏览每一页；计数器和 #/N 哈希保持同步；无超出 1920×1080 的溢出；条形宽度与其打印值成比例；每个页面显示装饰条和至少一条网格细线；每页红色计数 ≤ 4；无残留演示文本（"析衡"/"XIHENG"）；grep 查找 TODO。

适用场景

• 需要以瑞士网格风格呈现数据、强调信息层级和视觉焦点的演示文稿。
• 希望单文件、无外部依赖、可在沙盒 iframe 中通过 file:// 打开的 HTML deck。
• 需要严格视觉规范（红/黑/白三色、网格、巨型数字）的品牌或数据展示。

限制

• 视觉系统、画布契约和导航运行时由 example.html 锁定，不得重写设计或脚本。
• 不得引入规范之外的任何颜色或字体。
• 无 emoji、图标字体、装饰插图、渐变、阴影、圆角（运行时计数器胶囊除外）。
• 红色预算每页 ≤ 4 处。
• 仅使用真实内容，缺失数据用占位符，不得编造统计。
• 默认 10 页（8–11 页），白色页面为主，最多 2–3 个深色页面。
• 该技能的具体收费、价格、平台支持等信息暂未提供。