企业官网建设流程全解析

本篇技术指南以 OpenPencil（开源 AI 原生矢量设计工具）内嵌风格指南zen-paper-light（禅意纸张 / 和风极简浅色）为绝对主体，完整拆解其前端应用层的 6 大规格体系——色彩、字体排印、间距、圆角、图标与版式模式，并结合op-ai-skillscrate 的解析、选择、摘要与换肤实现，说明该风格如何被 AI 设计 Agent 选中、注入提示词并在画布上落地。读完你将掌握：如何按标签或名称在生成时启用该风格、风格指南的结构化取值机制、以及它与其他风格切换时的底层映射原理。

风格指南在 OpenPencil 中的定位

zen-paper-light是 OpenPencil 内嵌设计技能语料（skill corpus）中 60+ 份风格指南之一，位于 style-guides 目录。与 phase 技能（planning / generation / validation / maintenance）不同，风格指南是一类独立的"视觉语言资产"：它们通过 frontmatter 声明name、tags、platform，正文则用固定章节（## Style Scope、## Color System、## Typography、## Corner Radius等）给出可直接落地的具体设计令牌（token）值。

从 lib.rs 可见，整个skills/目录在编译期通过include_dir!宏嵌入二进制（pub static SKILLS: Dir<'static> = include_dir!("$CARGO_MANIFEST_DIR/skills")），风格指南与技能 Markdown 一起随 crate 发布，运行时零文件 IO、零网络请求，并且能在 wasm32 目标上正常编译——这保证了 Web 版画布同样可以无延迟地取用风格语料。audit_tests.rs中有一条硬性约束registry_is_local_and_returns_at_least_fifty_guides，明确断言注册表必须同步返回 ≥50 份本地嵌入的指南，正是对这一设计的运行时佐证。

Style Scope：自包含与不越界的纪律

文档开篇的## Style Scope是每一份风格指南的强制章节（loader.rs的测试逐一校验guide.content.contains("## Style Scope")与"This guide is self-contained"）。它的核心纪律有三条：

1. 自包含：只有当前指南被明确选中时才应用其调色板、圆角、间距、阴影与组件处理；不得把 food、social、dashboard、luxury、terminal 等其他指南的模式"借"进本风格。
2. 结构帧不装饰：未命名的布局帧（layout frame）默认是纯结构的——不加填充、描边、圆角或阴影，除非该节点确实承担 card、input、button、badge、media mask、导航表面等可见组件职责。层次感应来自间距、字体与显式表面，而非装饰性包裹壳。
3. 层次靠留白：拒绝在组件外再套装饰性外壳，用"ma"（负空间）而非装饰建立视觉层级。

这条 Scope 是保证 AI 多轮生成稳定性的关键：子 Agent 拿到同一份指南，产出的视觉语言不会跨风格漂移。

风格总览：和纸、墨迹与"ma"

zen-paper-light的美学是"沉思型超极简界面"：灵感来自和纸（washi paper）、墨笔笔触与日本"间"（ma，负空间作为构图元素）的概念。

• 纸张般暖意：#F5F1EB背景暗示带金色底调的手工和纸
• 石色低语：#78716C强调色刻意安静——以低语而非喊叫提供引导
• 细字衬线标题：Noto Serif 400-500 字重，呈现克制的书法式优雅
• 最小圆角：全局 4px，几乎不可察觉、无限克制
• 慷慨的"ma"空间：大面积留白被当作设计元素而非空填充
• 单色克制：暖灰与石色为主，几乎不含彩色

在受控标签词汇表（types.rs中的STYLE_GUIDE_TAGS）里，该风格登记的zen, minimal, light-mode, quiet, paper, serif, japanese, webapp全部属于合法标签，其中zen、quiet、paper、serif、light-mode、minimal均在词汇表中。平台为webapp（Platform::from_str对未知值回退到Webapp）。

色彩系统

核心背景（Core Backgrounds）

文字色（Text Colors）

边框色（Border Colors）

强调色（Accent Colors）

注意两个带透明度的令牌：#78716C12与#78716C30是 8 位十六进制（含 alpha 通道），被parser.rs中first_hex的 3/4/6/8 位 hex 识别规则正确处理，而不会被误判为普通颜色。

字体排印（Typography）

字体家族

字号阶梯（Type Scale）

字重 / 字距 / 行高

• 字重：仅两档——Regular 400（正文、展示标题，刻意偏轻）与 Medium 500（章节标题、标签、按钮）。
• 字距：Display 36px 为 0px（衬线自然字距）；章节标题 17-22px 为 0px；Overline/大写标签+3px（极宽、冥想感）；正文 0px；Metric 数值-0.5px。
• 行高：Display 36px 为 1.3（宽敞透气）；标题 17-22px 为 1.3；正文 14-16px 为1.7（为沉思式阅读额外放宽）；说明文字 10-12px 为 1.5。

这套两档字重 + 1.7 正文行高的组合，是"ma"理念在文字层最直接的体现：行距本身就是呼吸空间。

间距系统（Spacing System）

间隙刻度（Gap Scale）

内边距刻度（Padding Scale）

版式模式（Layout Pattern）

• 画布宽度：1440px
• 侧边栏：220px宽、垂直、和纸色（#F5F1EB）+ 石色激活指示条
• 内容区：widthfill_container、heightfit_content、垂直排列、gap 32-48、padding [40, 48]
• 卡片：1px 描边（#E7E5E4）、无阴影（纸平面感）
• 顶栏：56px高、和纸背景、底部边框#E7E5E4
• 所有元素间保持慷慨的垂直间距——留白是首要设计元素
• 内容最大宽度：960px 居中（收窄，服务于专注阅读）

值得一提：内容区采用height: fit_content、侧边栏固定宽度、正文栏 960px 收窄居中，与lib.rs测试锁定的"最终尺寸不变量（Final sizing invariant：ordinary content wrappers default toheight:"fit_content"）"完全一致——这是 OpenPencil 生成管线对内容驱动高度的全局约束。

圆角（Corner Radius）

设计理念：近通用的 4px 圆角体现"禅"式的隐形工艺。圆角柔化到刚好让眼睛感到"被考虑过、有意图"，但绝不足以形成装饰性声明——如同日式木盘的圆边或庭园中的圆石：柔化是功能性的（消除生硬感），而非审美性的（吸引注意）。克制让焦点停留在内容与负空间上，而非表面装饰。

从parser.rs的角度看，该章节会被extract_radius解析：4px这一行命中"card/standard/container"类关键字（lower.contains("card")分支中 "All other elements" 行不含这些词，但px_number提取到第一个数字后按行内关键词归类），与## Corner Radius章节标题共同构成风格切换时可比较的半径通道。

图标（Icons）

• 字体族：Lucide，Outline 风格、圆角连接与端点（柔和、笔触感）。
• 常用图标：book-open, feather, leaf, sun, moon, cloud, droplets, wind, mountain, compass, map, search, bookmark, archive, folder, file-text, pen-line, heart, star, bell, settings, user, plus, x, check, chevron-right, chevron-down, eye, clock, calendar——均为线性极简图标，无填充式强调。

图标尺寸

图标颜色状态

源码级实现：风格指南如何被解析与选择

Frontmatter 解析与注册

loader.rs 是这份指南的入口管道。parse_style_guide_file通过split_frontmatter读取---围栏内的name/tags/platform三个字段（platform缺省即webapp），并把整份原始 Markdown 原样保留为content——注释明确写道"content is injected verbatim into prompts"（TS 对齐），也就是说本指南的全部表格与设计规则会一字不差地进入生成提示词。

整个style-guides/目录在首次访问时被扫描进静态注册表REGISTRY: OnceLock<Vec<ParsedStyleGuide>>（仅收录.md文件），之后以&'static切片复用。这意味着zen-paper-light的每次命中都是零解析成本。

选择算法：名称优先、标签打分

select_style_guide给出了两层选择契约：

1. 名称优先：若SelectOptions携带name，直接按名称精确匹配（可附加 platform 约束）。audit_tests.rs的exact_name_lookup_returns_the_correct_guide测试遍历整个注册表，验证每个指南都能凭自己的名字被精确找回——这是子 Agent 可复现性契约：父 Agent 记录spawn_agents.styleguideName之后，每个子 Agent 调用get_style_guide都必须拿到同一份指南。
2. 标签打分：无名称时，先按 platform 过滤，再用 Jaccard 式得分（命中请求标签数 / 请求标签总数）排序，同分取注册表靠前者（与 TS 端排序对齐）。

因此要让zen-paper-light被选中，可以在生成请求中直接指定名称zen-paper-light，或通过zen、minimal、quiet、paper、serif、light-mode、japanese等标签组合命中。若完全无匹配，调用方回退到style-defaults.md。

结构化取值：为换肤与摘要服务

parser.rs 的extract_style_guide_values从指南中提取三类结构化通道：

• 颜色（StyleColors）：background / surface / accent / text_primary / text_secondary / text_muted / border，优先匹配## Color System内"Page Background"、"Card Surface"、"Primary Accent"、"Primary Text"等标签行；
• 字体（StyleTypography）：从## Typography→### Font Families的| Role | Family | Usage |表中按角色关键词（display/serif、body/functional、data/mono）抽取 display/body/data 字体；
• 圆角（StyleRadius）：从## Corner Radius提取 card 与 button 两个 px 数值。

对zen-paper-light而言，这套提取会得到：background#F5F1EB、surface#FAF8F5、accent#78716C、text_primary#292524、border#E7E5E4、display 字体 Noto Serif、body 字体 Noto Sans、card/button 圆角 4px。若某通道在语料语法下取不到值，token_table.rs的fill_gaps会尝试用社区DESIGN.md的令牌表方言补洞——不过语料内指南通常走主语法即可完整命中。

这两个通道的下游消费方分别是：

• 摘要：summary.rs 的style_guide_summary("zen-paper-light")会生成"背景→表面→强调→主文字"最多 4 个色票（summary_tests.rs 明确以zen-paper-light作为语料指南用例，断言其色票非空），用于聊天面板每帧渲染的固定栏；该摘要按 id 记忆化，导入/删除指南时统一失效。
• 换肤映射：mapping.rs 的build_style_mapping对比两套StyleGuideValues，产出from → to替换对（fill / text / stroke / font_family / corner_radius 五类），供replace_all_matching_properties类 MCP 工具把现有设计整体重绘为该风格——从深色仪表盘切到zen-paper-light，只需替换背景#xxx → #F5F1EB、表面、强调色、字体族与圆角这几组键值。

用户导入与命名冲突防护

user_registry.rs 展示了内置指南与用户自建指南的共存机制：用户通过DESIGN.md导入的风格以user:<slug>为 id 存入进程级全局存储（桌面端落盘~/.openpencil/styles/*.md，Web 端纯内存），内置指南则用裸名。代码注释专门以zen-paper-light举例——若用户文件也叫zen-paper-light，user:前缀可以保证它不会在查找顺序上静默遮蔽内置指南。find_style_guide的解析顺序是：user:前缀优先（Asset Center 写入的 id 绝不落到语料）→ 语料裸名 → 用户指南显示名（忽略大小写）。

在 OpenPencil 中实战使用该风格

综合上述机制，zen-paper-light的实战使用路径可以归纳为三层：

1. 提示词层（Agent 生成时）：在 AI 设计会话中给出风格意图（如"禅意和纸、极简浅色、衬线标题的 web 应用"），或直接以zen-paper-light命名该风格。生成管线依据 lib.rs 中design_agent_system_prompt挂载的工具协议（含get_style_guide、get_guidelines(category:"style")、batch_design、spawn_agents、get_screenshot），由 Agent 拉取本指南全文注入提示，随后以脚本生成（script mode）在画布批量落点。

2. 多 Agent 协作层：主 Agent 通过spawn_agents.styleguideName把风格名传给子 Agent。由于精确名称查找是硬契约（有exact_name_lookup_returns_the_correct_guide测试锁住），所有子 Agent 拿到的必然是同一份zen-paper-light，杜绝多 Agent 并行产出时的风格漂移。

3. 画布与迭代层：画布上的实际元素应严格落在本指南的令牌上——页面根#F5F1EB、卡片#FAF8F5表面 +#E7E5E41px 描边且无阴影、输入框#EEEAE3下沉表面、主按钮#78716C、圆角统一 4px（微元素 2px）、留白按 8 的整数倍（8/16/24/32/48/64）取用、正文行高 1.7、标题用 Noto Serif 400-500 字重。若要整体切换到其他风格，走换肤映射通道即可批量替换颜色与字体。

可验证依据清单（供深入源码）：

• 风格指南本体：zen-paper-light.md
• 加载与选择：loader.rs、types.rs（Platform 枚举与STYLE_GUIDE_TAGS词汇表）
• 结构化取值：parser.rs、token_table.rs
• 换肤映射：mapping.rs
• 用户导入与防冲突：user_registry.rs
• 摘要色票：summary.rs 及其测试 summary_tests.rs（zen-paper-light用例）
• 语料结构审计：audit_tests.rs（Scope 自包含、Color System + Typography 章节、本地嵌入 ≥50 份指南）
• 风格目录解析：resolve_style.rs（7 套风格目录 + 调色板解析、对比度审计）
• 技能语料嵌入与 Agent 提示组装：lib.rs

结语

zen-paper-light远不止一套色值表：它是 OpenPencil "Design-as-Code" 理念在视觉层的最小完备单元——以 Markdown 承载精确到 px 的设计令牌，以 frontmatter 支撑可检索、可打分、可复现的选择契约，以结构化解析通道打通摘要、换肤与多 Agent 协作。理解这份指南的规格与它的解析管线，就等于同时掌握了"如何让 AI 稳定地生成一套和风禅意界面"与"OpenPencil 风格引擎的内部工作原理"。