企业官网建设流程全解析

• AI 技能
• AI 插件
• 前端

导读

本文围绕 frontend-slides 技能包中 Bold Template Pack 的 Cartesian 模板设计文档，完整讲解其设计语法（五色暖石色板、Playfair Display + Inter 双字族排印、1px 细线结构、圆规式几何装饰层），并对照仓库源码（deck-stage.js、viewport-base.css、SKILL.md）说明它如何被翻译为固定 1920×1080 的演示舞台。读完本文，你将掌握 Cartesian 的完整实现规范：从配色、字号刻度、间距令牌到卡片/时间线/图表等组件的精确参数，以及中英混排的字体回退策略，可直接用于实际生成"安静、克制、成年感"的咨询、白皮书、文化与研究类幻灯片。

一、模板定位：Cartesian 在 Bold Template Pack 中的角色

Cartesian 是 frontend-slides 可选 Bold Template Pack（34 套大胆设计系统之一）中的一个轻色（light scheme）模板。在 selection-index.json 中，它的元数据被定义为：

• Slug：cartesian
• Tagline：Quiet warm-neutral palette with classical Playfair serifs; tasteful and unhurried.（安静暖中性色板 + 古典 Playfair 衬线，优雅而不紧不慢。）
• Mood：quiet / considered / elegant / warm-minimal
• Tone：classical / literary / restrained / confident-quiet
• Formality：high（高正式度）
• Density：low（低密度）
• Best for：投资论点、白皮书、顾问报告、长篇研究、画廊/文化类演示；也适合编辑专题、创始人自述——任何"克制本身就是信息"的场景，包括科技与金融领域。
• Avoid for：需要视觉热度、多重强调色或紧迫感的演示——这套暖中性色板刻意低能量。

在技能的实际工作流中，Agent 只会在样式发现阶段读取该模板的 preview.md 生成标题页预览；只有用户最终选定后，才读取完整的 design.md 作为"设计配方"（style recipe）生成整份演示，且预览页上不得出现模板名、文件名、preview、generated from等内部流程文字。

二、先决硬约束：Fixed-Stage 政策（优先级高于模板自身行为）

design.md开篇就声明了一条高于模板自带响应式行为的政策：凡由frontend-slides技能生成的最终演示，必须以固定 1920×1080 舞台为输出模型，整体等比缩放到浏览器视口，保持 16:9 画布；在手机上允许留黑边（letterbox / pillarbox），但绝不为移动端重排幻灯片内容。

关键翻译规则是：即使源模板原本使用100vw、100vh、vw、vh、clamp()等视口流式单位（Cartesian 正是这样的模板），也要把这些数值视为设计比例，换算成 1920×1080 舞台上的固定坐标，而不是保留为最终的实时响应式规则。

这条政策在仓库中有明确的实现支撑：

• viewport-base.css 定义了强制性的固定舞台基础样式：.deck-stage为position: absolute的 1920×1080 画布，.slide全部绝对定位堆叠在同一画布内，切换只靠visibility/opacity/pointer-events（display:none会破坏后续flex布局类），并提供@media print每页一屏的打印支持与prefers-reduced-motion降级。
• deck-stage.js 是可复用的<deck-stage>Web Component，默认设计尺寸DESIGN_W_DEFAULT = 1920、DESIGN_H_DEFAULT = 1080；_fit()通过Math.min(vw / designWidth, vh / designHeight)计算统一缩放因子，用一次transform: scale()缩放整个画布；非激活幻灯片保持在 DOM 中但visibility: hidden+opacity: 0，以保留视频、表单、iframe 的状态。它还内置键盘导航（←/→、PgUp/PgDn、Space、Home/End、数字键跳转、R 复位）和打印用@page规则注入。
• html-template.md 中的SlidePresentation.setupStageScale()提供了等价的舞台缩放实现：factor = Math.min(window.innerWidth / 1920, window.innerHeight / 1080)，再通过translate(...) scale(factor)把舞台居中。

因此，后续文档中一切"响应式"描述（如max-aspect-ratio: 4/3断点）都应理解为源模板的历史行为，而非最终生成模型的依据。

三、设计哲学：用 1px 细线完成的"克制"

Cartesian 的核心前提是"restraint through 1px lines"（以 1px 细线实现克制）。所有结构元素——列表分隔线、议程规则线、时间线连接线、卡片边框、表格分隔——都是单条 1px 的柔和土灰色（taupe，#B8B0A4）线条。系统中不存在粗边框、填充色、阴影、圆角表面。层级靠字形对比与负空间建立；常规意义上的"深度"不存在。

字族栈是一种"文学专著式"搭配：

• Playfair Display：高对比度 didone 风格衬线，承载所有标题、数据数字、卡片标题、团队成员首字母、引号。几乎只使用weight 400（常规）——系统中不存在加粗 Playfair，因为 didone 细笔画美学依赖纤弱字重在适度字重下呼吸。
• Inter：干净的现代无衬线（grotesque），承载所有正文、副标题、标签、出处行。正文 400，标签 500。

这套搭配构成了系统的编辑性声音：衬线的陈述 + 无衬线的支撑。

色板是五块暖石加墨水：画布为暖砂岩米色#EDE8E0，稍深一点的石色#E2DBD1做区域区分，墨黑#1A1A1A是标题色，中灰#5A5A5A是正文色，暖土灰#8A8178承载标签与小号数字，最浅的土灰#B8B0A4是通用 1px 线色。没有大众意义上的强调色——没有红橙蓝绿。

氛围由几何线装饰营造：细实线与细虚线圆圈以 20–50% 不透明度漂在内容后方，如同用圆规在描图纸上画出的。它们不创造层级，只创造情绪，传达"经过绘制、深思熟虑、精确"的信号。

密度哲学是"稀疏且呼吸"：一屏一清晰观点、良好留白、在石纸上。构图多用 5–6vw 栏距的居中或不对称两栏布局。拥挤即破局。

关键特征速览：暖砂岩画布 + 1px 土灰细线作通用结构元素；Playfair 400 承担一切标题/数字/引号，Inter 承担一切正文/标签/出处；五色单色板（两石、两灰、一墨），全无鲜艳强调色；实线+虚线圆环以 20–50% 透明度作氛围；所有标签/出处/微文本均为大写 Inter 加 2–3px 字距；所有边框一律 1px；右缘竖直导航点列、左下方形导航箭头、右下单色页码。

四、色彩体系：Stone & Ink 色板

六色令牌（含十六进制值）

默认值约定

• 默认表面背景：bg-primary；默认标题颜色：text-primary（永远墨水，绝不彩色、绝不上土灰）。
• 默认正文色：text-secondary；默认标签/出处/微文本色：accent。
• 默认边框色：line（唯一例外是稀有的墨黑horizontal-accent规则线）。
• 图表默认主系列色：text-primary（墨黑）；比较/次系列：line加 5px 虚线描边；网格线bg-secondary；坐标轴刻度accent。

Cartesian 强调颜色不是强调机制。需要强调时：加大字号、从无衬线切换到衬线、或加一条 1px 墨黑horizontal-accent规则线。克制才是机制。

五、字体排印：双字族系统

字族与字重

• Playfair Display（衬线，400/600/700，含斜体）负责一切标题、统计数字、引号、卡片标题、团队首字母。几乎只用400；斜体已加载但默认模板不启用，仅预留给正文内联<em>强调。
• Inter（无衬线，300/400/500/600）负责一切正文、副标题、标签、出处、微文本。正文 400，标签/微文本 500，罕见内联强调 600。

字号刻度（Type Scale）完整令牌表

签名处理（一旦使用对应元素即不可省略）

• 所有 Playfair 标题/统计/引号/卡片标题/首字母一律weight 400——系统内不存在加粗 Playfair。
• 所有 Playfair 元素使用句首大写（sentence case），专有名词可用真标题大写；不使用全大写 Playfair。
• 所有 Inter 标签/出处/微文本一律大写 + 2–3px 字距（标签 3px，出处与微文本 2px）。
• 所有 Playfair 元素渲染为text-primary（墨色）；例外是圆形card-icon/team-photo内的装饰性首字母，用accent土灰。
• 所有 1px 结构边框用line；唯一例外是稀有的墨黑horizontal-accent。
• 图表用墨黑主系列 + 虚线土灰（5,5）比较系列——这是唯一的图表配色规则。

行高保持舒展：标题 1.1，正文 1.6；正文的宽行高是"呼吸感"美学的一部分。

六、布局系统：画布、间距令牌与装饰几何层

画布与幻灯片切换

源模板的画布为100vw × 100vh（隐藏溢出），每张.slide绝对定位铺满视口，同一时刻只有一张带.active（opacity 1 + 可见）；切换为 0.6s 的 opacity + visibility 淡入淡出。如前所述，最终生成时这会被翻译为 1920×1080 固定舞台。

间距与栏距令牌

标题通常距上方标签 2–3vh、距下方正文 2vh；三卡或四团队网格上方的章节标题与网格之间保留 6vh 下边距（显著呼吸感）。

装饰几何层（每屏可选 1–2 个）

• geo-decoration：锚定角落的大圆环（通常 30–50vw 直径），内部::before渲染约 80% 直径的虚线内环。
• vertical-line：距左缘约 8vw、贯穿上下的 1px 竖线，30% 不透明度。
• horizontal-accent：距左下 15vh 的一条 20vw × 1px 墨黑短线（系统唯一的墨黑线）。
• geo-ring：50vw 居中圆环，用于收尾或沉思型幻灯片。

这些元素没有信息角色，只造氛围。完全没有几何装饰的幻灯片也是合法的；每屏超过两个几何元素即破坏克制。

Chrome（导航件）

• 右缘竖直导航点列：8px 土灰圆点（nav-dot），激活态变墨色并放大 1.3。
• 左下导航箭头：40×40 方形，1px 土灰边框、透明填充，悬停时反转为墨底米字。
• 右下页码：Inter 0.75rem、2px 字距、accent色。

没有顶部 chrome 条、常驻页眉或页脚规则线。

七、深度与层级：单平面系统的秩序来源

Cartesian 无阴影、无浮起卡片、无圆角表面、无渐变，所有元素共处一个平面。层级由以下要素构建：

• 字形对比：Playfair 衬线 vs Inter 无衬线；字号从 5rem 到 0.7rem 的刻度。
• 1px 发丝分隔线：议程行、时间线、卡片描边、图片占位描边、统计簇上边框、团队照片圆环、导航箭头边框。
• 色阶：墨 vs 灰 vs 土灰。
• 负空间：每个元素周围充足的留白。
• 几何氛围：圆规式的圆环暗示深度而不真正制造深度。

引入box-shadow、浮起卡片或柔和渐变即破坏定义该系统的克制。

八、形状与处理：只有 50% 与 0 两种圆角

圆角令牌

系统只有两个圆角值：正圆或直角。软圆角不存在。

线宽体系

• 1px 实线line：通用结构边框，用于卡片、图片占位、团队照片环、导航箭头、议程行底边、时间线规则、统计上边、geo-circle、geo-decoration。
• 1px 虚线line：仅用于geo-arc与geo-decoration/geo-ring内的::before内环——虚线语义即"作图线/弧"。
• 1px 实线text-primary：仅用于稀有horizontal-accent装饰规则，系统唯一的墨黑线。
• 图表描边：Chart.js 柱条边框 1px、折线 2px；比较系列 2px 虚线（5,5）。

各类装饰元素参数

• 几何圆环（geo-circle / geo-decoration / geo-ring）：不同尺寸（10vw / 30vw / 50vw）的 1px 土灰圆，20–50% 不透明度；通常配::before虚线内环（外径的 70–80%），暗示主弧加偏移弧的圆规作图；锚定角落或居中，z-index: 0且pointer-events: none置于内容后方。
• 竖直线：距左缘约 8vw、贯通上下的 1px 土灰列，30% 不透明度，暗示描图纸对齐参考线，每屏可选。
• 水平强调线：20vw × 1px 墨黑线，锚定幻灯片左下 15vh；系统唯一墨黑线，作封面/收尾强终止规则，需节制使用。
• 图片占位：bg-secondary实心块 + 经::before/::after以 +30° 与 -30° 交叉的两条 150% 长度 1px 土灰对角线，形成 X；居中放小号大写 Inter 标签（如 "Visual Reference"）。X 图案是"图片未接线"的标志性处理。
• 团队照片框：12vw 圆形bg-secondary块 + 1px 土灰环，中央 2rem Playfair 400 首字母（accent色），作为肖像占位。
• 卡片：1px 土灰边框 + 半透明白内填充（white-overlayrgba(255,255,255,0.3)），让画布色调隐约透出——这正是卡片区别于裸区域之处；去掉填充卡片即消失。
• 议程行：flex 行，左侧 Playfairagenda-numeral（accent色）+ 右侧标签，2vh 内距 + 1px 土灰底边，堆叠成议程列表。
• 时间线：跨 flex 行顶部的 1px 土灰边框 + 均匀分布的时间项；每项含小号 Interyear标签（土灰）、Playfairtimeline-headline、Inter 正文段。发丝线是唯一时间线结构——无节点、无标记、无圆点。
• 统计簇：gap-md分隔的 flex 统计行，1px 土灰上边框框定，内含内联 Playfairstat-figure数字 + 下方土灰大写 Inter 标签。
• 引号：50% 不透明度土灰 5rem Playfair 引号字形，置于 Playfairh2标题上方 + 下方小号大写土灰出处。
• 图表：Chart.js 柱状或折线图，墨黑主系列 + 虚线土灰比较系列，网格bg-secondary，坐标轴刻度accent；主系列始终无填充（折线图可加 5% 墨色填充）。

九、Do's 与 Don'ts（设计红线）

Do：

• 所有结构分隔都用一条line色 1px 线。
• 所有 Playfair 标题/统计/引号/卡片标题设 weight 400，不加粗。
• 所有标题渲染为text-primary墨色，Playfair 绝不使用土灰或彩色。
• 所有标签/出处/议程数字/微文本用accent土灰 + 大写 + 2–3px 字距。
• 每屏铺 1–2 个 20–50% 不透明度的实线+虚线几何环；绝不超过两个。
• 坚持 Playfair（衬线标题）+ Inter（无衬线正文）的双字族搭配。
• 图片占位内使用交叉对角线 X 图案。
• 让幻灯片呼吸——稀疏构图才是正确密度。
• 图片占位与团队照片框用bg-secondary填充（subtle stone，不是白不是灰）。
• 在封面/收尾构图中克制地使用单条horizontal-accent墨黑线。

Don't：

• 不引入大众强调色（无红橙蓝绿）。
• 不用accent土灰渲染 Playfair 标题——标题是墨水色，土灰只给小字。
• 不加粗任何 Playfair 元素。
• 不加阴影、浮起卡片或渐变填充——Cartesian 是扁平的。
• 不用卡片/矩形圆角——唯一圆形是真圆（50%）。
• 不用 2px+ 粗边框——一切结构边框 1px。
• 不把幻灯片塞满。
• 不把 Playfair 配其他无衬线——Inter 搭配固定。
• 不用句首大写渲染标签/微文本——小号 Inter 一律大写 + 2–3px 字距。
• 每屏不超过两个几何装饰。

十、响应式、演示控制、图表与导出（源模板行为）

响应式断点

源模板是视口流式 1920×1080 系统，全篇用vw/vh与clamp()。唯一断点是@media (max-aspect-ratio: 4/3)：两栏网格折叠为单栏、隐藏时间线规则（堆叠后会失去意义）、团队与卡片网格纵向堆叠。

缩放行为

• 展示标题经clamp()从最小视口 2.5rem 缩放到最大 5.5rem；正文 0.9→1.1rem；边距随vh/vw线性缩放。
• 1px 边框、8px 导航点、40px 导航箭头固定不缩放。

演示者控制

• ArrowRight/Space前进；ArrowLeft后退；右缘导航点可点击跳页；左下导航箭头可点击（悬停反转墨底米字）；右下页码显示"当前/总页"，两位零填充。
• deck-stage.js 的键盘处理与之兼容并更完整：←/→、PgUp/PgDn、Space、Home/End、数字键（1–9 跳页、0 跳第 10 页）、R 复位；还会在输入框/可编辑区域内忽略按键，并广播slidechangeCustomEvent（detail.index / previousIndex / total / slide / reason），演讲者备注通过#speaker-notesJSON 以postMessage同步给宿主窗口。

图表

图表由 CDN 加载的 Chart.js 渲染，源模板只有柱状与折线两类，均遵循墨黑主系列/虚线土灰比较系列约定；自定义字体设置把 Inter 注入 Chart.js 标签渲染。

打印与导出

源模板未专门处理打印（每屏为 100vw×100vh 块），导出工作流应对每屏做 1920×1080 快照。而 frontend-slides 的固定舞台实现已补齐这条路径：viewport-base.css的@media print与deck-stage.js注入的@page { size: 1920px 1080px; margin: 0 }可让浏览器"打印 → 存为 PDF"直接得到一页一屏的干净输出。

十一、中英文混排（CJK）支持

推荐中文搭配

混排策略：单一字体栈回退（Strategy A）

在同一个font-family栈中把 Noto Serif SC 声明在拉丁字体之后，拉丁字形自动渲染为 Playfair / Inter，CJK 字形自动回退到 Noto Serif SC——每种角色一条 CSS 规则，无需手动切换 class。

字体加载

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Inter:wght@300..600&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">

:root { --font-display: "Playfair Display", "Noto Serif SC", serif; --font-body: "Inter", "Noto Serif SC", sans-serif; } /* 标题用 Noto Serif SC 700；正文用 Noto Serif SC 400。 */

通用 CJK 调整

• 行高：CJK 正文行高提到约 1.75（原文 1.6）——汉字比拉丁小写需要更多纵向呼吸。
• 字距：汉字串上把letter-spacing归零；2–3px 字距只保留给大写拉丁标签。
• text-transform：内容是汉字时，对标签/出处/微文本去掉text-transform: uppercase——中文无大小写，强制大写会破坏内部混排的拉丁缩写的渲染。
• 标点：中文句用全角（，。：；「」），拉丁用半角（,.:;""）；中文章节内绝不混入半角标点。
• 标题不加句号：中文标题惯例省略结尾。，展示字符串中应去掉。
• Pangu 空格：相邻汉字与拉丁/数字串之间插入薄空格或普通空格（如2026 年、AI 产品），提升混排可读性。
• 一句一字体：同一句内不切换 CJK 字族；一段文本只选一个 Noto Serif SC 字重。

美学要点与已知 CJK 缺口

思源宋体是唯一与 Cartesian 编辑性基调匹配的主流汉字衬线：横细竖粗的笔画呼应 Playfair 的 didone 美学，均匀的节奏匹配"博物馆目录"之声。标题用 700 字重维持视觉质量，正文 400 提供 Inter 式安静暖意；五石色板让汉字保持在墨色与土灰中。不要加粗汉字（相当于中文版"不加大粗 Playfair"规则）。

已知缺口：Noto Serif SC 没有斜体轴（中文历史上无斜体），正文回退到 NSC 后，稀有的斜体 Playfair<em>强调会失效——可用accent土灰单字 span 或「」括注替代。NSC 700 是可用最重字重，系统"400 克制"规则天然延伸到中文，实践中极少触发此缺口。

十二、迭代检查单（新增元素的十条规定）

1. 新结构分隔线一律用 1px 实线line。无例外。
2. 新标题一律 Playfair Display 400 +text-primary。不加粗、不染色。
3. 新小号文本（标签/出处/微文本）一律 Inter 大写 + 2–3px 字距 +accent。
4. 新正文段一律 Inter 400 +text-secondary+ 行高 1.6。
5. 新卡片一律 1px 土灰边框 + 半透明白叠层填充；无阴影、无圆角。
6. 新圆形元素（图标/照片/装饰环）用 border-radius 50% + 1px 土灰环。
7. 新几何装饰保持克制：每屏 1–2 个、20–50% 不透明度、置于内容后方（z-index 0、pointer-events none）。
8. 新图表系列遵循墨黑主/虚线土灰比较约定；不引入彩色系列。
9. 新布局尊重呼吸密度——稀疏胜过拥挤。
10. horizontal-accent20vw 墨线是系统唯一"墨色规则线"——作终止强调，绝不作文本分割线。

十三、已知边界（实现层面的注意事项）

设计文档同时诚实列出了实现限制，值得生成时注意：

• Chart.js 经 CDN 加载；新增柱状/折线之外的图表类型需手动配置以匹配墨黑/虚线土灰美学。
• geo-decoration/geo-ring的::before内环样式硬编码于 CSS；超出源模板的尺寸变体需新增样式规则。
• 团队照片占位显示单个土灰 Playfair 首字母；真实肖像需替换为<img>并调整圆形裁切。
• 图表坐标轴标签色与网格色硬编码在 Chart.js options 中（而非读取 CSS 变量）——换肤需改 JS 而非 CSS。
• 图片占位 X 图案经::before/::after以固定 150% 宽度渲染；若尺寸调整超出源尺寸，可能需要重算 +30°/-30° 的旋转角度以保持对角线触边。
• 斜体 Playfair 已加载但任何默认规则都不使用；仅可作正文内联<em>强调，系统本身不书写任何斜体文本。
• vertical-line与horizontal-accent的位置值硬编码（左缘 8vw、底部 15vh）；偏离默认位置需逐个实例覆盖样式。
• 页码的currentSlide/totalSlidesID 在 JS 中被引用，但系统没有内部幻灯片名称注册表；新幻灯片按 DOM 顺序自然递增。

结语：把设计文档当作"配方"而不是"内容"

Cartesian 的 design.md 是一份完整可执行的设计系统规范：六色令牌、15+ 个字号令牌、7 个间距令牌、10 余种组件语法、一条 CJK 混排策略和一张迭代检查单。在 frontend-slides 的固定 1920×1080 舞台模型下，这些vw/vh/clamp()值都会被翻译为舞台坐标，配合 viewport-base.css 与 deck-stage.js 的统一缩放、导航与打印能力输出单文件 HTML。践行它的核心只有一句话：所有层级来自类型与负空间，所有结构来自 1px 细线，所有强调来自克制。

• AI 技能
• AI 插件
• 前端