开发工具前端【免费下载链接】PubliiThe most intuitive Static Site CMS designed for SEO-optimized and privacy-focused websites.项目地址https://gitcode.com/gh_mirrors/pu/Publii点击查看免费下载DESIGN.md 是 Publii 桌面应用渲染层的规范性视觉契约normative visual contract它定义了应用工作区的色彩、排版、间距、层级、形状与共享组件语义并围绕appAppearance、workspaceAccent、colorScheme三个核心概念建立起一套可被自动化审计的设计系统。本文以该文档为主线结合仓库内 应用外观运行时代码、publii 外观实现、设计系统审计脚本 与 package.json 中的脚本命令逐层拆解这份契约的规范内容、落地方式与执行机制帮助读者理解如何在 Publii 中维护一套语义化、可迁移、可验证的应用外观体系。契约总览这份文档在约束什么DESIGN.md 的 front matter 明确标注version: alphaname: Publii Applicationdescription: Normative visual contract for the Publii desktop application rendererPublii 桌面应用渲染层的规范性视觉契约。它的覆盖面是应用工作区application workspace以及各编辑器共享的视觉角色shared visual roles而编辑器自身的布局与组件契约当前不在组件规范化范围内属于文档明确omitted暂缓的部分。文档开篇的 Overview 给出了契约的基线特征使用系统排版system typography以蓝色作为默认操作强调色default action accent中性的工作表面neutral work surfaces持久化的站点上下文persistent site context同时支持浅色与深色两种色彩方案提供 12 种按站点per-site配置的工作区强调色workspace accents。这里特别强调production appearance生产环境外观是当前重组设计系统期间的规范性基线也就是说任何设计系统基础工作都不得改变当前已渲染的外观。这与后文 Dos and Donts 中第一条Do preserve the current rendered appearance during design-system foundation work完全对应。三个易混概念的严格区分siteTheme / appAppearance / colorScheme文档用一节专门厘清三者的边界这是理解整个契约的前提概念作用对象含义siteTheme生成的网站generated sites应用于生成站点的主题与桌面应用外观无关appAppearancePublii 桌面应用一个具名的应用视觉预设named visual preset拥有完整视觉语言colorScheme应用方案解析结果解析后的light或dark应用色彩方案system用户偏好只是用户偏好用于解析colorScheme它既不是 appearance也不是 site theme关键约束Dont call an application appearance a theme or template—— 应用外观appAppearance绝不能被称为主题或模板以免与站点主题siteTheme混淆。实现上这套概念由 app-appearance.js 单一持有single runtime owner。该文件定义了默认外观publii、默认工作区强调色default以及APP_APPEARANCES注册表const DEFAULT_APP_APPEARANCE publii; const DEFAULT_WORKSPACE_ACCENT default; const APP_APPEARANCES Object.freeze({ publii: Object.freeze({ workspaceAccents: Object.freeze([ DEFAULT_WORKSPACE_ACCENT, indigo, violet, magenta, crimson, rose, orange, emerald, petrol, navy, graphite, midnight ]) }) });运行时通过applyAppAppearance统一向主文档与嵌入文档写入四个属性root.setAttribute(data-theme, colorScheme dark ? dark : default); root.setAttribute(data-app-appearance, normalizedAppAppearance); root.setAttribute(data-color-scheme, colorScheme); root.setAttribute(data-workspace-accent, normalizedWorkspaceAccent);其中data-theme仅为插件与迁移期兼容而保留组件不得直接写入这四个属性中的任何一个Components must not write any of these attributes directly。审计脚本也会扫描所有.js/.vue/.css文件凡是绕过app-appearance.js直接调用setAttribute(data-app-appearance...)等写法的代码都会被判为违规见 audit-design-system.js。在应用入口 main.js 中可以看到这套运行时的完整调用链setupAppTheme()读取app.themedefault/dark/system并监听原生主题变化事件getCurrentAppAppearance()从store.state.app.config.appAppearance读取外观并通过normalizeAppAppearance归一化getCurrentWorkspaceAccent()从currentSite.config.workspaceAccent读取当前站点的强调色并经normalizeWorkspaceAccent归一化不支持的持久化值统一回落到defaultapplyWorkspaceAccent()不仅更新主文档还会遍历iframe[id$_ifr], iframe#plugin-settings-root等嵌入文档把外观属性同步写入每个 iframe 的 document —— 这正是 DESIGN.md 所述app-appearance.js 是主文档与嵌入文档外观属性的单一运行时所有者的落地方式。色彩体系OKLCH 基元 语义角色 独立调校的深浅色1. 记法来源与兼容策略DESIGN.md 的色彩章节阐述了三条原则蓝色尺度承担应用身份与交互强调中性尺度承担工作表面、文本、边框、控件与集合collection区域私有的品牌brand与中性neutral基元统一用OKLCH书写迁移中的调色板与状态角色使用 OKLCH而刻意保持不变的兼容角色保留原有 HEX/RGBA 记法例如button-danger-bg-hover: #CD1613、overlay: rgba(28, 29, 35, 0.85)共享语义角色shared semantic roles是调色板palettes与组件之间的治理接口 —— 组件只消费语义角色不直接引用基元色。2. 状态色与高亮色的独立调校color-danger、color-success、color-warning三个状态色使用独立调校的 OKLCH 值例如浅色下分别是--color-danger: oklch(59% 0.234 29); --color-success: oklch(70% 0.148 154); --color-warning: oklch(82% 0.167 86);color-highlight实心高亮是半透明高亮效果的源头而color-highlight-surface高亮表面与警告状态保持独立——内容强调不能继承状态语义。静态的黑与白 OKLCH 基元通过 CSS相对颜色语法relative color syntax组合出各类带 alpha 的颜色阴影、scrim、反色加载指示器。在 publii.css 中可以看到实际写法--shadow-sm: 0 0 1px oklch(from var(--shadow-color) l c h / 6%), 0 2px 6px oklch(from var(--shadow-color) l c h / 3%); --shadow-md: 0 2px 10px -3px oklch(from var(--shadow-color) l c h / 10%), 0 4px 6px -4px oklch(from var(--shadow-color) l c h / 10%);透明度是局部效果不需要为每个 alpha 值单独建立全局 token 或 RGB 通道 token。3. 侧边栏的透明覆盖层侧边栏的 hover、active 与同步sync表面使用半透明白色覆盖层例如浅色下--sidebar-link-bg-hover: oklch(100% 0 0 / 14%); --sidebar-link-bg-active: oklch(100% 0 0 / 14%); --sidebar-sync-btn-bg: oklch(100% 0 0 / 20%);这样做的原因是半透明白在任意工作区强调色上都能保持层级关系而无需为每个强调色硬编码一个专属字面量without embedding an accent-specific literal。4. appAppearance 与 workspaceAccent 的职责边界appAppearance重映射完整的共享视觉语言色彩角色、排版、间距、形状、深度、动效组件不需要选择器覆盖selector overrides即可参与某个应用外观。workspaceAccent是appAppearance内部的每站点偏好它只重映射该外观的私有品牌调色板中性调色板、状态调色板、排版、间距、组件契约以及生成站点的输出一律不变Dont useworkspaceAccentto change neutral or status palettes, typography, spacing, or generated-site output。default强调色使用当前活动外观的基础调色板不支持的持久化值回落到default——这由normalizeWorkspaceAccent中的supportedAccents.includes(workspaceAccent)判断保证。5. 12 种工作区强调色的注册顺序Publii 注册表保持前七个彩色强调色为可读递进readable progressiondefault、indigo、violet、magenta、crimson、rose、orange随后是更偏色调感的emerald、petrol、navy、graphite、midnight。设置界面WorkspaceAccentPicker.vue直接按注册表顺序渲染——它调用getSupportedWorkspaceAccents(appAppearance)获取注册列表再与本地化的名称映射settings.workspaceAccentIndigo等组合。6. 关键 Token 的浅色/深色取值文档给出了完整的 Token 对照表以下摘取其中最具代表性的几组完整 90 行表格请直接阅读 DESIGN.mdTokenDefault/lightDarkprimary/color-primaryoklch(63% 0.182 251)oklch(64% 0.199 254)workspaceAccent/indigo primaryoklch(57% 0.205 275)oklch(55% 0.205 275)workspaceAccent/midnight primaryoklch(42% 0.030 268)oklch(52% 0.045 268)bg-primaryoklch(100% 0 0)oklch(22% 0.010 277)bg-siteoklch(97% 0.004 286)oklch(22% 0.010 277)color-text-mutedoklch(53% 0.019 271)oklch(49% 0.032 278)link-primary-coloroklch(52% 0.148 251)oklch(69% 0.165 252)input-border-focusoklch(63% 0.182 251)oklch(64% 0.199 254)sidebar-bg-topoklch(58% 0.165 251)oklch(20% 0.010 285)button-danger-bg-hover#CD1613#A90001overlayoklch(0% 0 0 / 35%)rgba(28, 29, 35, 0.85)text-selection-color#B6D8FD#94B6DB需要注意文档的明确要求浅色与深色共享的是语义角色名与组件契约而非字面颜色值深色方案是独立调校的调色板有自己的对比度、表面、边框、hover 与禁用状态关系不能通过对浅色方案做机械的变暗、反相或改透明度来推导。另一个值得注意的合规要求是每个非默认强调色都要分别针对浅色与深色独立调校且必须满足语义控件、链接、同步操作、焦点指示器所用的自动化WCAG AA对比关系。而原本的默认蓝是刻意的视觉兼容例外deliberate visual-compatibility exception——保留既有渲染优先于迁移其对比度不得被当作新强调色的标准。这一点也解释了为什么primary浅色63% L与midnight42% L在对比度表现上差异巨大却都合规。主题层文件归属与空态插画1. 外观文件的归属文档规定每个appAppearance拥有 app/src/css/appearances/ 下的同名 CSS 文件而 css-variables.css 只保留与外观无关的技术基础technical foundations。当前仓库只注册了一个外观publii对应文件 publii.css其中html[data-app-appearancepublii]定义共享视觉语言排版、圆角、间距、动效、输入焦点环、强调色预览 tokenhtml[data-app-appearancepublii][data-color-schemelight]与[data-color-schemedark]分别定义两套完整调色板每个强调色通过html[data-app-appearancepublii][data-color-scheme…][data-workspace-accent…]覆盖--palette-brand-*私有品牌基元--palette-brand-*如--palette-brand-55: oklch(63% 0.182 251)与--palette-neutral-*是私有基元只能在外观文件内定义与使用语义角色如--color-primary: var(--palette-brand-55)才允许被组件消费。css-variables.css中的技术基础包括全局堆叠层级--layer-panel: 9999到--layer-alert: 100006、工作区尺寸--wrapper-width、--topbar-height、--app-sidebar-width、共享按钮尺寸--button-height: 4rem、--button-height-small: 3.6rem、--button-height-large: 5.2rem、--button-height-sidebar: 4.6rem以及max-width: 1600px视口下的紧凑尺寸覆盖。2. 当前 default 实现的含义文档声明The currentdefaultimplementation is the light scheme of thepubliiapplication appearance.——当前default主题即publii外观的浅色方案既有源码名称在兼容迁移期间继续有效。这一点在 publii.css 中体现为双选择器html[data-themedefault]:not([data-app-appearance]), html[data-app-appearancepublii][data-color-schemelight] { ... }3. 空态插画Empty-state illustrations的契约空态插画使用每个插画一个内联 SVG 符号one inline SVG symbol per illustration的方式。其表面、边框、弱化细节与阴影消费与应用 UI 相同的语义角色品牌化细节消费color-primary。因此它们必须通过继承的 CSS 自定义属性响应colorScheme与workspaceAccent——单独维护浅色/深色两套插画资产、由组件自行切换主题都不在契约范围内。排版与布局契约1. 排版应用外壳chrome与控件使用共享的系统无衬线字体栈-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif衬线Georgia 系列与等宽Menlo/Monaco/Consolas 系列字体栈用于应用自有内容与代码场景共享 UI 字号1.2rem(xs)、1.3rem(sm)、1.4rem(md)、1.6rem(lg)、2.4rem(xl)字重300/400/500/600/700基础行高1.5。这些都由每个appAppearance持有owned编辑器内容字号独立持有持久化的编辑器字体偏好使用 CSS 通用族sans-serif或serif。由于编辑器内容可能存在于不加载应用 token 表的文档中跨文档字体偏好不得依赖应用自定义属性store 边界在加载或更新配置时会归一化遗留 token 值。2. 布局与紧凑间距尺度主工作区采用持久站点侧边栏 独立滚动内容区侧边栏、内容包装器、顶栏、选项侧边栏的尺寸属于外观无关的技术基础见css-variables.css。外观持有的紧凑间距尺度是space-1至space-16数字后缀是 0.25rem 基准单位的倍数Token值Token值space-10.25remspace-61.5remspace-20.5remspace-82remspace-30.75remspace-123remspace-41remspace-164rem规则当确切值存在于尺度中时margin/padding/gap必须使用这些 tokenspace-unit0.25rem保留用于比例计算视觉微调optical corrections与结构性尺寸保持局部化不要为一个一次性度量创建全局 token。层级、形状与组件语义1. 深度Elevation Depth层级主要依赖表面对比与边框而非阴影。shadow-sm与shadow-md保留给抬升的控件、面板与覆盖层向上展开的按钮菜单用shadow-md-up在每个色彩方案中镜像shadow-md的垂直偏移导航磁贴navigation tiles静止时用shadow-smhover/键盘聚焦时用shadow-mdshadow-color支持组合编辑器阴影。视口级堆叠遵循共享顺序panel → editor help → overlay → editor toolbar → popup → toast → dialog → alert具体数值见css-variables.css中的--layer-*。数字 z-index 只在组件自有堆叠上下文内作为局部兄弟排序有效。2. 形状Shapes外观持有的基础圆角半径--radius-base: 6px管辖矩形控件与容器导航磁贴、已安装的插件/主题/语言卡片、共享FieldsGroup面板使用基础半径的 1.5 倍当前外观下为 9px圆形控件与全圆角搜索框属于组件特定形状。3. 关键组件语义DESIGN.md 的 Components 章节对共享组件约定了细粒度的属性契约核心要点导航磁贴hover 与键盘聚焦时放大到 1.03 倍键盘焦点保留可见轮廓prefers-reduced-motion下禁用缩放与过渡。Tools 是七个固定导航链接的网格与 Server 共享 navigation-tiles.css按钮Button把intent、appearance、size、width、layout分离为独立属性小按钮默认 XS16px图标其他尺寸默认 S20pxloading/active/disabled/square/back/icon-only 是独立布尔状态禁止用空格分隔的变体字符串编码多个关注点。按钮是原生button元素键盘焦点用输入焦点角色的 2px 圆环表示指针交互不显示焦点环共享动作尺寸css-variables.css持有标准/拆分按钮高 42px、小按钮 36px、侧边栏动作 48px视口宽度 ≤1600px 时分别压缩为 38px、32px、44px。大型对话框动作与底部动作高 52px≤1600px 时 50px两种视口下都保留 20px 水平内边距。TinyMCE 对话框底部动作、块编辑器高级设置与链接对话框底部动作都通过共享大按钮高度消费同一套尺寸分别经 editor-overrides.css 与共享样式输入类控件TextInput分离原生 input 类型、视觉尺寸、键盘拦截与布尔invalidField用normal/small间距Dropdown、RadioButton、Switcher均以value/v-model为唯一值契约selected、checked等初始状态别名不属于契约Checkbox保持受控基元显式checked、itemvalue与回调 propsImageUpload通过尺寸契约暴露default与smallButtonDropdown、ActionMenu均以原生按钮 键盘可导航菜单实现ProgressBar使用语义default/success/danger/warningintent而非颜色名ProgressOrb是相位感知的同步指示器校验过的phase、数值progress、独立indeterminate布尔与message其圆盘复用空态插画的表面角色辉光/圆环/图标派生自品牌与状态角色动效纯 CSS 且在 reduced motion 下停止flat外观保留圆环与图标用于紧凑预览与缩略图再生成状态面板空闲时保持中性Overlay用default/drop-zone外观而非颜色命名布尔Icon使用既有具名尺寸集与nonInteractive布尔自定义类扩展保留用于受控文件类型类Collection显式接收列数CollectionCell使用经过校验的视觉variant行状态如主作者为布尔Tabs用显式vertical/horizontal方向与独立scrollable能力。4. Collection 页面与批量选择Collection填充相对定位的弹性包装器并自己持有滚动视口不设置页面级顶部偏移、不从宽度中扣除页面内边距父视图把该包装器放在头部、过滤器与进度指示器之下Posts、Pages、Authors、Tags、Menus、Backups 共享 collection-page.css不可收缩的头部区在页面 3rem 顶部内边距之下预留 9rem保证默认的 12rem 列表起点空态保留页面内边距Plugins 与 File Manager 使用同一 Collection 包装器且无本地定位覆盖头部复选框跨 Posts/Pages/Tags/Authors/Menus/Backups/File Manager/Plugins 共享CollectionCheckboxes与Checkbox空 全未选横杠 部分选中勾选 全部选中点击空/混合态选中当前过滤结果中所有合格行含超出渲染上限的行主作者与 File Manager 目录被排除Pages 在编辑层级时禁用选择。5. 侧边栏与站点选择器侧边栏是主要的品牌表面既有渐变、反色内容、站点上下文、预览动作与同步动作保留为 Publii 应用外观的一部分。站点选择器拥有上下文站点切换与在新应用窗口打开所选站点动作应用设置只包含持久化偏好即时的窗口管理命令留在应用菜单与站点选择器中。6. 标准确认/信息对话框文档把 Confirm.vue主题变更确认与 ToolsPluginDetails.vue插件详情列为标准带标题对话框的参照实现要求复用 popup-common.css 处理覆盖层、表面、圆角、排版与标题节奏标题作为独立的纯文本h1置于正文之上居中、font-size-ui-lg、font-weight-semibold、共享外边距space-4 0 space-12内容区space-16内边距描述/说明/元数据左对齐结构化细节可用定义列表与既有状态徽章标准对话框宽 60rem受可用视口约束长内容在对话框内换行滚动底部动作始终可用底部动作用共享p-button两个动作sizemediumsquarewidthhalf单个动作widthfull取消动作appearancepopup-cancel破坏性确认用 danger intent通过标题或共享确认组件的dialogLabel给予对话框可访问名称管理初始焦点与 Tab 包含、支持 Escape、关闭时焦点返回触发器。在 Confirm.vue 中可以看到dialogLabel同时驱动roledialog、aria-modal与aria-label的实际绑定。自动化治理audit:design-system 的检查清单1. 命令入口设计系统审计是常规测试链的一环package.json 中的脚本定义test: npm run audit:design-system node_modules/.bin/mocha \build/scripts/specs/**/*.spec.js\ ..., audit:design-system: node build/scripts/audit-design-system.js即npm test会在后端测试套件之前先运行设计系统审计此外文档要求合并渲染层样式变更前必须运行npm run audit:design-system并指出生产渲染构建是对共享 token 或基元变更的最终结构验证。2. 审计覆盖的检查项对照 audit-design-system.js审计强制执行以下治理规则全局自定义属性引用可解析Unresolved custom property——通过遍历所有.css/.js/.vue文件收集定义与var()引用做闭包校验拒绝未使用或遗留的全局 token——legacyTokens列表包含--app-font-base、--border-radius、--box-shadow-medium、--color-primary-rgb、--font-base、--shadow、--spacing等 20 个已退役 token任何残留都会报错每个已注册外观必须有匹配的 CSS 文件且共享视觉语言 token 完整——appearanceVisualTokens列出 29 个必需 token字体族、字号、字重、行高、--radius-base、--space-unit与space-1…16、--transition-default深浅色方案间语义契约对齐——每个外观必须恰好定义一条 light 规则与一条 dark 规则且两组 token 一一对应light-only / dark-only token 都是错误每个已注册非默认强调色必须提供完整的浅/深 OKLCH 品牌调色板与预览 token——预览 token 命名--workspace-accent-name-preview并校验品牌 token 在深浅色间的奇偶对齐、不越界覆盖非品牌 token、全部使用字面 OKLCH 值对语义控件与链接做 WCAG AA 对比度验证——脚本内置 OKLCH→sRGB 转换与相对亮度计算oklchToLinearSrgb/getContrastRatio对每个强调色在浅/深两套方案中校验 12 组前景/背景配对如浅色 primary control 4.5:1、深色 focus indicator 3:1并输出:1实测值私有调色板只允许在外观文件内——--palette-*token 一旦被外观文件之外引用即报错privatePaletteReferences禁止新字面颜色进入应用自有样式——通过collectOwnedColorLiterals与 design-system-baseline.json 同目录的基线文件比对允许债务减少reductions新增字面量即报错。固定文件类型色、透明图稿等局部技术色可保留为组件自有vendor 资产、schema 颜色数据、品牌图稿与编辑器自有样式在各自迁移阶段前被排除colorLiteralExemptions规范间距与排版值必须使用共享 token——spacingLiteralPattern会把 margin/padding/gap 中的0.25/0.5/0.75/1.5/1/2/3/4rem字面量判为违规typographyContracts同样检查1.2/1.3/1.4/1.6/2.4rem字号、300–700 字重与1.5行高的字面量拒绝已退役的共享组件 props——legacyComponentProps列出p-button: type、dropdown: selected、switcher: checked、overlay: hasBorder/isBlue、tabs: isHorizontal/isScrollable、text-input: properties/ariaInvalid、progress-bar: color/stopped、icon: properties、collection: formIsOpened/itemsCount等任何.vue模板中残留这些属性即报错外观属性单一所有者——任何文件除app-appearance.js本身直接setAttribute(data-theme…)等均报错并校验app-appearance.js确实对四个属性都执行了setAttribute注册表与 CSS 的双向一致性——已注册但无 CSS 覆盖、有 CSS 覆盖但未注册、重复注册、注册表首个强调色不是 default 均为错误。3. 颜色基线color-literal baseline机制基线文件记录现有局部异常而不把它们提升为设计 tokennpm run audit:design-system -- --print-color-baseline可输出当前基线 JSON{ version, colorLiterals }。审计比对当前与基线后新增字面量 → 错误减少 → 提示Color-literal debt reduced in N place(s)并建议在确有意图时下调基线。Dos and Donts契约的核心红线文档末尾给出完整的规范清单这里按主题归类提炼应当Do设计系统基础工作期间保持当前渲染外观不变将siteTheme、appAppearance、colorScheme作为三个独立概念使用把workspaceAccent视为appAppearance内部的每站点品牌调色板覆盖新强调色必须在两个色彩方案中对着真实语义前景/背景对做验证WCAG AA为每个appAppearance定义完整的视觉语言、浅色与深色契约当仓库内所有消费者都能原子迁移时删除内部遗留 token兼容别名只留给公开或分阶段 API只对三类值建立全局 token跨组件共享的语义角色、随应用外观变化的值、被反复使用的基础设施编辑器专属布局与编辑器自有组件契约留在当前规范化范围之外同时让共享 token 流经编辑器外壳对 schema 驱动的组件选项如分隔线尺寸迁移时先升级显式 settings-schema 版本在主题与插件可原子迁移前保留兼容契约视口级表面用共享层级角色数字堆叠只在组件自有上下文内使用按钮通过显式的 intent、appearance、size、width、layout、state props 配置。禁止Dont把应用外观称为主题或模板用workspaceAccent改变中性/状态调色板、排版、间距或生成站点输出在存在共享视觉角色时让应用外观依赖内部组件选择器在兼容迁移中用局部字面量替换共享视觉角色把每个局部度量、阴影或一次性颜色镜像成新的全局 token——在它们获得共享语义角色之前保持组件自有。结语从契约文档到可验证的工程实践DESIGN.md 的独特之处在于它不止是一份设计说明而是一份带有自动化执行机制的规范性契约app-appearance.js是运行时唯一写入口appearances/publii.css是唯一实现载体audit-design-system.js则把语义角色对齐、OKLCH 基元约束、深浅色契约、WCAG AA 对比度、字面量债务、遗留 token 与退役 props 全部纳入 CI 检查。对 Publii 的贡献者而言理解这份契约意味着改样式先查css-variables.css是否已有对应 token、新增视觉内容优先消费语义角色而非写死颜色、任何外观级改动都要让npm run audit:design-system通过并以生产构建作为最终验证。这套契约文档 → 单一运行时 → 外观文件 → 自动化审计的四层结构本身就是一个桌面应用设计系统可落地、可迁移、可验证的参考范式。赞分享开发工具前端【免费下载链接】PubliiThe most intuitive Static Site CMS designed for SEO-optimized and privacy-focused websites.项目地址https://gitcode.com/gh_mirrors/pu/Publii点击查看免费下载相关推荐OpenDesign Neutral Modern 设计系统源码证据与 Token 契约从 DESIGN.md 到 tokens.css 的可审计生成链路OpenDesign Neutral Modern 设计系统源码证据与 Token 契约从 DESIGN.md 到 tokens.css 的可审计生成链路 OAI 应用人工智能AI 技能设计系统媒体生成open-design 设计系统包契约详解manifest.json、DESIGN.md 与四层 Token 体系open design 设计系统包契约详解manifest.json、DESIGN.md 与四层 Token 体系 本文以 open design 仓库中的AI 应用人工智能AI 技能设计系统媒体生成Open Design Publication 设计系统DESIGN.md 从编辑排版风格到 Token 契约的完整落地Open Design Publication 设计系统DESIGN.md 从编辑排版风格到 Token 契约的完整落地 本篇以 design systemsAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考