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点击查看免费下载Mastercard 设计系统design-systems/mastercard是 Open Design 仓库中沉淀的一套金融科技与加密类品牌设计规范其核心是把一家全球支付网络的机构感与杂志化的编辑温情融合在一起暖奶油画布、超大圆角、轨道圆形图片、手绘感橙色弧线与幽灵水印大标题共同构成辨识度极高的视觉语言。本文以 design-systems/mastercard/DESIGN.md 为主干结合同目录下的 tokens.css、design-tokens.json、tailwind-v4.css、components.manifest.json 与 USAGE.md 等实现证据逐层拆解这套系统的色彩、字体、组件、布局、阴影与响应式规则并给出可直接喂给编码 Agent 的 Prompt 模板与迭代指南。1. 视觉主题与氛围暖石与信号橙构成的编辑杂志感Mastercard 的线上体验读起来像一本用柔软石材和信号橙印刷的温暖编辑杂志。它既不像典型的科技金融站那样使用纯白与硬边也不刻意追求炫技而是把 60 年支付网络所代表的机构可信赖感和现代品牌杂志的编辑感捏合在一起。整个系统的视觉由几个关键手势构成暖奶油画布#F3F0EE不是白、不是灰而是像高级年报纸张一样的暖色底。页面上几乎不存在未经过染色的无菌白表面超大圆角作为设计语言Hero 使用 40px 圆角卡片直接做成全药丸形pill服务图片被裁剪成正圆轨道按钮要么是完整的药丸形、要么贴合 20px 圆角。页面几乎找不到锋利的直角轨道与轨迹Orbit and Trajectory圆形图片遮罩并非静止摆放而是由一根根细的、带手绘感的橙色弧线连接横跨整个视口宽度暗示服务星座而非列表。每个圆的外缘还停靠着一个白色微型 CTASatellite像卫星环绕月球幽灵水印大标题Ghost Watermark以奶油叠奶油的大字号文本层叠在圆形肖像背后为区块定下主题而不与前景内容争夺注意力黑色主 CTA 与合规橙的严格分工正文里所有营销 CTA 都是墨黑药丸20px 圆角信号橙只留给 Cookie 同意等合规流程。从仓库证据看tokens.css 第 810 行把--bg: #f3f0ee、--surface: #fcfbfa、--surface-warm: #f7e8de三个表面层级固化为 token第 17 行用--accent: #cf4500承载信号橙——这正是画布 → 抬升面 → 墨黑页脚三段式节奏的底层实现。核心特征清单暖奶油画布#F3F0EE取代传统纯白所有表面都有染色、绝不生硬极端的圆角设计语言40px、99px、1000px 占据主导凡是方形的都是第三方 Cookie 横幅圆形肖像图 白色卫星 CTA 橙色轨道弧线幽灵水印大标题奶油叠奶油的大字号文本垫在圆形肖像之后黑色主 CTA20px 圆角Cookie 横幅的橙色被严格限定在同意流程漂浮的药丸形导航圆肩设计悬停在视口顶部下方Eyebrow 标签 小圆点 大写加粗字距作为区块分类信号深暖黑页脚#141413四栏链接 大号对话式标题。2. 色彩体系与角色分工2.1 主色Primary颜色色值角色Mastercard Red#EB001B品牌标志的左圆只出现在 Logo 中永不作 UI 颜色Mastercard Yellow#F79E1B品牌标志的右圆只出现在 Logo 中永不作 UI 颜色Ink Black#141413暖调近黑用于主 CTA、奶油画布上的标题文字与页脚表面。蓝色通道的13值向奶油靠拢使其在暖画布上绝不显得像纯黑2.2 次色与强调色Secondary Accent颜色色值角色Signal Orange#CF4500燃烧/铁锈感的 CTA 橙用于同意类动作与 eyebrow 圆点。比品牌黄更深、比墨黑更亮是全页唯一的攻击性颜色必须克制使用Light Signal Orange#F37338更浅的胡萝卜橙用于轮播激活指示器与装饰性轨道弧线。永远只作注意力提示不作正文色Clay Brown#9A3A0A深铁锈色用于次级链接式按钮如 Cookie 详情。介于墨黑与信号橙之间2.3 表面与背景Surface Background颜色色值角色Canvas Cream#F3F0EE页面画布暖调油灰色默认正文背景所有编辑区块都坐落在其上Lifted Cream#FCFBFA比画布亮一档用于嵌套抬升区块制造纸叠纸的感觉White#FFFFFF预留给漂浮导航药丸、模态卡片、次级按钮填充、以及圆形肖像上停靠的卫星 CTA 小圆Soft Bone#F4F4F4冷灰替代表面用于少量组件子区域2.4 中性色与文本Neutrals Text颜色色值角色Ink Black#141413主标题与正文文本色Charcoal#262627稍柔和的黑色用于部分文本替代Slate Gray#696969弱化的次级文本——eyebrow 标签替代、禁用态、底栏Privacy Choices文字Granite / Graphite#555555/#565656更深的灰用于行内正文点缀与链接替代Dust Taupe#D1CDC7极弱的奶油灰用于禁用或低语文本如占位符风格的空态标签。在奶油上对比度低只用于极克制的内容2.5 语义色与强调Semantic Accent颜色色值角色Link Blue#3860BE略带灰尘感的深蓝用于行内链接与信息性 callout。饱和到能读作链接但绝不荧光Priceless Red Yellow#EB001B#F79E1B全彩 Mastercard Logo 标志是红黄唯一同时出现的场景把品牌身份锁在页面上而不进入 UI 调色板2.6 渐变系统Mastercard 的核心 UI 中没有任何程序化渐变。所谓渐变感来自两个地方圆形肖像图暖橙色的照片主体卡片、向日葵、饮料在边缘渐隐融入奶油画布深卡片阴影抬高内容上的rgba(0,0,0,0.08) 0px 24px 48px在药丸形媒体下方制造柔和光晕。在 token 层这一策略被固化为 tokens.css 中的--elev-ring: 0 0 0 1px var(--border)与--elev-raised: 0 24px 48px rgba(20, 20, 19, 0.10)第 5455 行阴影全部采用低透明度、大扩散半径的形式。3. 字体排印规则3.1 字体族主字体MarkForMC——Mastercard 自有的几何无衬线体页面上的每个标题、正文、按钮、导航链接与页脚链接都使用它次字体MarkOffcForMC——官方字重切割用于少数场景法律文本、部分表单回退栈SofiaSans, Arial, sans-serif——Sofia Sans 是合理的开源替代Arial 是最终 Web 安全兜底。该栈在仓库中已被完整 token 化tokens.css 第 2426 行声明了--font-display、--font-body均为MarkForMC, Sofia Sans, Arial, sans-serif--font-mono使用MarkOffcForMC, ui-monospace, Menlo, monospace。3.2 层级Hierarchy角色字号字重行高字距说明H1Hero64px50064px-1.28px-2%行高设为1:1多行 Hero 垂直节奏极紧H2区块36px50044px-0.72px-2%用于幽灵水印标题与区块标题H3卡片标题24px50028.8px1.2-0.48px-2%服务/解决方案卡片内标题H4小标题14px70018.2px1.3normal营销表面中极少使用EyebrowH514px70014px0.56px4%大写搭配小圆点如• SERVICES正文段落16px45022.4px1.4normal450 半步字重是 MarkForMC 的标志——比 500 柔、比 400 稳导航链接 / 按钮标签16px50016px-0.48px-3%紧凑无 text-transform页脚链接14px450~20pxnormal深色页脚上用更轻字重换取透气密度页脚栏目标题12–14px70014px0.56px4%大写、弱化灰、短字距对应 token 方面tokens.css 第 2737 行把字号阶梯--text-xs (12px)到--text-4xl (64px)、行高--leading-body: 1.4、--leading-tight: 1、显示字距--tracking-display: -0.02em全部落地与上表一一对应。3.3 原则Principles450 字重是承重的多数品牌只用 400/500/700Mastercard 用 450 作正文营造出异常柔和的阅读语调。把它替换成 400 会直接抹平品牌特征标题上的紧凑负字距-2%赋予展示文本编辑密度——字与字锁在一起而不是松散呼吸大写 字距只允许出现在 eyebrow 尺度14px / 700 / 4%。其他地方禁止大写不允许喊叫式的区块标题单字体系统克制引入第二种字体做对比的冲动。对比来自字号、字重与字距而不是衬线或展示字体行高比随字号下降H1 是 1:1、H3 是 1.2、正文是 1.4。展示文本紧、阅读文本松。3.4 字体替代方案MarkForMC 是商业授权字体。在没有原字体的前提下重建近似美学Sofia SansGoogle Fonts是最接近的开源替代——它本就在 Mastercard 声明的回退栈里Inter用 450/500/700 字重可作通用替代但 x-height 会略高、字形更松Neue Haas Grotesk或Geist可以在商业项目中近似几何感无论用哪种替代都要保留标题 -2% 字距和450 正文字重可变字体直接写font-weight: 450否则用 400 并收紧约 -0.5% 字距补偿。4. 组件规范4.1 按钮主按钮 — 墨黑药丸Primary — Ink Pill背景Ink Black#141413文字Canvas Cream#F3F0EE——不是纯白边框1.5px 实线 Ink Black与背景同色形成利落边缘圆角20px内边距6px 24px字体MarkForMC 16px / 字重 500 / 字距 -0.32px默认态如上按下态做轻微内缩或 2px 位移不做 hover 变色用途页面正文所有营销 CTALearn more、Explore、Discover次级按钮 — 描边药丸Secondary — Outlined Pill背景White#FFFFFF文字Ink Black#141413边框1.5px 实线 Ink Black圆角20px内边距6px 24px字体MarkForMC 16px / 字重 450 / 行高 20.8px按下态轻微压缩用途与主按钮配对出现的次级动作或独立工具型 CTA同意/信号按钮 — 橙色药丸Consent / Signal — Orange Pill背景Signal Orange#CF4500文字White#FFFFFF边框0圆角24px内边距1px 30px垂直极紧、水平极宽字体MarkForMC 13px / 字重 400 / 字距 0.13px用途Cookie 同意、隐私偏好等法律性确认。禁止把这种橙色用于营销 CTA——它会被读成合规色卫星 — 圆形微型 CTASatellite — Circular Micro-CTA背景White图标Ink Black 箭头→约 20px边框无圆角50%正圆尺寸约 50–60px 直径阴影无或极弱肖像自身的阴影承担抬升感默认停靠在圆形肖像右下缘部分突出圆外用途服务/解决方案卡片的主入口必须与圆形肖像配对使用纯图标圆形按钮轮播、播放/暂停背景透明或白色图标10–20px 居中边框在奶油上为 1px Ink Black在媒体上为无圆角50%尺寸轮播控件最小 40px 直径Hero 视频播放 80px用途轮播分页/播放暂停、Hero 视频播放、搜索开关4.2 卡片与容器Hero 媒体框体育场形 Stadium背景深色视频或全出血图像视频背后通常为#000000或#2B2B2B圆角四角全部 40px宽视口下形成体育场形宽度约满视口减去每侧 48px 沟槽高度视口的 60–70%阴影无直接坐在画布上关键约束媒体元素上极端的 40px 圆角是最具标志性的 Mastercard 手势不要少于这个值服务/解决方案圆形肖像卡形状正圆50%或椭圆999px / 1000px直径桌面 260–340px移动端约 220px图片裁剪方形源图裁成圆形附属元素白色卫星圆形 CTA 停靠右下约 40% 突出圆外下方 Eyebrow圆点 大写标签如• SERVICES、• SOLUTIONS下方标题H324px / 500 / -2% 字距最多 1–2 行装饰轨道约 1px 的 Light Signal Orange 细弧线从此卡延伸至下一卡暗示连接药丸轮播卡Pill Carousel Card圆角1000px全药丸或 40px 圆角圆角体育场宽约视口 40–60%高约 380–420px竖版药丸方向内容全出血摄影 小型叠放 chip 标签内部 chip白色药丸约 999px 圆角、Ink Black 文字、内边距 8px 20px用于Story等分类标签内部大号 CTAInk Pill 按钮超尺寸版内边距 16px 40px圆角 40px幽灵水印文本块Ghost Watermark Text Block字体MarkForMC 72–128px / 字重 500 / 紧 -2% 字距颜色Canvas Cream 略加深#E8E2DA或相近——奶油叠奶油位置垫在圆形肖像背后溢出视口边缘目的为区块定主题不与前景文案竞争4.3 输入与表单营销页上的表单表面极简。导航头的搜索输入初始态48px 圆形按钮 放大镜图标展开态水平输入框边框1px solidInk Black约 50% 不透明度圆角 999px内边距 12px 24px白色背景页脚国家/语言选择器背景Ink Black与页脚同色文字White边框1px 实线rgba(255,255,255,0.4)圆角999px全药丸图标右侧向下 chevron4.4 导航漂浮导航药丸桌面端容器白色到半透明白的药丸悬浮在视口顶部下方约 24px 处圆角999px / 1000px全药丸内边距约 16px 40px阴影极软rgba(0, 0, 0, 0.04) 0px 4px 24px 0px——刚好把它从奶油画布上抬起来内容左侧 Mastercard Logo中间主链接组For you、For business、For the world、For innovators、News and trends右侧搜索图标链接间距主链接之间约 48–56px链接样式Ink Black、字重 500、16px、无下划线、激活前无药丸包围移动端导航同样的药丸形状但收拢为Logo 汉堡菜单按钮 搜索图标菜单展开为全屏覆盖层主链接纵向堆叠4.5 图像处理宽高比1:1所有服务肖像裁成圆约 3:4 或 4:5药丸轮播卡16:9 或更宽Hero 视频框全出血 vs 留白Hero 全视口宽带沟槽服务肖像永远在列内居中、四周大量留白页脚极少出现图像遮罩激进的圆形遮罩是定义性处理——方形源图被裁成等直径正圆。永远不要用矩形服务图懒加载标准loadinglazy 奶油色占位的柔和 blur-up 过渡加载期间保持暖色盘4.6 装饰性轨道线标志性母题约 1–1.5px 的细单线条用 Light Signal Orange#F37338在圆形肖像之间描画弧线。这些线无需文字箭头即可暗示服务之间的连接跨度从约 200px 到满视口弧线有手绘感轻微不规则而非完美的 CSS 曲线只出现在含圆形肖像的区块——绝不出现在药丸区块绝不出现在页脚4.7 页脚背景Ink Black#141413文字White内边距水平 48px 100px / 底部 148px底部空间非常高结构左侧大号对话式 H2Were always here when you need us下方 4 栏链接网格栏目标题大写、弱化、字重 700、字距 4%链接行白色、字重 450、14pxNEED HELP?栏的条目带小图标前缀气泡、卡片、地图钉、问号外链标记链接文字后的右上小箭头↗底行在 1px 白色低透明度分隔线下版权 隐私小字 国家语言药丸下拉 四个社交图标LinkedIn、Facebook、X、YouTube5. 布局原则5.1 间距系统基础单位8px由 dembrandt 提取与计算样式确认刻度8 / 16 / 24 / 32 / 48 / 64 / 96 / 1288 的幂区块垂直内边距桌面主区块之间约 96–128px移动端约 48–64px卡片内部内边距桌面 32–40px移动端约 24px导航顶部边距距视口顶约 24px药丸悬浮、不贴边对应 tokentokens.css 第 3845 行给出--space-1 (4px)至--space-12 (48px)第 4648 行给出--section-y-desktop: 104px、--section-y-tablet: 72px、--section-y-phone: 52px其中桌面区块纵向 104px 与 DESIGN.md 的 96–128px 区间一致。5.2 网格与容器最大内容宽度约 1200–1280px 居中水平沟槽约 48–100px。token 层的实现为--container-max: 1180pxtokens.css 第 60 行列模式隐含 12 列但实际布局使用 2 列不对称左大标题、右说明文字、1 列全出血Hero、视频、或交错单肖像摆放服务卡处于不同网格位置制造星座感页脚网格桌面 4 等宽列移动端收拢为单列手风琴5.3 留白哲学Mastercard 把留白当作结构而非空缺。一个典型服务区块是幽灵大标题占据区块顶部约 40%大部分是空的奶油单个圆形肖像定位在约 60% 高度处向左或向右不对称肖像与下一区块之间约 300–500px 的空白画布这种刻意的空告诉眼睛慢下来一次只看一件事——与高密度 Dashboard UI 完全相反。5.4 圆角刻度圆角用途3–6px极小的装饰元素、Cookie 横幅微 chip20px主/次正文 CTA标志性按钮圆角24px同意/橙色药丸按钮、模态内部 chip40pxHero 媒体框、大区块容器圆角、H2 药丸标签50%圆形肖像、纯图标按钮、卫星 CTA99px / 999px / 1000px全药丸形——导航、轮播卡、页脚国家选择器、主行内 chip这套刻度很不寻常多数系统用 4/8/12/16。Mastercard 跳过这些只承诺**小≤6、中大20–40、全药丸99**三档。8–12 的中间地带被刻意省略这正是 UI 要么精确实用、要么柔和编辑、没有中间态的原因。仓库 token 把它映射为--radius-sm: 20px、--radius-md: 40px、--radius-lg: 64px、--radius-pill: 9999pxtokens.css 第 4952 行。6. 深度与层级层级处理用途0无阴影默认——95% 的表面直接坐在奶油画布上1rgba(0, 0, 0, 0.04) 0px 4px 24px 0px漂浮导航药丸——若有若无的抬升2rgba(0, 0, 0, 0.08) 0px 24px 48px 0pxHero 媒体框、抬高卡片——柔和的大半径光晕而非硬投影3rgba(0, 0, 0, 0.25) 0px 70px 110px 0px罕见功能磁贴上的戏剧性抬升阴影哲学Mastercard 把阴影当作氛围缓冲垫而非方向性光源。Level 2 阴影有 48px 扩散、仅 8% 不透明度——作为深色像素几乎不存在却制造出卡片在画布上方呼吸的感觉。整个系统几乎没有任何硬边紧阴影。功能分隔优先使用边框线表单输入、页脚分隔线。装饰性深度轨道弧线Light Signal Orange约 1px跨区块描画连接路径幽灵水印大标题奶油叠奶油文本给区块一种纸张压印的质感圆形图渐隐圆形肖像边缘的暖调摄影溶解进画布暗示柔和大气的深度7. 行为准则Dos and DontsDo用 Canvas Cream#F3F0EE作默认正文背景——永远不用纯白把服务/功能图遮罩成正圆而不是矩形或圆角矩形给每个圆形肖像右下角停靠白色卫星 CTA标题用 MarkForMC 字重 500 -2% 字距正文段落用 450 字重不是 400主 CTA 保持墨黑药丸20px 圆角 奶油文字Signal Orange 只用于同意、法律、合规动作导航做成视口顶部下方的圆角白色漂浮药丸不贴 y0用三种表面色调构建页面节奏画布奶油 → 抬升奶油 → 墨黑页脚服务卡之间用细 Light Signal Orange 弧线暗示连接Dont不要用纯白做页面背景——会破坏暖调编辑语气不要把图像框圆角做成 8–16px——Mastercard 要么全药丸、要么 40px、要么全圆中间值会显得平庸不要把 Signal Orange 用于营销 CTA——它会读成 Cookie 同意橙稀释法律色信号不要混用字体——不要衬线点缀、不要手写体、不要第二个展示字体不要给导航塞超过六个顶级链接——药丸要显得透气不要使用硬投影——所有抬升都应 48px 扩散且 ≤10% 不透明度不要对大于 14px eyebrow 标签的文本使用大写不要省略 eyebrow 标签前的小圆点——它是身份标识不要把圆形肖像放进网格——它们的魅力来自不对称摆放8. 响应式行为断点名称宽度关键变化Mobile≤ 767px导航药丸只显示 Logo 菜单 搜索主链接藏进汉堡菜单服务肖像单列居中堆叠Hero 标题从 64px 降到约 40px页脚列收拢为竖向手风琴Tablet768–1023px导航药丸显示 2–3 个主链接服务肖像 2 列排布Hero 标题约 48pxDesktop≥ 1024px完整导航、5 个主链接居中服务肖像不对称摆放 装饰轨道线Hero 标题 64pxWide≥ 1440px内容最大宽度封顶约 1280px沟槽对称增长轨道线延伸更远触控目标所有交互元素都舒适地超过 44×44px。卫星 CTA圆 箭头约 50–60px导航药丸按钮约 48px 高移动端汉堡和搜索都是 48×48px。任何断点下链接或按钮都不低于 40px。收拢策略导航全药丸 → 紧凑药丸带汉堡。药丸形状在所有断点保留——始终圆角、始终漂浮服务网格不对称星座 → 2 列 → 1 列堆叠。轨道弧线在移动端移除它们只在不对称摆放时有效间距区块纵向内边距从移动端 128px 压缩到 48px内容双列 Hero左标题/右说明变上下堆叠页脚4 列 → 1 列手风琴每区块带 chevron 开关图像行为圆形肖像按比例缩放任何尺寸都保持正圆。Hero 视频框在所有断点保持 40px 圆角但整体随视口收缩。懒加载为标准配置奶油色 blur-up 占位在加载期间保持暖色盘。9. Agent Prompt 指南快速颜色速查主 CTAInk Black#141413——用于主药丸按钮和页脚的暖调近黑背景Canvas Cream#F3F0EE——暖油灰正文画布绝不纯白抬升面Lifted Cream#FCFBFA——比画布亮一档用于嵌套区块标题文字Ink Black#141413正文文字Ink Black#141413字重 450弱化文字Slate Gray#696969信号/同意Signal Orange#CF4500——预留给 Cookie 同意与法律动作点缀弧线Light Signal Orange#F37338——仅作轨道装饰线边框/描边Ink Black 1.5px药丸按钮其他处 1px 低透明度页脚Ink Black#141413 White 文字组件 Prompt 示例创建一个直径 300px 的圆形肖像卡把方形照片裁成正圆。在右下角停靠一个 56px 白色卫星按钮带深色箭头图标使其约 40% 突出圆外。肖像下方加 eyebrow 标签Light Signal Orange 圆点 大写 SERVICES 文字MarkForMC 字重 700、14px。eyebrow 下方设置 24px / 字重 500 的 Ink Black 标题。设计一个主 CTA 按钮Ink Black#141413背景Canvas Cream#F3F0EE文字20px 圆角垂直 6px 水平 24px 内边距MarkForMC 16px 字重 500、-2% 字距。构建漂浮导航药丸白色背景 rgba(0, 0, 0, 0.04) 0px 4px 24px 0px阴影999px 圆角垂直 16px 水平 40px 内边距。定位在视口顶部下方 24px 居中左侧 Mastercard Logo中间 5 个主链接间距 48px右侧 48px 圆形搜索按钮。创建 Hero 媒体框四角 40px 圆角满视口宽减 48px 沟槽约 60% 视口高视频内容用深色背景。直接放在奶油画布上无阴影。设计页脚Ink Black#141413背景、白色文字、4 栏链接网格栏目标题大写、弱化、14px 字重 700 4% 字距。网格上方加大号对话式 H2下方 1px 白色 30% 不透明度分隔线底行含版权、法律小字链接、药丸国家选择器和四个社交图标。迭代指南用这套设计系统精修既有页面时一次只聚焦一个组件——不要并行重做多个表面同时引用本文档中的颜色名称和十六进制值用自然语言warm putty cream、stadium pill、circular portrait with satellite CTA搭配技术数值在描述具体测量值的同时描述期望的感觉编辑、柔和、机构拿不准时就选三个圆角之一20px按钮、40pxHero/体育场、999px药丸/导航默认背景设为 Canvas Cream#F3F0EE而非白色——这一个改动就能把整体情绪拉向 Mastercard已知缺口线上页面使用商业授权的 MarkForMCSofia Sans 是最接近的开源替代且已列在 Mastercard 自己的回退栈中平板断点768–1023px细节是从桌面与移动端截图推断的中间布局可能因区块而异圆形肖像后幽灵水印标题使用的精确低语奶油色在截图中介于#E8E2DA与#D1CDC7之间具体值随区块变化第三方同意橙#CF4500是 Mastercard 声明的同意信号不应与任何营销 CTA 颜色混淆Mastercard Logo 标志红#EB001B 黄#F79E1B是品牌资产不是 UI 调色板条目10. 仓库中的实现证据与使用方式这套规范在仓库中不是孤立文档而是一个完整、可校验、可消费的 Design System 2.0 包见 manifest.jsonschemaVersion: od-design-system-project/v1。包内文件分工明确DESIGN.md视觉意图、约束与反模式即本文主体USAGE.md包的消费契约约定阅读顺序先读 USAGE.md 理解契约 → 读 DESIGN.md 理解视觉意图 → 把tokens.css粘贴进首个 artifact 的style块再写组件 CSS → 用components.manifest.json做组件清单速查 → 必要时打开preview/页面做视觉核对tokens.css:root级 CSS 变量是唯一的事实源source of truth共 56 个 tokendesign-tokens.jsontoken 契约报告summary显示totalTokens: 56、sourceBackedTokens: 56、score: 100、grade: excellent每个 token 都回链到tokens.css的具体声明行如tokens.css:8对应--bg层分布为 A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个tailwind-v4.css从tokens.css派生的 Tailwind CSS v4theme映射把--color-bg、--radius-pill、--shadow-raised等语义名桥接到品牌 tokencomponents.manifest.json组件清单48 个选择器、26 个类按buttons / inputs / cards / badges / links / typography / layout分组并列出每个组件组引用的 tokencomponents.html带确切选择器与状态的参考组件 fixturepreview/colors.html、preview/typography.html、preview/spacing.html颜色、字体、间距的可视化核对页source/审计证据目录evidence.md 声明本包基于 OpenDesign curated bundled fixture不声称对上游品牌仓库做了新抓取。USAGE.md 还给出了两条对 Agent 的直接约束保持 schema token 名称不变以保证跨品牌切换可靠避免在:roottoken 块之外使用裸十六进制值、避免脱离tokens.css独立重定义 Tailwind 或设计 token 值。这解释了为什么仓库同时提供tokens.css、design-tokens.json与tailwind-v4.css三份文件——它们共享同一事实源分别服务原生 CSS、token 契约校验与 Tailwind v4 工具类场景。结语Mastercard 设计系统的价值在于它提供了一个极端的反面教材式思路克制色彩全页只有一个信号橙、克制圆角只取三档、克制字体单字体 450 半步字重、克制布局非对称 大量留白最终反而获得了极高的辨识度。在 Open Design 仓库中这套规范已经从视觉描述完整落地为可执行资产——DESIGN.md 负责传达意图tokens.css 提供机器可读的事实源design-tokens.json 保证契约可校验而 Agent Prompt 指南则让编码 Agent 无需人工翻译即可把这份美学翻译成可运行的前端代码。对于任何希望复刻温暖编辑 金融可信赖气质的金融科技产品这套系统都是一份可以照抄结构的参考实现。赞分享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 Contemporary 设计系统实战解析从设计令牌到 Agent 可执行的设计规范OpenDesign Contemporary 设计系统实战解析从设计令牌到 Agent 可执行的设计规范 Contemporary 是 OpenDesignAI 应用人工智能AI 技能设计系统媒体生成Open Design 中的 Airtable 设计系统从品牌视觉解析到可落地 Design Token 的完整指南Open Design 中的 Airtable 设计系统从品牌视觉解析到可落地 Design Token 的完整指南 本文以 Open Design 仓库 dAI 应用人工智能AI 技能设计系统媒体生成mise 用错了工具版本时怎么定位配置来源与 PATH 冲突mise 用错了工具版本时怎么定位配置来源与 PATH 冲突 当你在项目里声明了某个工具版本实际执行的命令却用了另一个版本——例如 node versionAI 应用人工智能AI 技能设计系统媒体生成上一篇LangChain-KR项目解析使用PydanticOutputParser实现结构化输出处理下一篇给 AI 应用装上 PaddleOCR Skills从 1 份文件到结构化结果的完整链路创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考