企业官网建设流程全解析

• AI 技能
• AI 插件
• 前端

本篇技术指南以frontend-slides技能中Playful 模板的预览卡（preview.md）为绝对核心，讲解这套「桃泥画布 + 炭黑墨色」单色手作编辑部风格在标题页预览阶段如何被读取、还原与输出：你将从选择元数据出发，完整掌握其调色板、字体角色、五项标志性设计动作，以及一套不可妥协的预览真实性规则；并结合design.md与SKILL.md的源码级证据，理解为什么预览必须是一张「真实的用户第一页」而不是模板选择卡片，以及固定 1920×1080 舞台模型在deck-stage.js/viewport-base.css中的落地方式。

一、preview.md 在渐进式披露流程中的角色

frontend-slides技能采用渐进式披露（progressive disclosure）设计：主工作流文件 SKILL.md 是一张地图，只有在特定阶段才会读取对应支持文件。在 Phase 2（风格发现）中，Agent 先读取 selection-index.json 的紧凑元数据，从mood、tone、best_for、avoid_for、formality、density、scheme中短列出候选模板，然后只读取入选候选模板的 preview.md来生成标题页预览。

Playful 模板的 preview.md 开头即声明了它的职责边界：

Use this small file for title-slide previews only. For final deck generation, read the full design doc listed below.

即：这份小文件仅用于标题页预览；当用户最终选定该模板生成完整幻灯片时，才需要读取同目录下的完整设计文档 design.md。同时 bold-template-pack/README.md 中的「Implementation Contract」明确了两者分工：design.md是设计系统参考（作为配方而非照抄内容），preview.md只是用于生成三个标题页选项的轻量风格卡。

二、选择元数据：何时选用 Playful，何时避开

preview.md的「Selection Metadata」一节给出了判断该模板是否契合本次演示的完整依据，与selection-index.json中playful条目的记录完全一致：

• Slug：playful
• Tagline：Sun-warm peach background with Syne display: a friendly indie launch deck.（阳光温暖的桃色背景搭配 Syne 展示字体：一套友好的独立发布演示。）
• Mood：warm、approachable、indie、friendly
• Tone：upbeat、informal、welcoming
• Formality：low（低正式度）
• Density：medium（中等密度）
• Scheme：light（浅色方案）
• Best for：凡是需要传达温暖、独立、平易近人气质的内容——创作者作品集、独立产品发布、生活方式品牌、小生意路演、newsletter / 社区演示；同时也欢迎任何想显得「友好而人性化」而非「企业化」的演示（包括技术或研究类内容）。
• Avoid for：当机构公信力比温暖感更重要时——桃色调色板刻意地非正式。

这组元数据是 Phase 2 短列表筛选的核心输入。从SKILL.md的 Preview mix rules 看，默认的预览组合是「1 个来自STYLE_PRESETS.md的安全预设 + 至少 1 个来自模板包的 bold 模板 + 1 个 wildcard」；若用户的场合偏保守、正式，则应选择更沉稳、更高正式度的模板，而非 Playful 这类formality: low的选项。

三、视觉快照：一色纪律与「墨印陶土纸」阅读体验

preview.md用「Visual Snapshot」浓缩了整套设计系统的气质，这也是design.mdOverview 一节的原话：

Playful is a hand-crafted editorial system anchored by a single warm canvas — a peach-clay{colors.bg}(#F0C8A0) — with charcoal{colors.text}(#1A1A1A) as the only meaningful "color." Everything reads as ink-on-clay-paper. There are no secondary brand colors, no gradients, no chromatic accents.

系统完全承诺于单色纪律：唯一有意义的「颜色」是炭黑墨色，其余表现力来自形状、字重、旋转与手绘痕迹，而非调色板丰富度。整体美学借鉴独立工作室演示、risograph 小志与写生簿版面——有机 blob 边框、潦草 SVG 涂鸦、轻微旋转的卡片、双描线偏移边框，共同营造「手触过、未打磨」的温暖感。效果是创意工作室编辑风，而非企业路演：自信但人性化，有结构但松散。

需要特别注意design.md中的两个色值细节：桃泥底色#F0C8A0饱和到足以成为系统的标志；墨色#1A1A1A从纯黑略微柔化，以便在暖纸上显得柔和而非刺眼。accent别名解析为{colors.text}——系统没有独立的强调色，「强调」是相对画布的对比度，而非第三种色调。

四、Preview Ingredients：预览阶段必须保真的五项标志性动作

preview.md的「Preview Ingredients」列出了生成标题页时必须保真的完整成分清单：

调色板（Palette）

• bg#F0C8A0（桃泥画布，默认表面）
• bg-alt#E8B88E（略深的同系色，用于图片占位区与表面分层）
• light#F7DEC6（略浅的同系色，用于单步抬升的分层）
• text#1A1A1A（炭黑墨色，唯一非画布色）

字体（Typography）

• Display：Syne（展示字体）
• Body：Space Grotesk（正文字体）

五项 Signature Moves（签名动作）

1. 桃泥画布 + 炭黑墨色作为唯一颜色，无二级品牌调色板；
2. Syne 以 700–800 字重 + 负字距（negative letter-spacing）用于一切展示与数字时刻；Space Grotesk 以 400–500 用于正文；
3. 双描线偏移边框（double-stroke offset borders）——卡片先有一圈 3px 描线，再通过::before伪元素偏移 6–8px 叠加一圈「幽灵边框」；
4. 卡片、色块与统计数字带 ±0.5deg 至 ±3deg 的小幅旋转，营造手工摆放感；
5. 非对称 border-radius 的有机 blob 形状充当装饰性边框与填充。

design.md进一步解释了第 3 点的实现原理：rough-box组件是 3px 实心炭黑边框，加上绝对定位的::before伪元素在右下方偏移 6–8px 的第二条 2–3px 边框，偏移部分无填充、画布透过可见，视觉上像「同一支笔沿边缘描了两遍」，模拟不完美的拓印。这正是整套系统的纵深装置——它取代了大多数系统会用box-shadow做的事情。design.md明确要求不使用任何模糊阴影、drop-shadow 或 rgba 阴影，因为「标记应当看起来是被画出来的，而非被渲染出来的」。

五、国际内容 / CJK 预览注意事项

preview.md的「International / CJK Preview Note」给出了中文等 CJK 场景下预览阶段的最低要求：

• 若预览使用中文或其他 CJK 文本，CJK 字距保持 0（letter-spacing: 0）；
• 放宽行高（loosen line-height）；
• 避免对 CJK 文本施加大写转换（uppercase transforms）；
• 选定后使用完整design.md的 CJK 章节获取精确字体配对与脚本专属调整。

从design.md的「CJK & International Content」一节可以看到完整方案的深度：推荐配对为Syne → 站酷快乐体 ZCOOL KuaiLe（展示）、Space Grotesk → 悠哉字体 Yozai（正文），通过扩展每个 token 的fontFamily实现「拉丁在前、中文回退」的混合策略。加载方式如下：

<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=Syne:wght@700;800&family=Space+Grotesk:wght@400;500;600;700&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/cn-fontsource-yozai-regular/font.css" rel="stylesheet">

design.md特别指出：中文展示文字要放弃负字距（KuaiLe 基于方形 em-box，收紧会导致字形碰撞）；中文 eyebrow 标签不能用「0.15em 字距 + 大写」组合，应以相同字号 0.85rem、字距 0、无大写来承担标签角色。而双描线偏移边框、±3deg 旋转、有机 blob、SVG 涂鸦、ghost-blob 壁纸等治疗均为脚本无关的，单色纪律与手作美学在脚本切换后完整保留。

六、Preview Rules：标题页预览的不可妥协规范

preview.md的「Preview Rules」是生成标题页预览时必须逐条遵守的硬性约束，这也与SKILL.md的「Preview authenticity rules (NON-NEGOTIABLE)」一脉相承：

1. 只构建一张 1920×1080 的标题页，且必须在固定舞台模型（fixed-stage model）内；
2. 保留上述调色板、字体角色、表面节奏与装饰词汇；
3. 使用用户真实的标题 / 副标题 / 上下文，不得复制演示性示例内容；
4. 渲染结果必须看起来像一张真实的第一页幻灯片，而不是模板选择卡片；
5. 绝不把内部工作流文字放到幻灯片上：不得出现preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径或来源文档标签；
6. 绝不把模板名或 slug 放到幻灯片上，只能出现在与用户的聊天消息中；
7. 绝不把用户需求备注放到幻灯片上（如期望气质、受众、内部使用标签），除非用户明确要求这些词出现在演示中；
8. 可见的装饰性文字只能使用真实的演示内容：演示标题、真实章节标题、日期、作者、公司、页码或来自用户材料的真实内容短语；
9. 预览生成阶段不要读取template.html；
10. 不要读取其他模板的design.md；
11. 用户选定该模板生成完整演示后，先读取完整 design.md 再生成最终幻灯片。

这些规则的意图非常明确：预览是「展示而非告知」（show, don't tell）理念的具体化——用户看到的是自己真实封面的三种可能风格，任何模板名、内部标签或「选项 A/B/C」字样都会破坏体验并暴露工作流。因此bold-template-pack/README.md同样强调：预览页必须用用户的真实内容，模板风格只负责塑造呈现方式，不覆盖信息或结构。

七、固定舞台模型：1920×1080 与整体缩放

preview.md要求标题页构建在固定舞台模型内，这一点在design.md的「Frontend Slides Fixed-Stage Policy」以及SKILL.md的「Fixed 16:9 Stage (NON-NEGOTIABLE)」中得到强调：最终演示必须以固定 1920×1080 舞台生成，整体等比缩放到浏览器视口；包括手机在内都保持 16:9 画布，允许 letterbox / pillarbox，但不为移动端重排幻灯片内容。

这一模型的实际落地方式有两套等价实现：

• 自带的 deck-stage.js 是一个<deck-stage>自定义 Web Component：DESIGN_W_DEFAULT = 1920、DESIGN_H_DEFAULT = 1080，内部画布以transform: scale(s)（s = Math.min(innerWidth/1920, innerHeight/1080)）整体缩放；它还内置键盘导航（←/→、PgUp/PgDn、Space、Home/End、数字键、R 重置）、触屏左右点击区、slidechange事件广播，以及打印时「一页一幻灯片」的@media print规则。
• viewport-base.css 则提供了等价的固定舞台基础样式：.deck-stage固定在 1920×1080，.slide绝对定位、以visibility/opacity/pointer-events控制显隐，并带prefers-reduced-motion支持。

SKILL.md的生成要求是：输出单个自包含 HTML 文件，在<style>块中完整包含viewport-base.css，并把design.md中出现的vw、vh、clamp()等流动值视为「设计比例」，翻译成 1920×1080 舞台坐标，而不是保留为实时响应式规则。

八、从预览到完整设计：design.md 的纵深资源

一旦用户选定 Playful，design.md 成为完整设计系统的配方。其内容远超预览卡的浓缩描述，以下是几个值得在生成时重点运用的模块：

类型比例（Type Scale，节选核心行）

版式原则（Signature Treatments）

• 每个展示元素都必须用 Syne，且必须带 -0.01em 至 -0.03em 的负字距；
• 每个正文与标签都必须用 Space Grotesk；
• 统计与数字永远 800 字重（2rem 的小数字也遵守展示字重约定）；
• 独立 stat 元素可带 ±0.5deg 至 ±1deg 小旋转；
• 行高：展示 0.85–1.1 收紧，正文 1.5–1.7 放宽，两者不可互换；斜体与下划线不存在，强调只靠换字体或换字重。

装饰元素语法（Decorative Element Types）

design.md定义了完整的组件词汇表：rough-box（双描线卡片）、filled-block（炭黑填充反向卡片）、blob-frame-organic/blob-frame-pebble（两种有机框）、scribble-svg（2px 圆头描边涂鸦）、doodle-circle/doodle-rect、step-node-circle（64px 步骤节点圆）、tag-pill、vertical-text（90° 垂直脊线标签）、ghost-blob（0.08 透明度氛围壁纸）等。同时给出迭代指南（Iteration Guide）：任何新卡片都用 rough-box 模式并带旋转、任何新标题都用 Syne 700–800 负字距、每张幻灯片至少一个角上有涂鸦、图表只用 text / bg-alt 两种填充——这套清单能让整个演示保持一致的手作气质。

Do's and Don'ts（精选）

• Do：给每个主要内容卡片加双描线偏移边框；每张幻灯片至少一个角的涂鸦 SVG；相邻元素旋转方向交替；让负空间呼吸（每页一个主导元素 + 一两个涂鸦）。
• Don't：绝不引入第三种颜色；绝不使用模糊 box-shadow；绝不使用 4px / 8px / 12px 的中等圆角；绝不旋转超过 3deg；绝不把所有元素旋向同一方向；绝不把一页塞满。

Known Gaps（已知缺口）

design.md也诚实记录了系统的限制，生成时需要提前规划：字体走网络加载、自托管更稳妥；靠近幻灯片边缘的卡片偏移边框可能被裁剪；768px 断点的响应式行为「基础但不精致」；桃泥画布文化寄存器强烈、不适合冷色调品牌调色板；图片占位符只是 stub，正式演示需使用尊重暖色板照片；无深色模式变体。

九、仓库资源导览

• Playful 预览卡——标题页预览的唯一依据，即本文主体；
• Playful 完整设计文档——选定后生成最终演示的设计配方；
• 模板包选择索引——34 个 bold 模板的紧凑元数据（Playful 条目含preview_md与design_md路径）；
• 模板包 README——Implementation Contract 与渐进式披露使用约定；
• 技能主流程 SKILL.md——Phase 2 风格发现与 Preview authenticity rules、固定舞台硬性规则；
• deck-stage.js——1920×1080 舞台整体缩放、键盘 / 触屏导航与打印实现；
• viewport-base.css——每份演示都必须完整包含的固定舞台基础样式；
• html-template.md——单文件 HTML 架构、SlidePresentation 控制器与舞台缩放写法参考。

总而言之，Playful 的preview.md是一张精确而克制的「风格卡」：它用一份调色板、两条字体角色、五项签名动作和十一条预览规则，把整套手作编辑部设计系统压缩进一张 1920×1080 的真实标题页里。对 Agent 与开发者而言，遵循「先短列表元数据 → 只读 preview.md 生成预览 → 选定后才读 design.md」的渐进式流程，并严守「预览必须是真实第一页」的底线，就能让「桃泥画布 + 炭黑墨色」的温暖独立气质在用户的实际演示中可靠重现。

• AI 技能
• AI 插件
• 前端