【免费下载链接】openpencilThe worlds first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.项目地址https://gitcode.com/gh_mirrors/op/openpencil点击查看免费下载本篇技术指南以 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: Dirstatic 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。它的核心纪律有三条自包含只有当前指南被明确选中时才应用其调色板、圆角、间距、阴影与组件处理不得把 food、social、dashboard、luxury、terminal 等其他指南的模式借进本风格。结构帧不装饰未命名的布局帧layout frame默认是纯结构的——不加填充、描边、圆角或阴影除非该节点确实承担 card、input、button、badge、media mask、导航表面等可见组件职责。层次感应来自间距、字体与显式表面而非装饰性包裹壳。层次靠留白拒绝在组件外再套装饰性外壳用ma负空间而非装饰建立视觉层级。这条 Scope 是保证 AI 多轮生成稳定性的关键子 Agent 拿到同一份指南产出的视觉语言不会跨风格漂移。风格总览和纸、墨迹与mazen-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均在词汇表中。平台为webappPlatform::from_str对未知值回退到Webapp。色彩系统核心背景Core BackgroundsToken值用途Page Background#F5F1EB页面根背景暖和纸Card Surface#FAF8F5卡片、抬升容器更浅的和纸Inset Surface#EEEAE3输入框背景、下沉区域Ink Surface#292524反色区块、页脚背景文字色Text ColorsToken值用途Primary Text#292524标题、主标签墨黑Secondary Text#57534E正文、描述Tertiary Text#A8A29E说明文字、时间戳、辅助文本Muted Text#D6D3D1占位符、禁用文字Accent Text#78716C激活导航项、链接、细微强调边框色Border ColorsToken值用途Default Border#E7E5E4卡片边框、分隔线、输入框轮廓Subtle Border#EEEAE3轻分隔线、区块分隔Active Border#78716C聚焦输入框、激活标签指示Ink Border#292524强分隔线、章节分隔符强调色Accent ColorsToken值用途Primary Accent#78716C主按钮、激活态stone 500Accent Hover#57534E按钮悬停、按压态stone 600Accent Light#78716C12浅色底色、选中行8% 透明度Accent Muted#78716C30徽章填充、进度轨道19% 透明度Ink Accent#292524强强调、反色按钮Success#4D7C0F正向指标柔橄榄绿Warning#A16207告警指示柔琥珀Error#991B1B错误状态柔红注意两个带透明度的令牌#78716C12与#78716C30是 8 位十六进制含 alpha 通道被parser.rs中first_hex的 3/4/6/8 位 hex 识别规则正确处理而不会被误判为普通颜色。字体排印Typography字体家族Role家族用途HeadingsNoto Serif章节标题、展示文本、卡片标题400-500 字重Body / FunctionalNoto Sans正文、标签、按钮、导航400 字重字号阶梯Type Scale层级字号字体字重用途Display36pxNoto Serif400页面标题、Hero 标题轻盈、透气Metric28pxNoto Serif500主数值、重点数字Title 122pxNoto Serif500章节标题Title 217pxNoto Serif500卡片标题、子章节标题Title 314pxNoto Serif500列表标题、紧凑卡片标题Body Large16pxNoto Sans400引导段、重点描述Body14pxNoto Sans400标准正文、表格单元格Label12pxNoto Sans500字段标签、列头、导航项Caption11pxNoto Sans400时间戳、次级元数据Overline10pxNoto Sans500章节眉题大写、宽字距Micro10pxNoto Sans500徽章、辅助标签字重 / 字距 / 行高字重仅两档——Regular 400正文、展示标题刻意偏轻与 Medium 500章节标题、标签、按钮。字距Display 36px 为 0px衬线自然字距章节标题 17-22px 为 0pxOverline/大写标签3px极宽、冥想感正文 0pxMetric 数值-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值用途4px行内图标文字组合8px紧凑元素组12px列表项之间、导航项之间16px卡片内部区块24px网格中的卡片之间、内容区块之间32px章节间距、呼吸空间48px主要章节断点64px顶级页面区块慷慨的ma空间内边距刻度Padding Scale值用途[8, 16]紧凑按钮、徽章[10, 20]标准按钮、输入框[12, 24]大按钮[14, 18]侧边栏导航项24px卡片内边距紧凑32px卡片内边距标准、慷慨40px特性卡片内边距[40, 48]内容区内边距充裕页边距版式模式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 invariantordinary content wrappers default toheight:fit_content完全一致——这是 OpenPencil 生成管线对内容驱动高度的全局约束。圆角Corner Radius值用途设计理由2px徽章、内联标签、微元素几乎不可感知的柔化4px其余全部元素按钮、卡片、输入框、弹窗、面板通用细微圆角设计理念近通用的 4px 圆角体现禅式的隐形工艺。圆角柔化到刚好让眼睛感到被考虑过、有意图但绝不足以形成装饰性声明——如同日式木盘的圆边或庭园中的圆石柔化是功能性的消除生硬感而非审美性的吸引注意。克制让焦点停留在内容与负空间上而非表面装饰。从parser.rs的角度看该章节会被extract_radius解析4px这一行命中card/standard/container类关键字lower.contains(card)分支中 All other elements 行不含这些词但px_number提取到第一个数字后按行内关键词归类与## Corner Radius章节标题共同构成风格切换时可比较的半径通道。图标Icons字体族LucideOutline 风格、圆角连接与端点柔和、笔触感。常用图标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——均为线性极简图标无填充式强调。图标尺寸尺寸用途14px行内指示符、表格行操作16px侧边栏导航图标、按钮前置图标20px卡片头部操作图标24px主侧边栏图标、页头操作图标图标颜色状态状态颜色用途Active#78716C激活导航、选中态Default#A8A29E标准图标、次要操作柔和Muted#D6D3D1禁用图标、占位状态Ink#292524浅色表面上的强强调图标On Dark#FAF8F5反色/墨色背景上的图标源码级实现风格指南如何被解析与选择Frontmatter 解析与注册loader.rs 是这份指南的入口管道。parse_style_guide_file通过split_frontmatter读取---围栏内的name/tags/platform三个字段platform缺省即webapp并把整份原始 Markdown 原样保留为content——注释明确写道content is injected verbatim into promptsTS 对齐也就是说本指南的全部表格与设计规则会一字不差地进入生成提示词。整个style-guides/目录在首次访问时被扫描进静态注册表REGISTRY: OnceLockVecParsedStyleGuide仅收录.md文件之后以static切片复用。这意味着zen-paper-light的每次命中都是零解析成本。选择算法名称优先、标签打分select_style_guide给出了两层选择契约名称优先若SelectOptions携带name直接按名称精确匹配可附加 platform 约束。audit_tests.rs的exact_name_lookup_returns_the_correct_guide测试遍历整个注册表验证每个指南都能凭自己的名字被精确找回——这是子 Agent 可复现性契约父 Agent 记录spawn_agents.styleguideName之后每个子 Agent 调用get_style_guide都必须拿到同一份指南。标签打分无名称时先按 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从指南中提取三类结构化通道颜色StyleColorsbackground / 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/*.mdWeb 端纯内存内置指南则用裸名。代码注释专门以zen-paper-light举例——若用户文件也叫zen-paper-lightuser:前缀可以保证它不会在查找顺序上静默遮蔽内置指南。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.rsPlatform 枚举与STYLE_GUIDE_TAGS词汇表结构化取值parser.rs、token_table.rs换肤映射mapping.rs用户导入与防冲突user_registry.rs摘要色票summary.rs 及其测试 summary_tests.rszen-paper-light用例语料结构审计audit_tests.rsScope 自包含、Color System Typography 章节、本地嵌入 ≥50 份指南风格目录解析resolve_style.rs7 套风格目录 调色板解析、对比度审计技能语料嵌入与 Agent 提示组装lib.rs结语zen-paper-light远不止一套色值表它是 OpenPencil Design-as-Code 理念在视觉层的最小完备单元——以 Markdown 承载精确到 px 的设计令牌以 frontmatter 支撑可检索、可打分、可复现的选择契约以结构化解析通道打通摘要、换肤与多 Agent 协作。理解这份指南的规格与它的解析管线就等于同时掌握了如何让 AI 稳定地生成一套和风禅意界面与OpenPencil 风格引擎的内部工作原理。赞分享【免费下载链接】openpencilThe worlds first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.项目地址https://gitcode.com/gh_mirrors/op/openpencil点击查看免费下载相关推荐ui-ux-pro-max-skill 的 CIP 设计风格指南从 8 大风格体系与色彩心理学到 AI 品牌 Mockup 的落地实践ui ux pro max skill 的 CIP 设计风格指南从 8 大风格体系与色彩心理学到 AI 品牌 Mockup 的落地实践 导读 本文以 cliAI 技能前端设计系统Toonflow 真人古风写实美术风格指南从全局色彩体系到分镜生成的完整提示词工程Toonflow 真人古风写实美术风格指南从全局色彩体系到分镜生成的完整提示词工程 导读 本文档系统拆解 Toonflow 开源 AI 短剧创作工具中 rea人工智能大模型AI 应用AI Agent媒体生成后端桌面应用从零搭建免费游戏串流服务器Sunshine五分钟上手完整教程从零搭建免费游戏串流服务器Sunshine五分钟上手完整教程 游戏PC锁在书房想在客厅电视上打一把就得拖着线缆折腾或者对着手机小屏干瞪眼Sunshin音视频后端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考