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.md及乌克兰语等多语言版本 DESIGN-uk.md为核心骨架系统拆解 Notion 官网的视觉语言——温暖极简主义、NotionInter 负字距排版、细语whisper边框与多层低透明度阴影并对照仓库中的 tokens.css、components.manifest.json 等落地文件说明这套规范如何在 OpenDesign 设计系统包中被语义化编码以及如何直接指导编码 Agent 生成风格一致的页面原型。读完你将掌握Notion 风格的完整设计 token 体系、可复制的组件配方、可直接粘贴给 Agent 的提示词模板以及该规范在仓库中的实现与校验链路。1. 包结构与阅读路径在 OpenDesign 仓库中每个设计系统都是一个可移植的包统一放置在design-systems/slug/目录下Notion 包位于 design-systems/notion。根据 design-systems/README.md 的说明每个内置包至少有manifest.json、DESIGN.md、tokens.css三个文件其中manifest.json负责发现元数据、来源声明与包内路径DESIGN.md是面向 Agent 的规范正文本仓库同时提供DESIGN-uk.md等 18 种语言的翻译版本tokens.css是编译好的语义 token 样式表。USAGE.md 给出了 Agent 与评审者的推荐阅读顺序先读USAGE.md理解包契约再读DESIGN.md理解视觉意图、约束与反模式将tokens.css粘贴到第一个产物artifact的style块中再编写组件 CSS用components.manifest.json查看紧凑的组件清单需要精确选择器或状态时打开components.html需要视觉检查时查看preview/页面preview/colors.html、preview/typography.html、preview/spacing.html。从 manifest.json 可以看到该包声明为importMode: normalized其craft字段建议在生成时应用color与accessibility-baseline两条工艺规范对应 craft/color.md 与 craft/accessibility-baseline.md。2. 视觉主题与氛围温暖的纸张感而非冰冷的玻璃感Notion 官网的设计哲学与其产品一致一块不挡路的干净画布。整个系统建立在暖中性色而非冷灰色的基础上营造出一种优质纸张而非无菌玻璃的可接近极简主义。页面画布为纯白#ffffff但文字不是纯黑而是温暖的近黑rgba(0,0,0,0.95)在不可察觉的层面柔化了阅读体验暖灰阶#f6f5f4、#31302e、#615d59、#a39e98带有细微的黄褐色底色赋予界面触觉般的、近乎模拟的温暖自定义字体NotionInterInter 的修改版是系统的支柱在展示尺寸64px下使用激进的负字距-2.125px让标题显得紧凑而精确边框哲学不依赖重边框或阴影而是用极细的1px solid rgba(0,0,0,0.1)边框——细语式分隔线几乎不可见却建立了无重量的结构阴影哲学多层堆叠阴影累计透明度从不超过 0.05深度是被感受到的而不是被看见的。关键特性速查特征值展示字体NotionInter修改版 Inter展示尺寸负字距 -2.125px64px 时暖中性色灰阶带黄褐色底调#f6f5f4暖白、#31302e暖深文字色rgba(0,0,0,0.95)近黑——非纯黑产生微温暖边框全站1px solid rgba(0,0,0,0.1)——细语级分隔阴影多层堆叠、单层透明度 0.05仅似有似无的深度强调色Notion Blue#0075de是唯一的饱和强调色用于 CTA 与交互元素徽章胶囊形9999px 圆角 蓝色调背景用于状态指示间距8px 基准单位有机而非僵硬的刻度在 tokens.css 中这套氛围被直接编码为语义变量--bg: #ffffff、--fg: rgba(0,0,0,0.95)、--surface: #f6f5f4文件头注释明确写道depth felt rather than seen深度感而非可见感与规范文档一一对应。3. 色彩体系与角色一个饱和色 暖中性骨干3.1 主色PrimaryNotion Blackrgba(0,0,0,0.95)/#000000f2主要文本、标题、正文。95% 不透明度柔化了纯黑同时不牺牲可读性。Pure White#ffffff页面背景、卡片表面、蓝色按钮上的文字。Notion Blue#0075de主要 CTA、链接色、交互强调色——核心 UI 中唯一的饱和色。3.2 品牌次级色Brand SecondaryDeep Navy#213183品牌次级色少量用于强调与深色功能区块。Active Blue#005bab按钮激活/按下态——Notion Blue 的更暗变体。3.3 暖中性色阶Warm Neutral ScaleWarm White#f6f5f4表面底色、区块交替、卡片细微填充。黄色底调是关键。Warm Dark#31302e深色表面背景、深色区块文字。比标准灰更暖。Warm Gray 500#615d59次级文本、描述、弱化标签。Warm Gray 300#a39e98占位符文本、禁用态、说明文字。3.4 语义强调色Semantic Accent颜色色值用途Teal#2a9d99成功状态、正向指示Green#1aae39确认、完成徽章Orange#dd5b00警告状态、注意指示Pink#ff64c8装饰性强调、功能高亮Purple#391c57高级功能、深度强调Brown#523410大地色强调、暖色功能区块3.5 交互色InteractiveLink Blue#0075de主链接色悬停时下划线。Link Light Blue#62aef0用于深色背景的较亮链接变体。Focus Blue#097fe8交互元素上的焦点环。Badge Blue Bg#f2f9ff胶囊徽章背景蓝色调表面。Badge Blue Text#097fe8胶囊徽章文字更深的蓝以保证可读性。3.6 阴影与深度Shadows DepthCard Shadowrgba(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——多层卡片抬升。Deep Shadowrgba(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——五层深抬升用于模态框与重点内容。Whisper Border1px solid rgba(0,0,0,0.1)标准分隔边框——卡片、分隔线、区块。在 tokens.css 中这些色值被绑定为--accent: #0075de、--accent-hover: #005bab、--success: #1aae39、--warn: #dd5b00、--danger: #dc2626、--muted: #615d59、--meta: #a39e98、--border: rgba(0,0,0,0.1)而 Card Shadow 被收敛为--elev-raised变量单层透明度上限 0.04。值得注意的是--accent-active使用了现代 CSS 的color-mix(in oklab, var(--accent), black 14%)来动态计算按下态。4. 排版规则NotionInter 的压缩艺术4.1 字体族Font Family主字体NotionInter回退栈为Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol。OpenType 特性展示与标题文本启用lnum齐线数字与locl本地化字形。4.2 完整层级表Hierarchy角色字体字号字重行高字距备注Display HeroNotionInter64px (4.00rem)7001.00紧凑-2.125px最大压缩海报式标题Display SecondaryNotionInter54px (3.38rem)7001.04紧凑-1.875px次级 hero、功能标题Section HeadingNotionInter48px (3.00rem)7001.00紧凑-1.5px功能区块标题启用lnumSub-heading LargeNotionInter40px (2.50rem)7001.50normal卡片标题、功能子区块Sub-headingNotionInter26px (1.63rem)7001.23紧凑-0.625px区块副标题、内容标题Card TitleNotionInter22px (1.38rem)7001.27紧凑-0.25px功能卡片、列表标题Body LargeNotionInter20px (1.25rem)6001.40-0.125px引言、功能描述BodyNotionInter16px (1.00rem)4001.50normal标准阅读文本Body MediumNotionInter16px (1.00rem)5001.50normal导航、强调 UI 文本Body SemiboldNotionInter16px (1.00rem)6001.50normal强标签、激活态Body BoldNotionInter16px (1.00rem)7001.50normal正文尺寸的标题Nav / ButtonNotionInter15px (0.94rem)6001.33normal导航链接、按钮文字CaptionNotionInter14px (0.88rem)5001.43normal元数据、次级标签Caption LightNotionInter14px (0.88rem)4001.43normal正文说明、描述BadgeNotionInter12px (0.75rem)6001.330.125px胶囊徽章、标签、状态文字Micro LabelNotionInter12px (0.75rem)4001.330.125px小元数据、时间戳4.3 排版四原则按尺寸压缩Compression at scale展示尺寸用 -2.125px64px逐级放松到 -0.625px26px、normal16px。压缩制造标题密度同时保持正文可读。四字重系统400正文/阅读、500UI/交互、600强调/导航、700标题/展示。比大多数系统更宽的字重范围允许细腻的层级。温暖缩放Warm scaling行高随字号增大而收紧——正文 1.5016px副标题 1.23–1.27展示 1.00–1.04。产生更密、更有冲击力的标题。徽章微字距Badge micro-tracking12px 徽章文字使用正向字距 0.125px——系统中唯一的正字距让细小文字更宽、更易读。在 tokens.css 中8 档字号被收敛为 schema 槽位--text-xs: 12px到--text-4xl: 64px54px 次级 hero 介于--text-3xl与--text-4xl之间按注释说明按需内联使用字距归一化为--tracking-display: -0.033em即 -2.125px / 64px 的 em 归一化值行高则绑定为--leading-body: 1.5与--leading-tight: 1.00。字体族对应--font-display与--font-body同时提供--font-mono等宽栈供代码场景使用。5. 组件样式按钮、卡片、表单、导航5.1 按钮ButtonsPrimary Blue主按钮背景#0075deNotion Blue文字#ffffff内边距8px 16px圆角4px细微边框1px solid transparent悬停背景加深至#005bab按下scale(0.9)变换焦点2px solid焦点轮廓 var(--shadow-level-200)阴影用途主 CTAGet Notion free、Try itSecondary / Tertiary次级/三级背景rgba(0,0,0,0.05)半透明暖灰文字#000000近黑内边距8px 16px圆角4px悬停文字色偏移、scale(1.05)按下scale(0.9)变换用途次级动作、表单提交Ghost / Link Button幽灵/链接按钮背景透明文字rgba(0,0,0,0.95)装饰悬停时下划线用途三级动作、行内链接Pill Badge Button胶囊徽章按钮背景#f2f9ff蓝色调文字#097fe8内边距4px 8px圆角9999px全胶囊字体12px、字重 600用途状态徽章、功能标签、New 标签5.2 卡片与容器Cards Containers背景#ffffff边框1px solid rgba(0,0,0,0.1)细语边框圆角12px标准卡片、16px重点/hero 卡片阴影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悬停阴影微妙增强图片卡片顶部 12px 圆角图片填满上半部分5.3 输入框与表单Inputs Forms背景#ffffff文字rgba(0,0,0,0.9)边框1px solid #dddddd内边距6px圆角4px焦点蓝色轮廓环占位符暖灰#a39e985.4 导航Navigation白色上的干净横向导航不粘性定位品牌 logo 左对齐33x34px 图标 字标链接NotionInter 15px、字重 500–600、近黑文字悬停偏移至var(--color-link-primary-text-hover)CTA蓝色胶囊按钮Get Notion free右对齐移动端折叠为汉堡菜单产品下拉菜单为多级分类菜单5.5 图片处理Image Treatment产品截图带1px solid rgba(0,0,0,0.1)边框顶部圆角图片12px 12px 0px 0px面板/工作区预览截图主导功能区块hero 插图背后为暖色渐变背景装饰性手绘角色插图5.6 特色组件Distinctive Components带插图的 Feature Cards大型插画式头部《神奈川冲浪里》、产品 UI 截图12px 圆角 细语边框标题 22px/700描述 16px/400暖白#f6f5f4背景变体用于区块交替Trust Bar / Logo 网格公司 logo信任团队区块使用其品牌色横向滚动或网格布局 团队数量指标展示模式大数字 描述指标卡片Metric Cards大数字展示如 $4,200 ROINotionInter 40px/700下方暖灰正文描述细语边框容器在 components.manifest.json 中这些组件被索引为 9 个组件组buttons、inputs、cards、badges、links、keyboard、icons、typography、layout包含 43 个选择器、22 个类名、24 个元素例如 buttons 组引用--accent-hover、--ease-standard、--radius-sm、--space-2、--text-sm等 tokenbadges 组引用--radius-pill、--space-1、--text-xs。该清单还记录了 token 的declared/referenced/unusedDeclared/undeclaredReferenced四类统计当前undeclaredReferenced为空即所有引用的 token 均已声明并附带colorExpressions: 7、pixelValues: 20的字面量审计。6. 布局原则8px 基准的有机间距6.1 间距系统Spacing System基准单位8px刻度2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px非僵硬的有机刻度含分数值5.6px、6.4px用于微调在 tokens.css 中对应--space-1: 4px至--space-12: 48px并额外声明了区块纵向节奏变量--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px直接呼应响应式章节的折叠策略。6.2 网格与容器Grid Container最大内容宽度约 1200pxHero居中单列顶部内边距宽裕80–120px功能区块2–3 列卡片网格全宽暖白#f6f5f4区块背景用于交替代码/仪表盘截图以细语边框收容6.3 留白哲学Whitespace Philosophy宽裕的纵向节奏主要区块之间 64–120px。Notion 以巨大的纵向内边距让内容呼吸。温暖交替白色区块与暖白#f6f5f4区块交替形成柔和视觉节奏而无生硬色彩断裂。内容优先的密度正文文本块紧凑行高 1.50但周围环绕宽裕留白形成白色海洋中的可读内容孤岛。6.4 圆角刻度Border Radius Scale层级值用途Micro4px按钮、输入框、功能性交互元素Subtle5px链接、列表项、菜单项Standard8px小卡片、容器、行内元素Comfortable12px标准卡片、功能容器、图片顶部Large16pxHero 卡片、重点内容、推广块Full Pill9999px徽章、胶囊、状态指示Circle100%标签指示器、头像对应 token--radius-sm: 4px、--radius-md: 8px、--radius-lg: 12px、--radius-pill: 9999px。7. 深度与抬升细语级的多层阴影系统7.1 抬升层级表层级处理用途扁平Level 0无阴影、无边框页面背景、文本块细语Level 11px solid rgba(0,0,0,0.1)标准边框、卡片轮廓、分隔线软卡片Level 24 层阴影堆叠最大透明度 0.04内容卡片、功能块深卡片Level 35 层阴影堆叠最大透明度 0.05、52px 模糊模态框、重点面板、hero 元素焦点可访问性2px solid var(--focus-color)轮廓所有交互元素的键盘焦点7.2 阴影哲学Notion 的阴影系统使用多层、单层透明度极低0.01 到 0.05的阴影累积成柔和、自然的抬升感。4 层卡片阴影从 1.04px 覆盖到 18px 模糊形成深度的渐变而非一道生硬阴影5 层深阴影延伸到 52px 模糊、0.05 透明度产生环境光遮蔽ambient occlusion感觉像自然光而非计算机生成的深度。这种分层方法让元素嵌入页面而非浮在页面上。在 tokens.css 中对应三个变量--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)细语级环形轮廓、--elev-raised4 层卡片阴影堆叠。7.3 装饰性深度Hero 区块装饰性手绘角色插图俏皮风格区块交替白色到暖白#f6f5f4的背景偏移无生硬区块边框——分隔来自背景色变化与间距8. 响应式行为七档断点与折叠策略8.1 断点表Breakpoints名称宽度关键变化Mobile Small400px紧凑单列、最小内边距Mobile400–600px标准移动端、堆叠布局Tablet Small600–768px2 列网格开始Tablet768–1080px完整卡片网格、扩展内边距Desktop Small1080–1200px标准桌面布局Desktop1200–1440px完整布局、最大内容宽度Large Desktop1440px居中、宽裕边距8.2 触控目标Touch Targets按钮使用舒适内边距垂直 8px–16px导航链接 15px 且间距充足胶囊徽章有 8px 水平内边距保证点按目标移动菜单开关为标准汉堡按钮8.3 折叠策略Collapsing StrategyHero64px 展示字 → 40px → 移动端 26px保持成比例的字距导航横向链接 蓝色 CTA → 汉堡菜单功能卡片3 列 → 2 列 → 单列堆叠产品截图保持宽高比响应式图片信任条 logo网格 → 移动端横向滚动页脚多列 → 堆叠单列区块间距80px → 移动端 48px8.4 图片行为Image Behavior工作区截图在所有尺寸下保持细语边框Hero 插图等比缩放产品截图使用响应式图片与一致圆角全宽暖白区块保持通栏处理9. 可访问性与状态对比度优先的焦点系统9.1 焦点系统Focus System所有交互元素都有可见焦点指示焦点轮廓2px solid焦点色 level 200 阴影所有交互组件支持 Tab 导航高对比文本白底近黑文字超过 WCAG AAA对比度 14:1在 tokens.css 中编码为--focus-ring: 0 0 0 3px rgba(9, 127, 232, 0.3)配合--motion-fast: 150ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)作为过渡基准。9.2 交互状态Interactive States默认细语边框的标准外观悬停文字色偏移、按钮scale(1.05)、链接下划线激活/按下scale(0.9)变换、更暗背景变体焦点蓝色轮廓环 阴影强化禁用暖灰#a39e98文字、降低不透明度9.3 颜色对比度Color Contrast白底主文本rgba(0,0,0,0.95)约 18:1白底次级文本#615d59约 5.5:1WCAG AA白底蓝色 CTA#0075de约 4.6:1大文本 WCAG AA徽章底上的徽章文字#097fe8于#f2f9ff约 4.5:1大文本 WCAG AA这也解释了为何 manifest.json 的craft.suggested字段建议应用 craft/color.md 与 craft/accessibility-baseline.md 两条工艺规范——保证生成结果符合对比度与色彩角色约束。10. Agent 提示指南把规范直接变成提示词10.1 快速颜色参考Quick Color Reference用途值主 CTANotion Blue#0075de背景Pure White#ffffff交替背景Warm White#f6f5f4标题文字近黑rgba(0,0,0,0.95)正文文字近黑rgba(0,0,0,0.95)次级文字Warm Gray 500#615d59弱化文字Warm Gray 300#a39e98边框1px solid rgba(0,0,0,0.1)链接Notion Blue#0075de焦点环Focus Blue#097fe810.2 示例组件提示词可直接复制给 AgentHero 区块Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover).卡片Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: 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. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59.胶囊徽章Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px.导航Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA Get Notion free right-aligned (#0075de bg, white text, 4px radius).交替区块布局Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px.10.3 迭代指南Iteration Guide始终使用暖中性色——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. 仓库中的实现与校验从规范到可运行产物11.1 语义 token 契约tokens.css该文件是包内唯一的 token 真源。它把规范文档中的所有设计决策绑定到共享的 schema 变量上关键映射决策包括--bg绑定纯白--surface绑定暖白#f6f5f4--surface-warm别名指向同一暖白层--fg绑定rgba(0,0,0,0.95)——标志性的近黑--fg-2绑定#31302e暖深用于表面上的标题--accent是 Notion Blue#0075de——唯一的饱和色--tracking-display: -0.033em-2.125px / 64px 归一化--elev-raised是 4 层卡片阴影最大透明度 0.04--radius-sm: 4px按钮/输入框--radius-md: 8px卡片。11.2 派生产物与一致性保障根据 source/evidence.md本包由 OpenDesign 精选的内置 fixture 反填backfill而成并不声称抓取过原始上游品牌站点source/token-contract.report.json 将每一个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行。以下文件均为派生缓存而非竞争真源应按注释要求由报告与 token 样式表重新生成而非手工编辑design-tokens.json由 token 契约报告派生必须与tokens.css一致tailwind-v4.css由tokens.css派生通过theme把--color-*、--text-*、--spacing-*、--radius-*、--shadow-*等映射为 Tailwind v4 工具类components.manifest.json由components.html与tokens.css派生。依据 design-systems/README.md仓库的包质量守卫guard会校验声明路径、丰富档案、派生文件一致性、token 契约、组件 fixture、来源证据与预览覆盖编写新包后需运行pnpm guard与pnpm typecheck。包的批量同步由 scripts/sync-design-systems.ts 负责而完整的包编写规范与评审清单见 docs/design-systems.md。11.3 使用方式在 OpenDesign 的 Design System 界面或项目创建工作流中选择该包其设计上下文即被组合进 Agent 提示词中用户也可以在 UI 与od design-systems import-*CLI 中通过本地文件夹、GitHub 与 shadcn 三种导入流引入包。生成页面时按 USAGE.md 的避免清单操作不要在拷贝的:roottoken 块之外使用裸十六进制值、不要脱离tokens.css单独重定义 Tailwind 或 design-token 值、不要新增components.html或DESIGN.md中未体现的组件配方。总结Notion 设计系统包design-systems/notion是一套高度自洽的温暖极简主义规范一个饱和色Notion Blue#0075de、一条带黄褐底调的暖中性色阶、一套随字号缩放字距的 NotionInter 排版系统、全站统一的细语边框与低透明度多层阴影。规范文档 DESIGN.md及 DESIGN-uk.md 等多语言版本提供了从色彩、排版、组件、布局、响应式到可访问性的完整配方与 Agent 提示词模板而 tokens.css 以共享语义 token 契约将其编译为可直接粘贴使用的 CSS 变量配合components.manifest.json的组件索引与 token 审计、tailwind-v4.css的 Tailwind 映射构成了规范 → token → 组件 → 校验的完整落地链路让编码 Agent 可以稳定复现 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点击查看免费下载相关推荐open-design 的 Application 设计系统包从 DESIGN.md 视觉规范到 tokens.css 语义 Token 落地open design 的 Application 设计系统包从 DESIGN.md 视觉规范到 tokens.css 语义 Token 落地 本篇技术指南围AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 的 Airtable 设计系统全解析从 DESIGN.md 视觉规范到 tokens.css 可执行落地OpenDesign 的 Airtable 设计系统全解析从 DESIGN.md 视觉规范到 tokens.css 可执行落地 本文以 OpenDesignAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Dashboard 设计系统实战从 DESIGN.md 视觉规范到 tokens.css 令牌落地的完整解析OpenDesign Dashboard 设计系统实战从 DESIGN.md 视觉规范到 tokens.css 令牌落地的完整解析 导读DashboardAI 应用人工智能AI 技能设计系统媒体生成上一篇自动发朋友圈、自动点赞wechatSDK朋友圈原生接口使用手册下一篇HsMod终极指南实战配置55项炉石传说增强功能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Notion 设计系统深度解析：从 DESIGN.md 视觉规范到 tokens.css 语义化落地
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.md及乌克兰语等多语言版本 DESIGN-uk.md为核心骨架系统拆解 Notion 官网的视觉语言——温暖极简主义、NotionInter 负字距排版、细语whisper边框与多层低透明度阴影并对照仓库中的 tokens.css、components.manifest.json 等落地文件说明这套规范如何在 OpenDesign 设计系统包中被语义化编码以及如何直接指导编码 Agent 生成风格一致的页面原型。读完你将掌握Notion 风格的完整设计 token 体系、可复制的组件配方、可直接粘贴给 Agent 的提示词模板以及该规范在仓库中的实现与校验链路。1. 包结构与阅读路径在 OpenDesign 仓库中每个设计系统都是一个可移植的包统一放置在design-systems/slug/目录下Notion 包位于 design-systems/notion。根据 design-systems/README.md 的说明每个内置包至少有manifest.json、DESIGN.md、tokens.css三个文件其中manifest.json负责发现元数据、来源声明与包内路径DESIGN.md是面向 Agent 的规范正文本仓库同时提供DESIGN-uk.md等 18 种语言的翻译版本tokens.css是编译好的语义 token 样式表。USAGE.md 给出了 Agent 与评审者的推荐阅读顺序先读USAGE.md理解包契约再读DESIGN.md理解视觉意图、约束与反模式将tokens.css粘贴到第一个产物artifact的style块中再编写组件 CSS用components.manifest.json查看紧凑的组件清单需要精确选择器或状态时打开components.html需要视觉检查时查看preview/页面preview/colors.html、preview/typography.html、preview/spacing.html。从 manifest.json 可以看到该包声明为importMode: normalized其craft字段建议在生成时应用color与accessibility-baseline两条工艺规范对应 craft/color.md 与 craft/accessibility-baseline.md。2. 视觉主题与氛围温暖的纸张感而非冰冷的玻璃感Notion 官网的设计哲学与其产品一致一块不挡路的干净画布。整个系统建立在暖中性色而非冷灰色的基础上营造出一种优质纸张而非无菌玻璃的可接近极简主义。页面画布为纯白#ffffff但文字不是纯黑而是温暖的近黑rgba(0,0,0,0.95)在不可察觉的层面柔化了阅读体验暖灰阶#f6f5f4、#31302e、#615d59、#a39e98带有细微的黄褐色底色赋予界面触觉般的、近乎模拟的温暖自定义字体NotionInterInter 的修改版是系统的支柱在展示尺寸64px下使用激进的负字距-2.125px让标题显得紧凑而精确边框哲学不依赖重边框或阴影而是用极细的1px solid rgba(0,0,0,0.1)边框——细语式分隔线几乎不可见却建立了无重量的结构阴影哲学多层堆叠阴影累计透明度从不超过 0.05深度是被感受到的而不是被看见的。关键特性速查特征值展示字体NotionInter修改版 Inter展示尺寸负字距 -2.125px64px 时暖中性色灰阶带黄褐色底调#f6f5f4暖白、#31302e暖深文字色rgba(0,0,0,0.95)近黑——非纯黑产生微温暖边框全站1px solid rgba(0,0,0,0.1)——细语级分隔阴影多层堆叠、单层透明度 0.05仅似有似无的深度强调色Notion Blue#0075de是唯一的饱和强调色用于 CTA 与交互元素徽章胶囊形9999px 圆角 蓝色调背景用于状态指示间距8px 基准单位有机而非僵硬的刻度在 tokens.css 中这套氛围被直接编码为语义变量--bg: #ffffff、--fg: rgba(0,0,0,0.95)、--surface: #f6f5f4文件头注释明确写道depth felt rather than seen深度感而非可见感与规范文档一一对应。3. 色彩体系与角色一个饱和色 暖中性骨干3.1 主色PrimaryNotion Blackrgba(0,0,0,0.95)/#000000f2主要文本、标题、正文。95% 不透明度柔化了纯黑同时不牺牲可读性。Pure White#ffffff页面背景、卡片表面、蓝色按钮上的文字。Notion Blue#0075de主要 CTA、链接色、交互强调色——核心 UI 中唯一的饱和色。3.2 品牌次级色Brand SecondaryDeep Navy#213183品牌次级色少量用于强调与深色功能区块。Active Blue#005bab按钮激活/按下态——Notion Blue 的更暗变体。3.3 暖中性色阶Warm Neutral ScaleWarm White#f6f5f4表面底色、区块交替、卡片细微填充。黄色底调是关键。Warm Dark#31302e深色表面背景、深色区块文字。比标准灰更暖。Warm Gray 500#615d59次级文本、描述、弱化标签。Warm Gray 300#a39e98占位符文本、禁用态、说明文字。3.4 语义强调色Semantic Accent颜色色值用途Teal#2a9d99成功状态、正向指示Green#1aae39确认、完成徽章Orange#dd5b00警告状态、注意指示Pink#ff64c8装饰性强调、功能高亮Purple#391c57高级功能、深度强调Brown#523410大地色强调、暖色功能区块3.5 交互色InteractiveLink Blue#0075de主链接色悬停时下划线。Link Light Blue#62aef0用于深色背景的较亮链接变体。Focus Blue#097fe8交互元素上的焦点环。Badge Blue Bg#f2f9ff胶囊徽章背景蓝色调表面。Badge Blue Text#097fe8胶囊徽章文字更深的蓝以保证可读性。3.6 阴影与深度Shadows DepthCard Shadowrgba(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——多层卡片抬升。Deep Shadowrgba(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——五层深抬升用于模态框与重点内容。Whisper Border1px solid rgba(0,0,0,0.1)标准分隔边框——卡片、分隔线、区块。在 tokens.css 中这些色值被绑定为--accent: #0075de、--accent-hover: #005bab、--success: #1aae39、--warn: #dd5b00、--danger: #dc2626、--muted: #615d59、--meta: #a39e98、--border: rgba(0,0,0,0.1)而 Card Shadow 被收敛为--elev-raised变量单层透明度上限 0.04。值得注意的是--accent-active使用了现代 CSS 的color-mix(in oklab, var(--accent), black 14%)来动态计算按下态。4. 排版规则NotionInter 的压缩艺术4.1 字体族Font Family主字体NotionInter回退栈为Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol。OpenType 特性展示与标题文本启用lnum齐线数字与locl本地化字形。4.2 完整层级表Hierarchy角色字体字号字重行高字距备注Display HeroNotionInter64px (4.00rem)7001.00紧凑-2.125px最大压缩海报式标题Display SecondaryNotionInter54px (3.38rem)7001.04紧凑-1.875px次级 hero、功能标题Section HeadingNotionInter48px (3.00rem)7001.00紧凑-1.5px功能区块标题启用lnumSub-heading LargeNotionInter40px (2.50rem)7001.50normal卡片标题、功能子区块Sub-headingNotionInter26px (1.63rem)7001.23紧凑-0.625px区块副标题、内容标题Card TitleNotionInter22px (1.38rem)7001.27紧凑-0.25px功能卡片、列表标题Body LargeNotionInter20px (1.25rem)6001.40-0.125px引言、功能描述BodyNotionInter16px (1.00rem)4001.50normal标准阅读文本Body MediumNotionInter16px (1.00rem)5001.50normal导航、强调 UI 文本Body SemiboldNotionInter16px (1.00rem)6001.50normal强标签、激活态Body BoldNotionInter16px (1.00rem)7001.50normal正文尺寸的标题Nav / ButtonNotionInter15px (0.94rem)6001.33normal导航链接、按钮文字CaptionNotionInter14px (0.88rem)5001.43normal元数据、次级标签Caption LightNotionInter14px (0.88rem)4001.43normal正文说明、描述BadgeNotionInter12px (0.75rem)6001.330.125px胶囊徽章、标签、状态文字Micro LabelNotionInter12px (0.75rem)4001.330.125px小元数据、时间戳4.3 排版四原则按尺寸压缩Compression at scale展示尺寸用 -2.125px64px逐级放松到 -0.625px26px、normal16px。压缩制造标题密度同时保持正文可读。四字重系统400正文/阅读、500UI/交互、600强调/导航、700标题/展示。比大多数系统更宽的字重范围允许细腻的层级。温暖缩放Warm scaling行高随字号增大而收紧——正文 1.5016px副标题 1.23–1.27展示 1.00–1.04。产生更密、更有冲击力的标题。徽章微字距Badge micro-tracking12px 徽章文字使用正向字距 0.125px——系统中唯一的正字距让细小文字更宽、更易读。在 tokens.css 中8 档字号被收敛为 schema 槽位--text-xs: 12px到--text-4xl: 64px54px 次级 hero 介于--text-3xl与--text-4xl之间按注释说明按需内联使用字距归一化为--tracking-display: -0.033em即 -2.125px / 64px 的 em 归一化值行高则绑定为--leading-body: 1.5与--leading-tight: 1.00。字体族对应--font-display与--font-body同时提供--font-mono等宽栈供代码场景使用。5. 组件样式按钮、卡片、表单、导航5.1 按钮ButtonsPrimary Blue主按钮背景#0075deNotion Blue文字#ffffff内边距8px 16px圆角4px细微边框1px solid transparent悬停背景加深至#005bab按下scale(0.9)变换焦点2px solid焦点轮廓 var(--shadow-level-200)阴影用途主 CTAGet Notion free、Try itSecondary / Tertiary次级/三级背景rgba(0,0,0,0.05)半透明暖灰文字#000000近黑内边距8px 16px圆角4px悬停文字色偏移、scale(1.05)按下scale(0.9)变换用途次级动作、表单提交Ghost / Link Button幽灵/链接按钮背景透明文字rgba(0,0,0,0.95)装饰悬停时下划线用途三级动作、行内链接Pill Badge Button胶囊徽章按钮背景#f2f9ff蓝色调文字#097fe8内边距4px 8px圆角9999px全胶囊字体12px、字重 600用途状态徽章、功能标签、New 标签5.2 卡片与容器Cards Containers背景#ffffff边框1px solid rgba(0,0,0,0.1)细语边框圆角12px标准卡片、16px重点/hero 卡片阴影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悬停阴影微妙增强图片卡片顶部 12px 圆角图片填满上半部分5.3 输入框与表单Inputs Forms背景#ffffff文字rgba(0,0,0,0.9)边框1px solid #dddddd内边距6px圆角4px焦点蓝色轮廓环占位符暖灰#a39e985.4 导航Navigation白色上的干净横向导航不粘性定位品牌 logo 左对齐33x34px 图标 字标链接NotionInter 15px、字重 500–600、近黑文字悬停偏移至var(--color-link-primary-text-hover)CTA蓝色胶囊按钮Get Notion free右对齐移动端折叠为汉堡菜单产品下拉菜单为多级分类菜单5.5 图片处理Image Treatment产品截图带1px solid rgba(0,0,0,0.1)边框顶部圆角图片12px 12px 0px 0px面板/工作区预览截图主导功能区块hero 插图背后为暖色渐变背景装饰性手绘角色插图5.6 特色组件Distinctive Components带插图的 Feature Cards大型插画式头部《神奈川冲浪里》、产品 UI 截图12px 圆角 细语边框标题 22px/700描述 16px/400暖白#f6f5f4背景变体用于区块交替Trust Bar / Logo 网格公司 logo信任团队区块使用其品牌色横向滚动或网格布局 团队数量指标展示模式大数字 描述指标卡片Metric Cards大数字展示如 $4,200 ROINotionInter 40px/700下方暖灰正文描述细语边框容器在 components.manifest.json 中这些组件被索引为 9 个组件组buttons、inputs、cards、badges、links、keyboard、icons、typography、layout包含 43 个选择器、22 个类名、24 个元素例如 buttons 组引用--accent-hover、--ease-standard、--radius-sm、--space-2、--text-sm等 tokenbadges 组引用--radius-pill、--space-1、--text-xs。该清单还记录了 token 的declared/referenced/unusedDeclared/undeclaredReferenced四类统计当前undeclaredReferenced为空即所有引用的 token 均已声明并附带colorExpressions: 7、pixelValues: 20的字面量审计。6. 布局原则8px 基准的有机间距6.1 间距系统Spacing System基准单位8px刻度2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px非僵硬的有机刻度含分数值5.6px、6.4px用于微调在 tokens.css 中对应--space-1: 4px至--space-12: 48px并额外声明了区块纵向节奏变量--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px直接呼应响应式章节的折叠策略。6.2 网格与容器Grid Container最大内容宽度约 1200pxHero居中单列顶部内边距宽裕80–120px功能区块2–3 列卡片网格全宽暖白#f6f5f4区块背景用于交替代码/仪表盘截图以细语边框收容6.3 留白哲学Whitespace Philosophy宽裕的纵向节奏主要区块之间 64–120px。Notion 以巨大的纵向内边距让内容呼吸。温暖交替白色区块与暖白#f6f5f4区块交替形成柔和视觉节奏而无生硬色彩断裂。内容优先的密度正文文本块紧凑行高 1.50但周围环绕宽裕留白形成白色海洋中的可读内容孤岛。6.4 圆角刻度Border Radius Scale层级值用途Micro4px按钮、输入框、功能性交互元素Subtle5px链接、列表项、菜单项Standard8px小卡片、容器、行内元素Comfortable12px标准卡片、功能容器、图片顶部Large16pxHero 卡片、重点内容、推广块Full Pill9999px徽章、胶囊、状态指示Circle100%标签指示器、头像对应 token--radius-sm: 4px、--radius-md: 8px、--radius-lg: 12px、--radius-pill: 9999px。7. 深度与抬升细语级的多层阴影系统7.1 抬升层级表层级处理用途扁平Level 0无阴影、无边框页面背景、文本块细语Level 11px solid rgba(0,0,0,0.1)标准边框、卡片轮廓、分隔线软卡片Level 24 层阴影堆叠最大透明度 0.04内容卡片、功能块深卡片Level 35 层阴影堆叠最大透明度 0.05、52px 模糊模态框、重点面板、hero 元素焦点可访问性2px solid var(--focus-color)轮廓所有交互元素的键盘焦点7.2 阴影哲学Notion 的阴影系统使用多层、单层透明度极低0.01 到 0.05的阴影累积成柔和、自然的抬升感。4 层卡片阴影从 1.04px 覆盖到 18px 模糊形成深度的渐变而非一道生硬阴影5 层深阴影延伸到 52px 模糊、0.05 透明度产生环境光遮蔽ambient occlusion感觉像自然光而非计算机生成的深度。这种分层方法让元素嵌入页面而非浮在页面上。在 tokens.css 中对应三个变量--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)细语级环形轮廓、--elev-raised4 层卡片阴影堆叠。7.3 装饰性深度Hero 区块装饰性手绘角色插图俏皮风格区块交替白色到暖白#f6f5f4的背景偏移无生硬区块边框——分隔来自背景色变化与间距8. 响应式行为七档断点与折叠策略8.1 断点表Breakpoints名称宽度关键变化Mobile Small400px紧凑单列、最小内边距Mobile400–600px标准移动端、堆叠布局Tablet Small600–768px2 列网格开始Tablet768–1080px完整卡片网格、扩展内边距Desktop Small1080–1200px标准桌面布局Desktop1200–1440px完整布局、最大内容宽度Large Desktop1440px居中、宽裕边距8.2 触控目标Touch Targets按钮使用舒适内边距垂直 8px–16px导航链接 15px 且间距充足胶囊徽章有 8px 水平内边距保证点按目标移动菜单开关为标准汉堡按钮8.3 折叠策略Collapsing StrategyHero64px 展示字 → 40px → 移动端 26px保持成比例的字距导航横向链接 蓝色 CTA → 汉堡菜单功能卡片3 列 → 2 列 → 单列堆叠产品截图保持宽高比响应式图片信任条 logo网格 → 移动端横向滚动页脚多列 → 堆叠单列区块间距80px → 移动端 48px8.4 图片行为Image Behavior工作区截图在所有尺寸下保持细语边框Hero 插图等比缩放产品截图使用响应式图片与一致圆角全宽暖白区块保持通栏处理9. 可访问性与状态对比度优先的焦点系统9.1 焦点系统Focus System所有交互元素都有可见焦点指示焦点轮廓2px solid焦点色 level 200 阴影所有交互组件支持 Tab 导航高对比文本白底近黑文字超过 WCAG AAA对比度 14:1在 tokens.css 中编码为--focus-ring: 0 0 0 3px rgba(9, 127, 232, 0.3)配合--motion-fast: 150ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)作为过渡基准。9.2 交互状态Interactive States默认细语边框的标准外观悬停文字色偏移、按钮scale(1.05)、链接下划线激活/按下scale(0.9)变换、更暗背景变体焦点蓝色轮廓环 阴影强化禁用暖灰#a39e98文字、降低不透明度9.3 颜色对比度Color Contrast白底主文本rgba(0,0,0,0.95)约 18:1白底次级文本#615d59约 5.5:1WCAG AA白底蓝色 CTA#0075de约 4.6:1大文本 WCAG AA徽章底上的徽章文字#097fe8于#f2f9ff约 4.5:1大文本 WCAG AA这也解释了为何 manifest.json 的craft.suggested字段建议应用 craft/color.md 与 craft/accessibility-baseline.md 两条工艺规范——保证生成结果符合对比度与色彩角色约束。10. Agent 提示指南把规范直接变成提示词10.1 快速颜色参考Quick Color Reference用途值主 CTANotion Blue#0075de背景Pure White#ffffff交替背景Warm White#f6f5f4标题文字近黑rgba(0,0,0,0.95)正文文字近黑rgba(0,0,0,0.95)次级文字Warm Gray 500#615d59弱化文字Warm Gray 300#a39e98边框1px solid rgba(0,0,0,0.1)链接Notion Blue#0075de焦点环Focus Blue#097fe810.2 示例组件提示词可直接复制给 AgentHero 区块Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover).卡片Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: 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. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59.胶囊徽章Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px.导航Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA Get Notion free right-aligned (#0075de bg, white text, 4px radius).交替区块布局Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px.10.3 迭代指南Iteration Guide始终使用暖中性色——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. 仓库中的实现与校验从规范到可运行产物11.1 语义 token 契约tokens.css该文件是包内唯一的 token 真源。它把规范文档中的所有设计决策绑定到共享的 schema 变量上关键映射决策包括--bg绑定纯白--surface绑定暖白#f6f5f4--surface-warm别名指向同一暖白层--fg绑定rgba(0,0,0,0.95)——标志性的近黑--fg-2绑定#31302e暖深用于表面上的标题--accent是 Notion Blue#0075de——唯一的饱和色--tracking-display: -0.033em-2.125px / 64px 归一化--elev-raised是 4 层卡片阴影最大透明度 0.04--radius-sm: 4px按钮/输入框--radius-md: 8px卡片。11.2 派生产物与一致性保障根据 source/evidence.md本包由 OpenDesign 精选的内置 fixture 反填backfill而成并不声称抓取过原始上游品牌站点source/token-contract.report.json 将每一个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行。以下文件均为派生缓存而非竞争真源应按注释要求由报告与 token 样式表重新生成而非手工编辑design-tokens.json由 token 契约报告派生必须与tokens.css一致tailwind-v4.css由tokens.css派生通过theme把--color-*、--text-*、--spacing-*、--radius-*、--shadow-*等映射为 Tailwind v4 工具类components.manifest.json由components.html与tokens.css派生。依据 design-systems/README.md仓库的包质量守卫guard会校验声明路径、丰富档案、派生文件一致性、token 契约、组件 fixture、来源证据与预览覆盖编写新包后需运行pnpm guard与pnpm typecheck。包的批量同步由 scripts/sync-design-systems.ts 负责而完整的包编写规范与评审清单见 docs/design-systems.md。11.3 使用方式在 OpenDesign 的 Design System 界面或项目创建工作流中选择该包其设计上下文即被组合进 Agent 提示词中用户也可以在 UI 与od design-systems import-*CLI 中通过本地文件夹、GitHub 与 shadcn 三种导入流引入包。生成页面时按 USAGE.md 的避免清单操作不要在拷贝的:roottoken 块之外使用裸十六进制值、不要脱离tokens.css单独重定义 Tailwind 或 design-token 值、不要新增components.html或DESIGN.md中未体现的组件配方。总结Notion 设计系统包design-systems/notion是一套高度自洽的温暖极简主义规范一个饱和色Notion Blue#0075de、一条带黄褐底调的暖中性色阶、一套随字号缩放字距的 NotionInter 排版系统、全站统一的细语边框与低透明度多层阴影。规范文档 DESIGN.md及 DESIGN-uk.md 等多语言版本提供了从色彩、排版、组件、布局、响应式到可访问性的完整配方与 Agent 提示词模板而 tokens.css 以共享语义 token 契约将其编译为可直接粘贴使用的 CSS 变量配合components.manifest.json的组件索引与 token 审计、tailwind-v4.css的 Tailwind 映射构成了规范 → token → 组件 → 校验的完整落地链路让编码 Agent 可以稳定复现 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点击查看免费下载相关推荐open-design 的 Application 设计系统包从 DESIGN.md 视觉规范到 tokens.css 语义 Token 落地open design 的 Application 设计系统包从 DESIGN.md 视觉规范到 tokens.css 语义 Token 落地 本篇技术指南围AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 的 Airtable 设计系统全解析从 DESIGN.md 视觉规范到 tokens.css 可执行落地OpenDesign 的 Airtable 设计系统全解析从 DESIGN.md 视觉规范到 tokens.css 可执行落地 本文以 OpenDesignAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Dashboard 设计系统实战从 DESIGN.md 视觉规范到 tokens.css 令牌落地的完整解析OpenDesign Dashboard 设计系统实战从 DESIGN.md 视觉规范到 tokens.css 令牌落地的完整解析 导读DashboardAI 应用人工智能AI 技能设计系统媒体生成上一篇自动发朋友圈、自动点赞wechatSDK朋友圈原生接口使用手册下一篇HsMod终极指南实战配置55项炉石传说增强功能创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考