AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载本指南以仓库内 design-systems/notion/DESIGN-ko.md 为骨架结合同目录下的tokens.css、design-tokens.json、tailwind-v4.css、components.manifest.json等实现文件展开完整还原并深化这套Notion 风格设计系统的视觉语言、令牌契约与落地方式。导读Notion 风格设计系统类别生产力 SaaS是 OpenDesign 设计系统仓库中一套温暖极简主义的完整视觉规范以温暖中性色、自定义 NotionInter 字体、超细低语级边框和多层低透明度阴影为核心模拟无干扰空白画布的阅读体验。本篇文章将带你逐层拆解这套系统的视觉主题、色彩角色、排版层级、组件样式、布局/深度/响应式规范与无障碍设计并对照仓库中真实提交的 CSS 令牌、JSON 契约与组件清单说明如何在实际页面和 Agent 生成任务中复刻该风格——读完即可直接用令牌变量写出一套可交付的 Notion 风格界面。1. 视觉主题与氛围温暖纸张而非无菌玻璃Notion 官网本身实现了产品哲学——一块不受打扰的空白画布。这套设计系统的第一原则是温暖的中性色不用冷灰色而是让灰阶带上黄褐底色营造高品质纸张般的亲切极简而非无菌玻璃。在 tokens.css 中这一意图被直接写成了令牌语义--bg: #ffffff; /* 纯白画布 */ --surface: #f6f5f4; /* 温暖白——区块交替背景 */ --surface-warm: var(--surface); /* 别名同一温暖白层级 */ --fg: rgba(0, 0, 0, 0.95); /* 近黑文本——柔和纯黑 */ --fg-2: #31302e; /* 温暖深色——表面上的标题 */ --muted: #615d59; /* 温暖灰 500——次要文本 */ --meta: #a39e98; /* 温暖灰 300——占位符/说明 */核心特征可归纳为五点NotionInter改良版 Inter在展示级尺寸使用激进负字距64px 时 -2.125px产生压缩、精确的标题温暖中性色板灰色带黄褐底色#f6f5f4温暖白、#31302e温暖深色近黑文本rgba(0,0,0,0.95)不是纯黑制造微妙的温度感超细边框1px solid rgba(0,0,0,0.1)全局统一低语重量的分隔线多图层阴影栈累计不透明度不超过 0.05深度只能被感知、不能被发现。此外还有三点关键约定Notion Blue#0075de是 CTA 与交互元素唯一的强调色状态指示器使用淡蓝底色的胶囊徽章9999px 圆角8px 基础间距单位配以有机而非机械的刻度。2. 颜色调色板与角色2.1 主色Primary令牌值用途Notion Blackrgba(0,0,0,0.95)/#000000f2主文本、标题、正文95% 不透明度在保证可读性的同时柔化纯黑Pure White#ffffff页面背景、卡片表面、蓝色按钮上的文字Notion Blue#0075de主 CTA、链接色、交互强调——核心 UI 中唯一的饱和色2.2 品牌辅助色Brand Secondary深海军蓝#213183二级品牌色用于强调与深色特性区块使用克制激活蓝#005bab按钮激活/按压态——Notion Blue 的深色变体。在令牌层按压态被实现为更现代的动态计算tokens.css--accent: #0075de; /* Notion Blue——链接、主 CTA */ --accent-on: #ffffff; --accent-hover: #005bab; /* Active Blue——按压状态 */ --accent-active: color-mix(in oklab, var(--accent), black 14%);2.3 温暖中性色阶Warm Neutral Scale温暖白#f6f5f4背景表面着色、区块交替、微妙卡片填充——黄色底色至关重要温暖深色#31302e深色表面背景、深色区块文本比标准灰色更温暖温暖灰 500#615d59次要文本、描述、弱化标签温暖灰 300#a39e98占位符文本、禁用态、说明文字。2.4 语义强调色Semantic Accents青绿#2a9d99成功状态、正向指示器绿色#1aae39确认、完成徽章令牌中直接绑定为--success见 tokens.css橙色#dd5b00警告状态、注意指示器令牌--warn粉色#ff64c8装饰性强调、特性高亮紫色#391c57高级功能、深度强调棕色#523410泥土强调、温暖特性区块。2.5 交互色Interactive链接蓝#0075de主链接色悬停加下划线链接浅蓝#62aef0深色背景上更亮的链接变体焦点蓝#097fe8交互元素的焦点环徽章蓝底#f2f9ff胶囊徽章背景、淡蓝表面徽章蓝字#097fe8胶囊徽章文字为可读性加深。2.6 阴影与深度Shadow Depth卡片阴影4 层栈rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px深阴影5 层栈rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px用于模态框与精选内容低语边框1px solid rgba(0,0,0,0.1)——标准分隔边框用于卡片、分割线、区块。令牌层对应实现为--elev-raised4 层最大不透明度 0.04与--elev-ring0 0 0 1px var(--border)见 tokens.css。3. 排版规则3.1 字体族主字体NotionInter回退链Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI SymbolOpenType 特性展示与标题文本启用lnum等宽数字与locl本地化字形。令牌层为展示/正文/等宽定义了三条字体链tokens.css--font-display: NotionInter, Inter, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif; --font-body: NotionInter, Inter, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SF Mono, JetBrains Mono, Menlo, Monaco, Consolas, monospace;3.2 层级表完整 16 级角色字体尺寸字重行高字距备注展示 HeroNotionInter64px (4.00rem)7001.00紧凑-2.125px最大压缩广告牌级标题展示二级NotionInter54px (3.38rem)7001.04紧凑-1.875px二级 Hero、特性标题区块标题NotionInter48px (3.00rem)7001.00紧凑-1.5px特性区块标题含lnum大字副标题NotionInter40px (2.50rem)7001.50normal卡片标题、特性子区块副标题NotionInter26px (1.63rem)7001.23紧凑-0.625px区块副标题、内容头卡片标题NotionInter22px (1.38rem)7001.27紧凑-0.25px特性卡片、列表标题大字正文NotionInter20px (1.25rem)6001.40-0.125px引言、特性描述正文NotionInter16px (1.00rem)4001.50normal标准阅读文本正文 MediumNotionInter16px (1.00rem)5001.50normal导航、强调 UI 文本正文 SemiBoldNotionInter16px (1.00rem)6001.50normal强标签、激活态正文 BoldNotionInter16px (1.00rem)7001.50normal正文尺寸标题导航/按钮NotionInter15px (0.94rem)6001.33normal导航链接、按钮文字说明NotionInter14px (0.88rem)5001.43normal元数据、二级标签说明 LightNotionInter14px (0.88rem)4001.43normal正文说明、描述徽章NotionInter12px (0.75rem)6001.330.125px胶囊徽章、标签、状态文字微标签NotionInter12px (0.75rem)4001.330.125px小元数据、时间戳该 16 级量表在令牌层被压缩映射到 8 个槽位--text-xs12px →--text-4xl64px54px 二级 Hero 介于--text-4xl与--text-3xl之间、按需在组件中内联出现tokens.css。3.3 四项排版原则尺度压缩展示级负字距随字号递减——64px 为 -2.125px26px 为 -0.625px16px 恢复 normal。给标题密度给正文可读性4 字重体系400正文/阅读、500UI/交互、600强调/导航、700标题/展示比多数系统更宽的跨度实现精细层级温暖缩放字号越大行高越紧——正文 1.50、副标题 1.23~1.27、展示 1.00~1.04形成更密集、更有冲击力的标题徽章微追踪12px 徽章文字使用全系统唯一的正字距 0.125px让小字更舒展易读。4. 组件样式4.1 按钮Buttons主按钮Primary Blue背景#0075deNotion Blue文字#ffffff内边距 8px 16px圆角 4pxsubtle边框1px solid transparent悬停背景变深为#005bab激活scale(0.9)焦点2px solid焦点描边 var(--shadow-level-200)阴影用途主 CTAGet Notion free、Try it。次按钮Secondary / Tertiary背景rgba(0,0,0,0.05)半透明温暖灰文字#000000近黑8px 16px 内边距、4px 圆角悬停文字变色 scale(1.05)激活scale(0.9)用途二级动作、表单提交。幽灵/链接按钮Ghost / Link透明背景文字rgba(0,0,0,0.95)悬停下划线用途三级动作、行内链接。胶囊徽章按钮Pill Badge背景#f2f9ff淡蓝文字#097fe84px 8px 内边距9999px 全胶囊圆角12px 字重 600用途状态徽章、特性标签、New 标记。在 components.manifest.json 中按钮组被登记为.btn/.btn-primary/.btn-secondary/.btn-ghost并记录其令牌依赖为--accent-hover、--ease-standard、--font-display、--motion-fast、--radius-sm、--space-2、--text-sm悬停/激活/焦点态分别对应.btn-primary:hover、.btn:active、.btn:focus-visible选择器。4.2 卡片与容器Cards Containers背景#ffffff边框1px solid rgba(0,0,0,0.1)低语边框圆角 12px标准卡片、16px精选/Hero 卡片阴影使用 4 层栈见 2.6悬停时阴影微妙增强图片卡片顶部 12px 圆角图片占满上半部。组件清单将.card与暖色变体.card-warm归入卡片与面板组核心令牌引用为--elev-raised.card:hover单独注册为悬停态选择器。4.3 输入框与表单Inputs Forms背景#ffffff文字rgba(0,0,0,0.9)边框1px solid #dddddd内边距 6px圆角 4px焦点蓝色描边环--focus-ring0 0 0 3px rgba(9,127,232,0.3)占位符温暖灰#a39e98--meta。表单字段组.field、.field input、.field input::placeholder、.field input:focus、.field label的令牌依赖为--accent、--bg、--focus-ring、--radius-sm等见 components.manifest.json。4.4 导航Navigation白色底干净的横向导航无 sticky品牌 Logo 左对齐33×34px 图标 字标链接NotionInter 15px 字重 500~600近黑文本悬停变化为var(--color-link-primary-text-hover)CTA右侧对齐蓝色胶囊按钮Get Notion free移动端汉堡菜单折叠产品下拉为多级分类菜单。4.5 图片处理Image Handling产品截图带1px solid rgba(0,0,0,0.1)边框顶部圆角图片12px 12px 0px 0px仪表盘/工作区预览截图占据特性区块主导位置Hero 插画后衬温暖渐变背景装饰性角色插画。4.6 特色组件Signature Components带插画的特性卡片大尺寸插画头如神奈川海浪、产品 UI 截图12px 圆角 低语边框标题 22px 字重 700、描述 16px 字重 400跨区块场景提供温暖白#f6f5f4背景变体。信任条 / Logo 网格品牌色企业 Logo受信任团队区块横向滚动或网格布局展示团队数量指标展示大数字 描述模式。指标卡片Metric Card大数字展示如 $4,200 ROINotionInter 40px 字重 700下方温暖灰正文描述低语边框卡片容器。5. 布局原则5.1 间距系统Spacing System基础单位 8px刻度2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px含小数微调值5.6px、6.4px的非严格有机刻度。令牌层固化为基础刻度--space-1(4px) →--space-12(48px)并为区块节奏单独定义三档纵向间距tokens.css--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --section-y-desktop: 80px; /* 桌面区块纵向节奏 */ --section-y-tablet: 48px; --section-y-phone: 32px;5.2 网格与容器Grids Containers最大内容宽度约 1200px令牌--container-max: 1200pxHero居中对齐单列 充足顶部内边距80~120px特性区块卡片 2~3 列网格跨区块交替使用整宽温暖白#f6f5f4区块背景代码/仪表盘截图由低语边框包裹。容器在令牌层还有三档 guttertokens.css桌面 24px、平板 16px、手机 12px。5.3 留白哲学Whitespace Philosophy充足垂直节奏主区块间 64~120px——Notion 用宽阔纵向内边距让内容呼吸温暖交替排布白色区块与温暖白#f6f5f4区块交替无强烈色块断裂地形成柔和视觉节奏内容优先密度正文文本块紧凑行高 1.50但被足够留白环绕形成留白海洋中易读的内容岛屿。5.4 圆角比例Border-Radius Scale档位值用途Micro4px按钮、输入框、功能交互元素Subtle5px链接、列表项、菜单项Standard8px小卡片、容器、行内元素Comfortable12px标准卡片、特性容器、图片顶部Large16pxHero 卡片、精选内容、推广块Full Pill9999px徽章、胶囊、状态指示器Circular100%标签指示器、头像令牌层映射为--radius-sm: 4px、--radius-md: 8px、--radius-lg: 12px、--radius-pill: 9999pxtokens.css。6. 深度与高度Depth Elevation层级处理用途平坦L0无阴影、无边框页面背景、文本块低语L11px solid rgba(0,0,0,0.1)标准边框、卡片描边、分割线软卡片L24 层阴影栈最大不透明度 0.04内容卡片、特性块深卡片L35 层阴影栈最大不透明度 0.0552px 模糊模态框、精选面板、Hero 元素焦点无障碍2px solid var(--focus-color)描边所有交互元素的键盘焦点阴影哲学Notion 的阴影系统使用多个低不透明度图层0.01~0.05累加出自然、柔和的高度。4 层卡片阴影横跨 1.04px 到 18px 模糊形成深度渐变而非单层硬阴影5 层深阴影延伸到 0.05 不透明度、52px 模糊产生接近自然光的环境遮蔽ambient occlusion。这种分层法的结果是元素像是嵌入页面而非悬浮其上。装饰性深度Hero 区块装饰性角色插画俏皮手绘风格区块交替白色 ↔ 温暖白#f6f5f4背景过渡无硬性区块边框——分隔来自背景色变化与间距。7. 响应式行为7.1 断点表名称宽度主要变化移动端小400px紧凑单列、最小内边距移动端400~600px标准移动端、堆叠布局平板小600~768px2 列网格起步平板768~1080px完整卡片网格、扩展内边距桌面小1080~1200px标准桌面布局桌面1200~1440px完整布局、最大内容宽度大桌面1440px居中、充足边距7.2 触摸目标Touch Targets按钮使用舒适内边距垂直 8px~16px导航链接 15px、间距合理胶囊徽章为触摸目标保留水平 8px 内边距移动端菜单切换使用标准汉堡按钮。7.3 折叠策略Collapse StrategyHero64px 展示 → 40px → 移动端 26px按比例保留字距导航横向链接 蓝色 CTA → 汉堡菜单特性卡片3 列 → 2 列 → 单列堆叠产品截图响应式图片保持宽高比信任条 Logo网格 → 移动端横向滚动页脚多列 → 单列堆叠区块间距80px → 移动端 48px。7.4 图片行为工作区截图在所有尺寸下保持低语边框Hero 插画按比例缩放产品截图使用响应式图片与一致圆角整宽温暖白区块保持 edge-to-edge 处理。8. 可访问性与状态8.1 焦点系统Focus System所有交互元素都有可见焦点指示器焦点描边焦点色 阴影等级 200 的2px solid所有交互组件支持 Tab 导航高对比文本白底近黑文字超过 WCAG AAA14:1 对比度。8.2 交互状态Interactive States默认带低语边框的标准外观悬停文本变色、按钮scale(1.05)、链接下划线激活/按压scale(0.9)变换 更深的背景变体焦点蓝色描边环 阴影增强禁用温暖灰#a39e98文字 降低不透明度。8.3 颜色对比实测值来自原规范白底主文本rgba(0,0,0,0.95)约 18:1白底次要文本#615d59约 5.5:1WCAG AA白底蓝色 CTA#0075de约 4.6:1大字文本 WCAG AA徽章底#f2f9ff上徽章字#097fe8约 4.5:1大字文本 WCAG AA。9. 在 OpenDesign 仓库中的落地形态从 DESIGN 文档到令牌契约本套系统不是孤立的 Markdown 规范而是 OpenDesign Design System 2.0 包结构中的一个完整可交付包。仓库中 design-systems/notion/manifest.json 声明了该包的完整契约design: DESIGN.md视觉意图、约束与反模式tokens: tokens.css令牌绑定的唯一事实来源designTokens: design-tokens.json契约审计输出tailwind: tailwind-v4.cssTailwind v4 绑定层components: components.html组件参考 fixturecomponentsManifest: components.manifest.json组件清单source:source/evidence.md、source/tokens.source.json、source/token-contract.report.json来源证据与回填审计。9.1 令牌契约审计56 个令牌、满分通过design-tokens.json 对令牌做了机器审计共 56 个令牌全部有声明来源其中 26 个 A1 身份级、26 个 A2 级、4 个 B-slot 级、18 个 A1 结构级评分 100、评级excellent、recommendRebuild: false。这意味着每个令牌都能回溯到 tokens.css 的具体声明行——例如--bg回溯到tokens.css:31、--elev-raised回溯到tokens.css:110。9.2 Tailwind v4 绑定层tailwind-v4.css 通过theme将令牌映射为 Tailwind 工具类--color-bg/--color-surface/--color-accent等颜色、--text-xs~--text-4xl字号、--shadow-raised阴影、--duration-fast动效等。文件头明确声明从 tokens.css 派生tokens.css 是事实来源要求修改令牌必须回改源文件而非绑定层。9.3 使用顺序摘自 USAGE.md按照 USAGE.md 的推荐阅读顺序使用该包先读 USAGE.md 理解包契约再读 DESIGN.md 掌握视觉意图、约束与反模式把tokens.css粘贴到第一个 artifact 的style块最前面再写组件 CSS用components.manifest.json做组件清单速查需要精确选择器或状态时打开components.html需要视觉检查时查看preview/页面preview/colors.html、preview/typography.html、preview/spacing.html。同时它给出两条硬性纪律Do——原样保留 schema 令牌名以保证跨品牌切换可靠、用--accent承担主操作/链接/焦点、优先复用已有组件组、把source/文件当作回填审计证据Avoid——不要在:root令牌块之外写裸十六进制色值、不要脱离tokens.css单独重定义 Tailwind 或令牌值、不要声称存在原始上游来源证据、不要添加components.html与 DESIGN.md 之外的组件配方。10. Agent 提示指南Prompt Guide10.1 快速颜色参考主 CTANotion Blue#0075de背景纯白#ffffff备用背景温暖白#f6f5f4标题文本近黑rgba(0,0,0,0.95)正文文本近黑rgba(0,0,0,0.95)次要文本温暖灰 500#615d59弱化文本温暖灰 300#a39e98边框1px solid rgba(0,0,0,0.1)链接Notion Blue#0075de焦点环焦点蓝#097fe8。10.2 组件 Prompt 示例可直接复用Hero 区块白底 Hero 区块。标题 NotionInter 64px 字重 700、行高 1.00、字距 -2.125px、色rgba(0,0,0,0.95)副标题 20px 字重 600、行高 1.40、色#615d59蓝色 CTA 按钮#0075de、4px 圆角、8px 16px 内边距、白字与幽灵按钮透明背景、近黑文字、悬停下划线。卡片白底卡片、1px solid rgba(0,0,0,0.1)边框、12px 圆角阴影栈rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px标题 NotionInter 22px 字重 700、字距 -0.25px正文 16px 字重 400、色#615d59。胶囊徽章#f2f9ff背景、#097fe8文字、9999px 圆角、4px 8px 内边距、NotionInter 12px 字重 600、字距 0.125px。导航白底 header链接 NotionInter 15px 字重 600、近黑文字右侧对齐蓝色胶囊 CTA Get Notion free#0075de背景、白字、4px 圆角。交替区块布局白色与温暖白#f6f5f4区块交替每区块垂直 64~80px 内边距、最大宽度 1200px 居中区块标题 48px 字重 700、行高 1.00、字距 -1.5px。10.3 迭代八原则Anti-Pattern 清单始终使用温暖中性色——Notion 的灰带黄褐底色#f6f5f4、#31302e、#615d59、#a39e98不要用蓝灰字距随字号缩放64px → -2.125px、54px → -1.875px、26px → -0.625px、16px → normal四种字重400阅读、500交互、600强调、700宣言边框是低语的1px solid rgba(0,0,0,0.1)——绝不加重阴影用 4~5 层单层不透明度不超过 0.05温暖白#f6f5f4区块背景对视觉节奏必不可少状态/标签用胶囊9999px按钮和输入框用 4px 圆角Notion Blue#0075de是核心 UI 唯一饱和色——只在 CTA 和链接上克制使用。11. 从规范到代码的最小实现示例结合 tokens.css 与 components.html 中的参考 fixture一个最小的落地方式是把令牌块粘贴进:root再基于令牌编写组件。下面是一个可直接运行的核心片段完整组件选择器见 components.html 中的.btn-primary、.card、.pill等 43 个选择器:root { --bg: #ffffff; --surface: #f6f5f4; --fg: rgba(0, 0, 0, 0.95); --muted: #615d59; --meta: #a39e98; --border: rgba(0, 0, 0, 0.1); --accent: #0075de; --accent-hover: #005bab; --radius-sm: 4px; --radius-lg: 12px; --radius-pill: 9999px; --elev-raised: rgba(0, 0, 0, 0.04) 0px 4px 18px, rgba(0, 0, 0, 0.027) 0px 2px 7.85px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.93px, rgba(0, 0, 0, 0.01) 0px 0.175px 1.04px; --tracking-display: -0.033em; } .btn-primary { background: var(--accent); color: #ffffff; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background var(--motion-fast) var(--ease-standard); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { transform: scale(0.9); } .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); }12. 查看与验证本系统的仓库路径设计规范主文档design-systems/notion/DESIGN.md另有 17 种语言的翻译版本包括本指南依据的 DESIGN-ko.md令牌事实来源design-systems/notion/tokens.css令牌契约审计design-systems/notion/design-tokens.jsonTailwind v4 绑定design-systems/notion/tailwind-v4.css组件清单与参考design-systems/notion/components.manifest.json、design-systems/notion/components.html使用指南与包清单design-systems/notion/USAGE.md、design-systems/notion/manifest.json视觉预览design-systems/notion/preview/colors.html、typography.html、spacing.html来源证据design-systems/notion/source/evidence.md。以上文件均为仓库只读内容可直接打开查阅系统其余品牌包如 linear-app、notion 同级的 airbnb、stripe 等使用同一套 DESIGN/tokens/components 包结构跨品牌切换只需替换令牌而无需改写组件语义。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载相关推荐OpenDesign 中的 Notion 设计系统温暖极简主义的完整规范与 tokens.css 落地实现OpenDesign 中的 Notion 设计系统温暖极简主义的完整规范与 tokens.css 落地实现 本文以 OpenDesign 仓库内置的 notiAI 应用人工智能AI 技能设计系统媒体生成三分钟掌握XPath神器xpath-helper-plus让你的网页元素定位效率提升300%三分钟掌握XPath神器xpath helper plus让你的网页元素定位效率提升300% 在网页开发和自动化测试的世界里精准的元素定位是每个开发者必须面AI 应用人工智能AI 技能设计系统媒体生成OpenDesign Artistic 设计系统高对比艺术风格的设计令牌、排版体系与组件实战指南OpenDesign Artistic 设计系统高对比艺术风格的设计令牌、排版体系与组件实战指南 本文以 design systems/artistic/DEAI 应用人工智能AI 技能设计系统媒体生成上一篇垂直领域LLM应用实战医疗、法律、金融专业化微调指南下一篇IBM Granite-Vision-4.1-4B终极视觉语言模型轻松实现文档智能提取创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenDesign 中的 Notion 风格设计系统：温暖极简主义的设计令牌、排版体系与组件实现指南
AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载本指南以仓库内 design-systems/notion/DESIGN-ko.md 为骨架结合同目录下的tokens.css、design-tokens.json、tailwind-v4.css、components.manifest.json等实现文件展开完整还原并深化这套Notion 风格设计系统的视觉语言、令牌契约与落地方式。导读Notion 风格设计系统类别生产力 SaaS是 OpenDesign 设计系统仓库中一套温暖极简主义的完整视觉规范以温暖中性色、自定义 NotionInter 字体、超细低语级边框和多层低透明度阴影为核心模拟无干扰空白画布的阅读体验。本篇文章将带你逐层拆解这套系统的视觉主题、色彩角色、排版层级、组件样式、布局/深度/响应式规范与无障碍设计并对照仓库中真实提交的 CSS 令牌、JSON 契约与组件清单说明如何在实际页面和 Agent 生成任务中复刻该风格——读完即可直接用令牌变量写出一套可交付的 Notion 风格界面。1. 视觉主题与氛围温暖纸张而非无菌玻璃Notion 官网本身实现了产品哲学——一块不受打扰的空白画布。这套设计系统的第一原则是温暖的中性色不用冷灰色而是让灰阶带上黄褐底色营造高品质纸张般的亲切极简而非无菌玻璃。在 tokens.css 中这一意图被直接写成了令牌语义--bg: #ffffff; /* 纯白画布 */ --surface: #f6f5f4; /* 温暖白——区块交替背景 */ --surface-warm: var(--surface); /* 别名同一温暖白层级 */ --fg: rgba(0, 0, 0, 0.95); /* 近黑文本——柔和纯黑 */ --fg-2: #31302e; /* 温暖深色——表面上的标题 */ --muted: #615d59; /* 温暖灰 500——次要文本 */ --meta: #a39e98; /* 温暖灰 300——占位符/说明 */核心特征可归纳为五点NotionInter改良版 Inter在展示级尺寸使用激进负字距64px 时 -2.125px产生压缩、精确的标题温暖中性色板灰色带黄褐底色#f6f5f4温暖白、#31302e温暖深色近黑文本rgba(0,0,0,0.95)不是纯黑制造微妙的温度感超细边框1px solid rgba(0,0,0,0.1)全局统一低语重量的分隔线多图层阴影栈累计不透明度不超过 0.05深度只能被感知、不能被发现。此外还有三点关键约定Notion Blue#0075de是 CTA 与交互元素唯一的强调色状态指示器使用淡蓝底色的胶囊徽章9999px 圆角8px 基础间距单位配以有机而非机械的刻度。2. 颜色调色板与角色2.1 主色Primary令牌值用途Notion Blackrgba(0,0,0,0.95)/#000000f2主文本、标题、正文95% 不透明度在保证可读性的同时柔化纯黑Pure White#ffffff页面背景、卡片表面、蓝色按钮上的文字Notion Blue#0075de主 CTA、链接色、交互强调——核心 UI 中唯一的饱和色2.2 品牌辅助色Brand Secondary深海军蓝#213183二级品牌色用于强调与深色特性区块使用克制激活蓝#005bab按钮激活/按压态——Notion Blue 的深色变体。在令牌层按压态被实现为更现代的动态计算tokens.css--accent: #0075de; /* Notion Blue——链接、主 CTA */ --accent-on: #ffffff; --accent-hover: #005bab; /* Active Blue——按压状态 */ --accent-active: color-mix(in oklab, var(--accent), black 14%);2.3 温暖中性色阶Warm Neutral Scale温暖白#f6f5f4背景表面着色、区块交替、微妙卡片填充——黄色底色至关重要温暖深色#31302e深色表面背景、深色区块文本比标准灰色更温暖温暖灰 500#615d59次要文本、描述、弱化标签温暖灰 300#a39e98占位符文本、禁用态、说明文字。2.4 语义强调色Semantic Accents青绿#2a9d99成功状态、正向指示器绿色#1aae39确认、完成徽章令牌中直接绑定为--success见 tokens.css橙色#dd5b00警告状态、注意指示器令牌--warn粉色#ff64c8装饰性强调、特性高亮紫色#391c57高级功能、深度强调棕色#523410泥土强调、温暖特性区块。2.5 交互色Interactive链接蓝#0075de主链接色悬停加下划线链接浅蓝#62aef0深色背景上更亮的链接变体焦点蓝#097fe8交互元素的焦点环徽章蓝底#f2f9ff胶囊徽章背景、淡蓝表面徽章蓝字#097fe8胶囊徽章文字为可读性加深。2.6 阴影与深度Shadow Depth卡片阴影4 层栈rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px深阴影5 层栈rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px用于模态框与精选内容低语边框1px solid rgba(0,0,0,0.1)——标准分隔边框用于卡片、分割线、区块。令牌层对应实现为--elev-raised4 层最大不透明度 0.04与--elev-ring0 0 0 1px var(--border)见 tokens.css。3. 排版规则3.1 字体族主字体NotionInter回退链Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI SymbolOpenType 特性展示与标题文本启用lnum等宽数字与locl本地化字形。令牌层为展示/正文/等宽定义了三条字体链tokens.css--font-display: NotionInter, Inter, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif; --font-body: NotionInter, Inter, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SF Mono, JetBrains Mono, Menlo, Monaco, Consolas, monospace;3.2 层级表完整 16 级角色字体尺寸字重行高字距备注展示 HeroNotionInter64px (4.00rem)7001.00紧凑-2.125px最大压缩广告牌级标题展示二级NotionInter54px (3.38rem)7001.04紧凑-1.875px二级 Hero、特性标题区块标题NotionInter48px (3.00rem)7001.00紧凑-1.5px特性区块标题含lnum大字副标题NotionInter40px (2.50rem)7001.50normal卡片标题、特性子区块副标题NotionInter26px (1.63rem)7001.23紧凑-0.625px区块副标题、内容头卡片标题NotionInter22px (1.38rem)7001.27紧凑-0.25px特性卡片、列表标题大字正文NotionInter20px (1.25rem)6001.40-0.125px引言、特性描述正文NotionInter16px (1.00rem)4001.50normal标准阅读文本正文 MediumNotionInter16px (1.00rem)5001.50normal导航、强调 UI 文本正文 SemiBoldNotionInter16px (1.00rem)6001.50normal强标签、激活态正文 BoldNotionInter16px (1.00rem)7001.50normal正文尺寸标题导航/按钮NotionInter15px (0.94rem)6001.33normal导航链接、按钮文字说明NotionInter14px (0.88rem)5001.43normal元数据、二级标签说明 LightNotionInter14px (0.88rem)4001.43normal正文说明、描述徽章NotionInter12px (0.75rem)6001.330.125px胶囊徽章、标签、状态文字微标签NotionInter12px (0.75rem)4001.330.125px小元数据、时间戳该 16 级量表在令牌层被压缩映射到 8 个槽位--text-xs12px →--text-4xl64px54px 二级 Hero 介于--text-4xl与--text-3xl之间、按需在组件中内联出现tokens.css。3.3 四项排版原则尺度压缩展示级负字距随字号递减——64px 为 -2.125px26px 为 -0.625px16px 恢复 normal。给标题密度给正文可读性4 字重体系400正文/阅读、500UI/交互、600强调/导航、700标题/展示比多数系统更宽的跨度实现精细层级温暖缩放字号越大行高越紧——正文 1.50、副标题 1.23~1.27、展示 1.00~1.04形成更密集、更有冲击力的标题徽章微追踪12px 徽章文字使用全系统唯一的正字距 0.125px让小字更舒展易读。4. 组件样式4.1 按钮Buttons主按钮Primary Blue背景#0075deNotion Blue文字#ffffff内边距 8px 16px圆角 4pxsubtle边框1px solid transparent悬停背景变深为#005bab激活scale(0.9)焦点2px solid焦点描边 var(--shadow-level-200)阴影用途主 CTAGet Notion free、Try it。次按钮Secondary / Tertiary背景rgba(0,0,0,0.05)半透明温暖灰文字#000000近黑8px 16px 内边距、4px 圆角悬停文字变色 scale(1.05)激活scale(0.9)用途二级动作、表单提交。幽灵/链接按钮Ghost / Link透明背景文字rgba(0,0,0,0.95)悬停下划线用途三级动作、行内链接。胶囊徽章按钮Pill Badge背景#f2f9ff淡蓝文字#097fe84px 8px 内边距9999px 全胶囊圆角12px 字重 600用途状态徽章、特性标签、New 标记。在 components.manifest.json 中按钮组被登记为.btn/.btn-primary/.btn-secondary/.btn-ghost并记录其令牌依赖为--accent-hover、--ease-standard、--font-display、--motion-fast、--radius-sm、--space-2、--text-sm悬停/激活/焦点态分别对应.btn-primary:hover、.btn:active、.btn:focus-visible选择器。4.2 卡片与容器Cards Containers背景#ffffff边框1px solid rgba(0,0,0,0.1)低语边框圆角 12px标准卡片、16px精选/Hero 卡片阴影使用 4 层栈见 2.6悬停时阴影微妙增强图片卡片顶部 12px 圆角图片占满上半部。组件清单将.card与暖色变体.card-warm归入卡片与面板组核心令牌引用为--elev-raised.card:hover单独注册为悬停态选择器。4.3 输入框与表单Inputs Forms背景#ffffff文字rgba(0,0,0,0.9)边框1px solid #dddddd内边距 6px圆角 4px焦点蓝色描边环--focus-ring0 0 0 3px rgba(9,127,232,0.3)占位符温暖灰#a39e98--meta。表单字段组.field、.field input、.field input::placeholder、.field input:focus、.field label的令牌依赖为--accent、--bg、--focus-ring、--radius-sm等见 components.manifest.json。4.4 导航Navigation白色底干净的横向导航无 sticky品牌 Logo 左对齐33×34px 图标 字标链接NotionInter 15px 字重 500~600近黑文本悬停变化为var(--color-link-primary-text-hover)CTA右侧对齐蓝色胶囊按钮Get Notion free移动端汉堡菜单折叠产品下拉为多级分类菜单。4.5 图片处理Image Handling产品截图带1px solid rgba(0,0,0,0.1)边框顶部圆角图片12px 12px 0px 0px仪表盘/工作区预览截图占据特性区块主导位置Hero 插画后衬温暖渐变背景装饰性角色插画。4.6 特色组件Signature Components带插画的特性卡片大尺寸插画头如神奈川海浪、产品 UI 截图12px 圆角 低语边框标题 22px 字重 700、描述 16px 字重 400跨区块场景提供温暖白#f6f5f4背景变体。信任条 / Logo 网格品牌色企业 Logo受信任团队区块横向滚动或网格布局展示团队数量指标展示大数字 描述模式。指标卡片Metric Card大数字展示如 $4,200 ROINotionInter 40px 字重 700下方温暖灰正文描述低语边框卡片容器。5. 布局原则5.1 间距系统Spacing System基础单位 8px刻度2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px含小数微调值5.6px、6.4px的非严格有机刻度。令牌层固化为基础刻度--space-1(4px) →--space-12(48px)并为区块节奏单独定义三档纵向间距tokens.css--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --section-y-desktop: 80px; /* 桌面区块纵向节奏 */ --section-y-tablet: 48px; --section-y-phone: 32px;5.2 网格与容器Grids Containers最大内容宽度约 1200px令牌--container-max: 1200pxHero居中对齐单列 充足顶部内边距80~120px特性区块卡片 2~3 列网格跨区块交替使用整宽温暖白#f6f5f4区块背景代码/仪表盘截图由低语边框包裹。容器在令牌层还有三档 guttertokens.css桌面 24px、平板 16px、手机 12px。5.3 留白哲学Whitespace Philosophy充足垂直节奏主区块间 64~120px——Notion 用宽阔纵向内边距让内容呼吸温暖交替排布白色区块与温暖白#f6f5f4区块交替无强烈色块断裂地形成柔和视觉节奏内容优先密度正文文本块紧凑行高 1.50但被足够留白环绕形成留白海洋中易读的内容岛屿。5.4 圆角比例Border-Radius Scale档位值用途Micro4px按钮、输入框、功能交互元素Subtle5px链接、列表项、菜单项Standard8px小卡片、容器、行内元素Comfortable12px标准卡片、特性容器、图片顶部Large16pxHero 卡片、精选内容、推广块Full Pill9999px徽章、胶囊、状态指示器Circular100%标签指示器、头像令牌层映射为--radius-sm: 4px、--radius-md: 8px、--radius-lg: 12px、--radius-pill: 9999pxtokens.css。6. 深度与高度Depth Elevation层级处理用途平坦L0无阴影、无边框页面背景、文本块低语L11px solid rgba(0,0,0,0.1)标准边框、卡片描边、分割线软卡片L24 层阴影栈最大不透明度 0.04内容卡片、特性块深卡片L35 层阴影栈最大不透明度 0.0552px 模糊模态框、精选面板、Hero 元素焦点无障碍2px solid var(--focus-color)描边所有交互元素的键盘焦点阴影哲学Notion 的阴影系统使用多个低不透明度图层0.01~0.05累加出自然、柔和的高度。4 层卡片阴影横跨 1.04px 到 18px 模糊形成深度渐变而非单层硬阴影5 层深阴影延伸到 0.05 不透明度、52px 模糊产生接近自然光的环境遮蔽ambient occlusion。这种分层法的结果是元素像是嵌入页面而非悬浮其上。装饰性深度Hero 区块装饰性角色插画俏皮手绘风格区块交替白色 ↔ 温暖白#f6f5f4背景过渡无硬性区块边框——分隔来自背景色变化与间距。7. 响应式行为7.1 断点表名称宽度主要变化移动端小400px紧凑单列、最小内边距移动端400~600px标准移动端、堆叠布局平板小600~768px2 列网格起步平板768~1080px完整卡片网格、扩展内边距桌面小1080~1200px标准桌面布局桌面1200~1440px完整布局、最大内容宽度大桌面1440px居中、充足边距7.2 触摸目标Touch Targets按钮使用舒适内边距垂直 8px~16px导航链接 15px、间距合理胶囊徽章为触摸目标保留水平 8px 内边距移动端菜单切换使用标准汉堡按钮。7.3 折叠策略Collapse StrategyHero64px 展示 → 40px → 移动端 26px按比例保留字距导航横向链接 蓝色 CTA → 汉堡菜单特性卡片3 列 → 2 列 → 单列堆叠产品截图响应式图片保持宽高比信任条 Logo网格 → 移动端横向滚动页脚多列 → 单列堆叠区块间距80px → 移动端 48px。7.4 图片行为工作区截图在所有尺寸下保持低语边框Hero 插画按比例缩放产品截图使用响应式图片与一致圆角整宽温暖白区块保持 edge-to-edge 处理。8. 可访问性与状态8.1 焦点系统Focus System所有交互元素都有可见焦点指示器焦点描边焦点色 阴影等级 200 的2px solid所有交互组件支持 Tab 导航高对比文本白底近黑文字超过 WCAG AAA14:1 对比度。8.2 交互状态Interactive States默认带低语边框的标准外观悬停文本变色、按钮scale(1.05)、链接下划线激活/按压scale(0.9)变换 更深的背景变体焦点蓝色描边环 阴影增强禁用温暖灰#a39e98文字 降低不透明度。8.3 颜色对比实测值来自原规范白底主文本rgba(0,0,0,0.95)约 18:1白底次要文本#615d59约 5.5:1WCAG AA白底蓝色 CTA#0075de约 4.6:1大字文本 WCAG AA徽章底#f2f9ff上徽章字#097fe8约 4.5:1大字文本 WCAG AA。9. 在 OpenDesign 仓库中的落地形态从 DESIGN 文档到令牌契约本套系统不是孤立的 Markdown 规范而是 OpenDesign Design System 2.0 包结构中的一个完整可交付包。仓库中 design-systems/notion/manifest.json 声明了该包的完整契约design: DESIGN.md视觉意图、约束与反模式tokens: tokens.css令牌绑定的唯一事实来源designTokens: design-tokens.json契约审计输出tailwind: tailwind-v4.cssTailwind v4 绑定层components: components.html组件参考 fixturecomponentsManifest: components.manifest.json组件清单source:source/evidence.md、source/tokens.source.json、source/token-contract.report.json来源证据与回填审计。9.1 令牌契约审计56 个令牌、满分通过design-tokens.json 对令牌做了机器审计共 56 个令牌全部有声明来源其中 26 个 A1 身份级、26 个 A2 级、4 个 B-slot 级、18 个 A1 结构级评分 100、评级excellent、recommendRebuild: false。这意味着每个令牌都能回溯到 tokens.css 的具体声明行——例如--bg回溯到tokens.css:31、--elev-raised回溯到tokens.css:110。9.2 Tailwind v4 绑定层tailwind-v4.css 通过theme将令牌映射为 Tailwind 工具类--color-bg/--color-surface/--color-accent等颜色、--text-xs~--text-4xl字号、--shadow-raised阴影、--duration-fast动效等。文件头明确声明从 tokens.css 派生tokens.css 是事实来源要求修改令牌必须回改源文件而非绑定层。9.3 使用顺序摘自 USAGE.md按照 USAGE.md 的推荐阅读顺序使用该包先读 USAGE.md 理解包契约再读 DESIGN.md 掌握视觉意图、约束与反模式把tokens.css粘贴到第一个 artifact 的style块最前面再写组件 CSS用components.manifest.json做组件清单速查需要精确选择器或状态时打开components.html需要视觉检查时查看preview/页面preview/colors.html、preview/typography.html、preview/spacing.html。同时它给出两条硬性纪律Do——原样保留 schema 令牌名以保证跨品牌切换可靠、用--accent承担主操作/链接/焦点、优先复用已有组件组、把source/文件当作回填审计证据Avoid——不要在:root令牌块之外写裸十六进制色值、不要脱离tokens.css单独重定义 Tailwind 或令牌值、不要声称存在原始上游来源证据、不要添加components.html与 DESIGN.md 之外的组件配方。10. Agent 提示指南Prompt Guide10.1 快速颜色参考主 CTANotion Blue#0075de背景纯白#ffffff备用背景温暖白#f6f5f4标题文本近黑rgba(0,0,0,0.95)正文文本近黑rgba(0,0,0,0.95)次要文本温暖灰 500#615d59弱化文本温暖灰 300#a39e98边框1px solid rgba(0,0,0,0.1)链接Notion Blue#0075de焦点环焦点蓝#097fe8。10.2 组件 Prompt 示例可直接复用Hero 区块白底 Hero 区块。标题 NotionInter 64px 字重 700、行高 1.00、字距 -2.125px、色rgba(0,0,0,0.95)副标题 20px 字重 600、行高 1.40、色#615d59蓝色 CTA 按钮#0075de、4px 圆角、8px 16px 内边距、白字与幽灵按钮透明背景、近黑文字、悬停下划线。卡片白底卡片、1px solid rgba(0,0,0,0.1)边框、12px 圆角阴影栈rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px标题 NotionInter 22px 字重 700、字距 -0.25px正文 16px 字重 400、色#615d59。胶囊徽章#f2f9ff背景、#097fe8文字、9999px 圆角、4px 8px 内边距、NotionInter 12px 字重 600、字距 0.125px。导航白底 header链接 NotionInter 15px 字重 600、近黑文字右侧对齐蓝色胶囊 CTA Get Notion free#0075de背景、白字、4px 圆角。交替区块布局白色与温暖白#f6f5f4区块交替每区块垂直 64~80px 内边距、最大宽度 1200px 居中区块标题 48px 字重 700、行高 1.00、字距 -1.5px。10.3 迭代八原则Anti-Pattern 清单始终使用温暖中性色——Notion 的灰带黄褐底色#f6f5f4、#31302e、#615d59、#a39e98不要用蓝灰字距随字号缩放64px → -2.125px、54px → -1.875px、26px → -0.625px、16px → normal四种字重400阅读、500交互、600强调、700宣言边框是低语的1px solid rgba(0,0,0,0.1)——绝不加重阴影用 4~5 层单层不透明度不超过 0.05温暖白#f6f5f4区块背景对视觉节奏必不可少状态/标签用胶囊9999px按钮和输入框用 4px 圆角Notion Blue#0075de是核心 UI 唯一饱和色——只在 CTA 和链接上克制使用。11. 从规范到代码的最小实现示例结合 tokens.css 与 components.html 中的参考 fixture一个最小的落地方式是把令牌块粘贴进:root再基于令牌编写组件。下面是一个可直接运行的核心片段完整组件选择器见 components.html 中的.btn-primary、.card、.pill等 43 个选择器:root { --bg: #ffffff; --surface: #f6f5f4; --fg: rgba(0, 0, 0, 0.95); --muted: #615d59; --meta: #a39e98; --border: rgba(0, 0, 0, 0.1); --accent: #0075de; --accent-hover: #005bab; --radius-sm: 4px; --radius-lg: 12px; --radius-pill: 9999px; --elev-raised: rgba(0, 0, 0, 0.04) 0px 4px 18px, rgba(0, 0, 0, 0.027) 0px 2px 7.85px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.93px, rgba(0, 0, 0, 0.01) 0px 0.175px 1.04px; --tracking-display: -0.033em; } .btn-primary { background: var(--accent); color: #ffffff; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background var(--motion-fast) var(--ease-standard); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { transform: scale(0.9); } .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); }12. 查看与验证本系统的仓库路径设计规范主文档design-systems/notion/DESIGN.md另有 17 种语言的翻译版本包括本指南依据的 DESIGN-ko.md令牌事实来源design-systems/notion/tokens.css令牌契约审计design-systems/notion/design-tokens.jsonTailwind v4 绑定design-systems/notion/tailwind-v4.css组件清单与参考design-systems/notion/components.manifest.json、design-systems/notion/components.html使用指南与包清单design-systems/notion/USAGE.md、design-systems/notion/manifest.json视觉预览design-systems/notion/preview/colors.html、typography.html、spacing.html来源证据design-systems/notion/source/evidence.md。以上文件均为仓库只读内容可直接打开查阅系统其余品牌包如 linear-app、notion 同级的 airbnb、stripe 等使用同一套 DESIGN/tokens/components 包结构跨品牌切换只需替换令牌而无需改写组件语义。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载相关推荐OpenDesign 中的 Notion 设计系统温暖极简主义的完整规范与 tokens.css 落地实现OpenDesign 中的 Notion 设计系统温暖极简主义的完整规范与 tokens.css 落地实现 本文以 OpenDesign 仓库内置的 notiAI 应用人工智能AI 技能设计系统媒体生成三分钟掌握XPath神器xpath-helper-plus让你的网页元素定位效率提升300%三分钟掌握XPath神器xpath helper plus让你的网页元素定位效率提升300% 在网页开发和自动化测试的世界里精准的元素定位是每个开发者必须面AI 应用人工智能AI 技能设计系统媒体生成OpenDesign Artistic 设计系统高对比艺术风格的设计令牌、排版体系与组件实战指南OpenDesign Artistic 设计系统高对比艺术风格的设计令牌、排版体系与组件实战指南 本文以 design systems/artistic/DEAI 应用人工智能AI 技能设计系统媒体生成上一篇垂直领域LLM应用实战医疗、法律、金融专业化微调指南下一篇IBM Granite-Vision-4.1-4B终极视觉语言模型轻松实现文档智能提取创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考