OpenDesign Ferrari 设计系统深度解析明暗对切的编辑式视觉语言与 56 项语义化 Token 契约【免费下载链接】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一款以本地优先桌面应用形态运行的开源设计引擎编码 Agent 充当设计引擎中design-systems/ferrari是一个完整的可移植设计系统包它以法拉利品牌官网为分析原型沉淀了一套明暗对切chiaroscuro 法拉利红极致克制 编辑式排版的视觉规范。本文以 design-systems/ferrari/DESIGN.md 为主体完整继承其中的色彩体系、字体层级、组件样式、布局原则与 Agent 提示指南并结合包内的 tokens.css、manifest.json、design-tokens.json 与 components.manifest.json 等配套文件讲解该包在 OpenDesign 中如何被组合进 Agent 提示词、如何在生成物中落地执行。1. 包结构一个可移植的 Design System 2.0 包在 design-systems/README.md 中仓库定义了所有内置设计系统包的最小机器可读形态design-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.css其中manifest.json负责稳定的发现元数据与来源信息DESIGN.md是面向 Agent 的规范设计文案tokens.css是规范化的语义化 Token 样式表。Ferrari 包是一个富包rich package在最小形态之外还声明了更多文件这从 manifest.json 中可以直接确认{ schemaVersion: od-design-system-project/v1, id: ferrari, category: Automotive, files: { design: DESIGN.md, tokens: tokens.css, designTokens: design-tokens.json, tailwind: tailwind-v4.css, components: components.html }, usage: USAGE.md, componentsManifest: components.manifest.json, importMode: normalized, craft: { suggested: [color, accessibility-baseline] }, preview: { dir: preview, pages: [ { path: preview/colors.html, role: colors, title: Colors }, { path: preview/typography.html, role: typography, title: Typography }, { path: preview/spacing.html, role: spacing, title: Spacing } ]} }各文件职责清晰DESIGN.md视觉意图、约束与反模式的规范文案本文主体tokens.css:root下的语义化 Token 绑定是生成物中实际粘贴执行的样式块USAGE.md面向 Agent 的阅读顺序与使用守则components.html独立组件样例 fixture48 个选择器、26 个类、19 种元素见 components.manifest.json 的fixture段design-tokens.json由 Token 契约报告派生的结构化 Design Tokens JSONtailwind-v4.css由tokens.css派生的 Tailwind v4 映射source/evidence.md 与 source/token-contract.report.json来源证据与 Token 契约报告preview/目录colors / typography / spacing 三张可视化校验页。USAGE.md 给出的官方阅读顺序值得所有使用者遵循先读本包契约再读DESIGN.md理解视觉意图与反模式然后将tokens.css粘贴进产物第一个style块组件清单优先查components.manifest.json需要精确选择器或状态时再打开components.html最后用preview/页面做视觉 sanity check。2. 视觉主题明暗对切的数字刊物DESIGN.md 对整体气质的核心判断是法拉利官网是一本数字刊物——以美术馆的庄重感呈现跃马品牌页面从一片绝对的黑开始跃马标志独自悬浮在自己的氛围中随后内容在墨黑电影感区块与干净的白色编辑面板之间戏剧性地交替。这种明暗对切chiaroscuro节奏让滚动体验更像翻阅一本法拉利年鉴而非浏览一个商业网站每个区块都是一段精心编排的短篇影像——概念车从阴影中浮现、两位 F1 车手以雕塑般的静止感定格、量产车型列队如宝石巡礼。色彩语言对一个以速度与情感为卖点的品牌来说近乎苦行僧式的克制。法拉利红#DA291C以外科手术般的稀疏出现——只保留给 Subscribe CTA 和需要立刻攫取注意力的强调时刻。界面的绝大部分生活在黑、白与一套精心校准的灰阶中从#303030深色表面经#8F8F8F中灰到#D2D2D2浅边框。两个黄色——Racing Yellow#FFF200与更深的 Modena Yellow#F6E500——作为传承色heritage accent存在于 Token 系统中专用于赛车相关的特殊语境。正因为克制当红色真正出现时它承载的是整个品牌的重量。DESIGN.md 总结的关键特征Key Characteristics明暗对切布局深黑区块与干净的白色编辑面板交替法拉利红#DA291C以极致稀疏使用——是强调不是氛围跃马标志作为孤立英雄元素悬浮于虚空般的纯黑背景上FerrariSans 专有字体紧凑比例、中等字重摄影纪实类图像概念车渲染、车手肖像、车型列队——每个区块都是一个故事大写 Body-Font 标签配 1px 宽字距形成编辑式注解层接近零的圆角默认 2px反映精密工程美学双框架架构PrimeReact Element Plus驱动 32 个交互组件这是对其官网实现的分析结论轮播驱动的英雄区带箭头/圆点导航的编辑式幻灯。3. 色彩系统完整角色表以下是 DESIGN.md 中的完整色彩角色定义每个颜色都有明确的职责边界且原文给出了其在法拉利站 CSS 变量系统中的对应 Token 名--f-color-*前缀属于对原站的分析记录。3.1 主色Ferrari Red#DA291C标志性的 Rosso Corsa——主强调色与 CTA 色用于 Subscribe 按钮、关键行为触发点以及需要最大视觉权威的品牌时刻。这是系统中最重要的单一颜色--f-color-accent-100。Pure White#FFFFFF编辑内容面板、深底上的导航文字与按钮填充的主表面色为深色电影感区块之间提供呼吸空间--f-color-ui-0。3.2 次级与强调色Dark Red#B01E0A法拉利红的加深变体用于 hover/pressed 状态与高对比语境——为品牌色增加维度而不引入新色相--f-color-accent-90。Deep Red#9D2211饱和度最高的深红用于 active 状态与更强的强调--f-color-accent-80。Racing Yellow#FFF200来自法拉利赛车涂装的传承色——保留给特殊高亮与赛车运动语境--f-color-yellow-hypersail。Modena Yellow#F6E500比 Racing Yellow 略暖、更偏金——用于次级传承强调与分类标记--f-color-yellow。3.3 表面与背景Absolute Black#000000英雄区、电影感背景与主深色表面——让图像与跃马标志得以悬浮的虚空。Dark Surface#303030页脚、订阅区与层叠深面板的次级深表面——从纯黑轻微抬升以做深度区分--f-color-ui-90。Light Gray Surface#D2D2D2白色面板上分隔线与边框处理的微妙的替代表面--f-color-ui-20。Overlay Darkhsla(0, 0%, 7%, 0.8)模态遮罩与图像题字背景的半透明近黑--f-color-overlay-darker。3.4 中性色与文本Near Black#181818浅色表面上的正文主色——比纯黑略软以提升可读性也是链接默认色。Dark Gray#666666次级文本与低调 UI 标签--f-color-black-60。Mid Gray#8F8F8F元数据、时间戳与辅助内容的三级文本--f-color-black-50。Silver Gray#969696占位符文本与禁用状态指示--f-color-black-55。3.5 语义色Warning Red#F13A2C可访问的告警状态——比法拉利红更亮、更偏橙刻意与品牌表达区分--f-color-accessible-warning。Success Green#03904A确认与正向状态指示--f-color-accessible-success。Info Blue#4C98B9信息提示、工具提示与中性状态消息--f-color-accessible-info。Link Hover Blue#3860BE文本链接的交互 hover 态——一种庄重而克制的藏蓝指示可交互性而不与法拉利红竞争。3.6 渐变系统Token 系统中没有显式渐变深度由摄影图像与黑白表面之间的二元对比实现--f-color-overlay-darkerhsla(0, 0%, 7%, 0.8)通过对图像做透明层叠创造深度偶发的摄影渐变棚拍中的光衰减在图像内容内部提供氛围深度。4. 字体系统双字体层与 13 级层级4.1 字体族FerrariSans主字体用于标题、导航、按钮与编辑内容。专有无衬线体默认中粗500紧凑 x 高度精确的字距控制。回退栈Arial, Helvetica, sans-serif。Body-Font次级字体用于题字、标签与工具性文本。常以大写字母加展开字距1px呈现形成编辑式标签美学用于分类标签与小号注解文本。Arial / Helvetica系统回退字体用于 Cookie 同意模态、表单元素与第三方组件框架。4.2 字体层级表完整继承自 DESIGN.md角色字号字重行高字距说明Section Title26px (1.63rem)5001.20normalFerrariSans白色背景上的主编辑标题Card Heading24px (1.50rem)400normalnormalFerrariSans内容卡片标题Subheading18px (1.13rem)7001.20紧normalFerrariSans加粗小节标签UI Heading16px (1.00rem)5001.400.08pxFerrariSans组件标题与导航项Body Bold16px (1.00rem)7001.30紧normalFerrariSans强调的内联文本Button Label16px (1.00rem)400normal1.28pxFerrariSans宽字距的主按钮文本Small Button14.4px (0.90rem)7001.00紧normalFerrariSans紧凑操作按钮Nav Link13px (0.81rem)6001.20紧0.13pxFerrariSans导航与页脚链接Caption13px (0.81rem)4001.500.195pxFerrariSans/Body-Font元数据与描述Micro Button12px (0.75rem)7001.00紧0.96pxFerrariSans宽字距的小 CTALabel Upper12px (0.75rem)4001.27紧1pxBody-Font大写标签与分类标签Micro Label11px (0.69rem)4001.27紧1pxBody-Font大写最小注解文本Cookie Text45px (2.81rem)4001.500.195pxArial同意对话框的超大按钮文本4.3 排版原则专有身份FerrariSans 为法拉利专属——不经替换就无法保留品牌识别度。紧凑比例与 500 默认字重传递工程精密感。双声部系统FerrariSans 承担叙事声部标题、内容、按钮Body-Font 承担结构性注解标签、标记、微型题字——对应印刷杂志中编辑文本 vs 技术标签的惯例。大写即强调工具Body-Font 题字使用text-transform: uppercase加 1px 字距创建一个视觉上可区分的标签层读起来像信息覆盖层而非主体内容。紧凑行高标题使用 1.00–1.30 的紧行高形成致密、有冲击力的文本块正文则放开到 1.50 保证阅读舒适——压缩的标题与松弛的正文之间的对比制造了视觉张力。字重范围 400–700系统中四个字重同时活跃400、500、600、700——范围显著宽于同类克制型系统但仍受控。500 是默认声部700 用于强调400 用于正文600 用于导航。5. 组件样式建筑式 CTA 与电影式卡片5.1 按钮DESIGN.md 的定性判断法拉利的按钮是近零圆角的极简矩形——CTA 哲学是建筑而非装饰。Primary CTA白色——默认动作按钮默认bg#FFFFFF文字#000000fontSize 16pxFerrariSansletterSpacing 1.28pxpadding 12px 10pxborderRadius 2pxborder 1px solid#000000Hoverbg#1EAEDBTeal文字#FFFFFFopacity 0.9Focusbg#1EAEDB文字#FFFFFFborder 1px solid#FFFFFFoutline 2px solid#000000opacity 0.9用途亮色背景上的 Configure 动作与次级号召。Subscribe CTA红色——高强调动作按钮默认bg#DA291C法拉利红文字#FFFFFFborderRadius 2pxpadding 12px 10px用途Newsletter 订阅、深色背景上的主转化动作它是唯一使用法拉利红的按钮——保留给最大视觉优先级。Ghost Button白边——深色背景专用默认背景透明文字#FFFFFFborder 1px solid#FFFFFFborderRadius 2pxpadding 12px 10pxHoverbg#1EAEDBTeal文字#FFFFFFopacity 0.9Focus与 Primary CTA 的 focus 态一致用途叠加在深色影像与电影感区块上的动作。Text Link文本链接——内联导航默认浅色表面用#181818深色表面用#FFFFFF无边框、无背景Hover颜色切换到#3860BELink Hover Blue去除下划线深底白色变体默认带下划线装饰按语境使用 FerrariSans 或 Body-Font大写字母链接标签用 Body-Font。5.2 卡片与容器Editorial Card编辑卡片白色背景、无边框、无阴影布局为上图下文图像全宽铺满卡片、无圆角文本为 FerrariSans 标题16–24px Body-Font 大写题字12–13px。Dark Cinematic Card深色电影卡#000000背景全出血影像叠加文字无边框无阴影——黑暗本身就是容器文字白色用审慎的负空间定位。Vehicle Lineup车型列队轮播车型缩略图横向滚动行每台车置于中性/白色背景上箭头按钮 圆点指示器导航背景随所选车型的颜色语境切换。5.3 输入与表单Newsletter Input页脚区深色表面上的透明背景、白色文字、border 1px solid#CCCCCC、占位符#969696Silver Gray、focus 时边框颜色过渡、Body-Font 大写标签12px1px 字距。Cookie Consent模态白色背景、模态圆角 8px、阴影rgb(153, 153, 153) 1px 1px 1px 0px、超大按钮45px Arial、白底黑边、使用标准 PrimeReact/Element Plus 模态框架。5.4 导航与图像桌面导航跃马标志居中置于页面顶部主导航位于其下方——不是传统横向导航条而是黑底全宽页眉块Logo绝对黑上居中的跃马标志44×42px是单一最突出的 UI 元素链接FerrariSans、13px、字重 600、深底白字移动端汉堡菜单折叠为纵向导航抽屉页脚#303030Dark Surface上的多列布局分类链接用 Body-Font 大写观察到无粘性导航行为——页眉随页面自然滚动出屏。图像处理英雄区为黑底全宽编辑摄影概念车在氛围式棚灯下、电影构图的人物肖像宽高比混合——英雄区 16:9 横向、近方形用于肖像/车手影像、超宽全景用于车型列队英雄图全出血编辑内容图在白色容器内留边距首屏外区块渐进加载所有图像均为棚拍级艺术指导无 UGC 或生活化影像。轮播组件带圆点指示、边缘箭头、自动前进加手动覆盖内容为事件回顾、车型发布、赛车亮点等混合编辑内容。6. 布局原则留白即展墙基础单位8px检测到的系统基准间距刻度1px、2px、4px、5px、6px、9px、10px、11.2px、12px、13px、15px、16px、19px、20px、25px按钮 padding12px 垂直 / 10px 水平——紧凑而精确区块 padding主要内容块之间 40–80px 的慷慨垂直留白估算值卡片间距网格项之间 16–20px页脚 padding深色页脚块内 25px 水平段间距。网格与容器最大宽度 1920px最大断点并在更窄宽度收敛内容英雄区黑底全出血、内容居中编辑区块为图文两栏交替换边车型列队为横向滚动桌面宽度下显示 5–6 台车页脚为 4 列链接分类网格。留白哲学法拉利把留白当作展墙——每个区块无论是黑虚空上的概念车渲染还是中性灰上的 F1 车手对都被赋予自己的房间。黑白交替区块创造节奏黑 沉浸时刻白 编辑内容黑 沉浸时刻。这个节拍让滚动像翻阅一份奢侈刊物。编辑卡片之间的留白为中等并非极端留白因为法拉利在讲故事而不是在展陈单件物品。圆角刻度Border Radius Scale值语境1px小内联元素span的轻微软化2px按钮、输入与交互元素默认值——几乎不可感知刀口般精确8px模态对话框与覆盖容器——最软的结构圆角50%圆形元素轮播圆点、头像缩略图、滑块手柄7. 深度与层级摄影即深度DESIGN.md 的层级表层级处理用途Level 0平面无阴影、无边框所有内容区块与卡片的默认态Level 1微妙rgb(153, 153, 153) 1px 1px 1px 0px极少——Cookie 同意对话框与下拉菜单Level 2覆盖hsla(0, 0%, 7%, 0.8)背景层模态覆盖与图像题字背景Level 3边框1px solid #CCCCCC输入框、表单容器——以界定而非阴影做深度阴影哲学法拉利对层级的处理近乎全平但理由与极简主义不同——它回避阴影是因为编辑摄影本身提供了所有需要的视觉深度。唯一的阴影 Tokenrgb(153, 153, 153) 1px 1px 1px 0px极其微妙是只用于同意对话框这类工具性语境的1 像素耳语。层级通过三种策略传达表面色对比黑色区块与白色区块之间的对比制造无可误解的层叠覆盖透明度80% 不透明度的--f-color-overlay-darker在不靠阴影的情况下创造深度摄影深度带反射、地面阴影与大气雾感的棚拍车图提供了全部视觉立体感。装饰性深度无 UI 渐变、无辉光、无界面元素上的模糊效果跃马标志在黑底上通过纯对比创造悬浮虚空效果无需任何辉光或阴影深色到亮色的区块切换是硬切hard cut而非渐变过渡——强化编辑翻页隐喻。8. Dos and Donts十二条可执行守则Do应做法拉利红#DA291C只 sparingly 使用——仅限主 CTA 与品牌关键时刻其力量来自克制黑电影感区块与白编辑区块交替创造标志性的明暗对切节奏标题默认使用 FerrariSans 字重 500——它是引擎轰鸣声的排版等价物所有标签、分类标记与结构注解使用 Body-Font 大写 1px 字距所有交互元素保持 2px 圆角——刀口般精确而非圆润友好让摄影承担情感重量——每张图都应是棚拍级艺术指导跃马标志作为独立英雄元素置于黑底——绝不让相邻内容拥挤它保持 12px/10px 按钮 padding 比例——紧凑、有目的、无多余正文用#181818Near Black而非纯#000000——微妙的暖度提升可读性黄色强调#FFF200、#F6E500严格保留给赛车与传承语境。Dont勿做不要把法拉利红散布作装饰——它是 CTA 信号不是主题色不要使用胶囊按钮或大圆角——2px 精确度不可谈判不要给卡片或内容容器加 box-shadow——深度来自表面色对比与摄影不要在同一个文本块内混用 FerrariSans 与 Body-Font——它们服务不同的层级职能不要使用彩色背景蓝、绿等做区块——调色板是纯粹的黑白灰加红黄强调不要对 FerrariSans 标题施加 text-transform——大写仅保留给 Body-Font 标签不要展示低质量或 UGC 影像——每张照片必须达到编辑标准Link Hover Blue#3860BE不得用于交互 hover 态以外的任何用途——它不是品牌色不要创建多焦点竞争的拥挤布局——每个区块应只有一个清晰故事不要用品牌色覆盖语义色系统warning/success/info——#F13A2C告警红被刻意区别于#DA291C品牌红。9. 响应式行为断点、触达与折叠策略9.1 断点表完整继承自 DESIGN.md名称宽度关键变化Mobile Small≤375px单列、最小 padding12px、堆叠导航、英雄文本缩至约 18px、全宽 CTAMobile376–600px单列、略大 padding16px、汉堡导航、正文 13pxTablet Small601–768px开始出现两列编辑网格、英雄图保持全宽、页脚切到 2 列Tablet769–960px完整两列布局、轮播显示 3 台车、padding 增至 20pxDesktop961–1280px完整导航、更大图像的两列编辑布局、车型列队显示 5 台Large Desktop1281–1920px最大内容宽度、慷慨留白、英雄摄影达到全电影感尺度9.2 触达目标主 CTA 按钮最小 44px 高、12px 垂直 padding达到 WCAG AAA 44×44px 目标导航链接13px 文本配 1.50 行高项间留有充足间距轮播箭头视口边缘处 44px 触达目标页脚链接分组并带 16–20px 垂直间距以保证触达精度。9.3 折叠与图像行为导航桌面横向导航在移动端折叠为中心跃马标志 汉堡菜单编辑区块图文两列折叠为单列图像堆叠在文本上方车型列队保持横向滚动行为可见车型从 5 台减少到 2–3 台页脚4 列链接网格在平板上折叠为 2 列移动端为单列手风琴英雄轮播所有断点下保持全宽圆点与箭头按比例缩放间距缩减区块 padding 从桌面 40–80px 缩至移动端 20–40px维持比例性呼吸感。图像行为英雄图所有断点全出血object-fit: cover保持电影感构图编辑图在容器内响应式且保持宽高比车型缩略图尺寸缩放但保持车框比例一致移动端裁切可收紧到车型主体、减少环境上下文首屏外图像由框架层做渐进加载。10. Agent Prompt Guide把规范变成可执行的提示词DESIGN.md 第 9 节专门为 Agent 提供了提示词指南这是整个文档中最具实战价值的部分。10.1 快速色彩参照主 CTAFerrari Red (#DA291C)亮色背景Pure White (#FFFFFF)深色背景Absolute Black (#000000)次级深表面Dark Surface (#303030)标题文本亮底Near Black (#181818)正文文本Dark Gray (#666666)三级文本Mid Gray (#8F8F8F)边框Border Gray (#CCCCCC)按钮 HoverTeal (#1EAEDB)链接 HoverLink Blue (#3860BE)10.2 组件级提示词范例Create a hero section on Absolute Black (#000000) background with a centered logo emblem at the top, generous vertical spacing (80px), and a single editorial headline in FerrariSans at 26px weight 500 in white, with a small Body-Font uppercase caption (12px, 1px letter-spacing) in Silver Gray (#969696) belowDesign a Subscribe section on Dark Surface (#303030) with a left-aligned headline in white FerrariSans (24px/500), a subtitle in Mid Gray (#8F8F8F, 13px), an email input with transparent background and 1px #CCCCCC border, and a Ferrari Red (#DA291C) Subscribe button with white text, 2px border-radius, and 12px 10px paddingBuild an editorial card on white background with a full-width image (16:9 ratio) above, a FerrariSans heading (16px/700, Near Black #181818) below, and a Body-Font uppercase label (11px, 1px letter-spacing, Mid Gray #8F8F8F) as the category tag — no border, no shadow, no border-radiusCreate a vehicle lineup carousel showing 5 car thumbnails in a horizontal scroll on white background, with left/right arrow navigation, dot indicators below, and a FerrariSans model name (16px/500) beneath each vehicleDesign a dark cinematic section with full-bleed studio photography of a concept car on Absolute Black, a white FerrariSans headline (26px/500) positioned in the lower-left with generous padding (40px), and a Ghost Button (transparent bg, 1px white border, white text, 2px radius) as the CTA10.3 迭代指南Iteration Guide对已生成屏幕做精修时一次只聚焦一个组件——法拉利的编辑式节奏意味着每个区块都是自足的短篇引用本文档中具体的颜色名与十六进制值——调色板虽小但每个颜色都有精确角色用自然语言描述而非 CSS 值——razor-sharp 2px corners 传达意图比 border-radius: 2px 更好在精确度量旁边描述期望的感觉——editorial magazine page-turn between sections 比 margin-bottom: 80px 更好地传达布局哲学永远维持明暗对比——如果某个区块显得扁平检查它是否该落在黑或白上以维持交替节奏每屏只为一个元素保留法拉利红——红色出现在多于一个位置时就会失去权威。11. 仓库层面的佐证从 DESIGN.md 到可执行 Token 契约DESIGN.md 记录的是对法拉利原站的视觉分析含--f-color-*原站 Token 名而 OpenDesign 真正在执行时注入生成物的是经过normalized归一化的语义化 Token 契约。manifest.json 中importMode: normalized明确声明了这一点。tokens.css 在单一:root块中声明了56 个 Tokendesign-tokens.json 的摘要段确认了这一点totalTokens: 56评分 100 / grade excellent并将其分层归类A1-identity8 个--bg: #0b0b0b、--surface: #171717、--fg: #fffaf0、--muted: #a89f91、--border: #342a24、--accent: #dc0000、--font-display/--font-body均为Ferrari Sans, Helvetica Neue, Arial, sans-serif栈B-slot4 个--surface-warm: #23130f、--fg-2: #e8dcc8、--meta: #ffd200赛车黄在归一化契约中的落位、--border-soft: #241f1bA1-structure18 个字号阶梯--text-xs: 12px→--text-4xl: 88px、--leading-body: 1.5/--leading-tight: 0.98、--tracking-display: -0.03em、区块纵向 padding--section-y-desktop: 112px/--section-y-tablet: 80px/--section-y-phone: 56px、容器--container-max: 1240px与三档 gutter40px / 28px / 18pxA226 个间距阶梯--space-14px至--space-1248px、圆角--radius-sm: 4px至--radius-pill: 9999px、状态色--success: #0f9d58/--warn: #ffd200/--danger: #ff3b30、阴影--elev-ring: 0 0 0 1px var(--border)与--elev-raised: 0 26px 80px rgba(0, 0, 0, 0.48)、焦点环--focus-ring: 0 0 0 4px rgba(220, 0, 0, 0.30)、动效--motion-fast: 130ms/--motion-base: 220ms与缓动--ease-standard: cubic-bezier(0.16, 1, 0.3, 1)。从源码结构看可以推断出两层的关系DESIGN.md 是品牌语义层描述原站的 2px 圆角、#DA291C等tokens.css是工程执行层归一化到跨品牌一致的 schema 命名如--accent: #dc0000、--radius-md: 8px。USAGE.md 明确解释了这种分工Preserve the schema token names exactly so cross-brand switching stays reliable——保持 schema Token 名不变跨品牌切换才可靠并且要求避免在复制的:rootToken 块之外出现裸 hex 值。这也解释了为什么 tailwind-v4.css 与design-tokens.json被标注为派生缓存而非独立真相源source/evidence.md 说明 design-tokens.jsonandtailwind-v4.cssare derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand。组件侧的执行证据在 components.html 与 components.manifest.json 中。fixture 共解析出 48 个选择器、26 个类、19 种元素归入 9 个组件组buttons、inputs、cards、badges、links、keyboard、icons、typography、layout其中 buttons 组引用了--accent、--focus-ring、--motion-fast、--ease-standard等 11 个 Token。以按钮实现为例components.html 第 135–157 行展示了完整的 Token 绑定方式.btn { display: inline-flex; align-items: center; min-height: 44px; /* 与 DESIGN.md 的 WCAG 44px 触达要求一致 */ padding: 0 var(--space-5); border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-primary { background: var(--accent); color: var(--accent-on); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }注意--accent-hover使用color-mix(in oklab, var(--accent), black 8%)这类派生表达式见 tokens.css 第 19–20 行hover/active 态不是手写第二组 hex而是从主强调色在 oklab 色彩空间自动混黑 8%/14% 得到——这是单一品牌色源原则在 Token 层的具体实现。此外components.manifest.json的tokens段还给出了审计信息56 个已声明 Token 中 7 个--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn在 fixture 中未被引用unusedDeclared而无任何未声明却被引用的 TokenundeclaredReferenced为空——即 fixture 与 Token 声明严格闭合。12. 在 OpenDesign 中使用该包按 design-systems/README.md 的机制从 Design System 界面或受支持的项目创建工作流中选择 Ferrari 包时系统会将其设计上下文组合进 Agent 提示词USAGE.md、tokens.css、组件信息、import mode、craft 绑定本包建议color与accessibility-baseline两条 craft 规则以及 manifest 派生的拉取索引都是活跃的运行时输入。目录由每次/api/design-systems请求实时扫描修改包后刷新 Design System 界面即可生效无需重启 daemon。实操检查路径视觉校验看 preview/colors.html、preview/typography.html、preview/spacing.html组件精确选择器查 components.htmlToken 契约审计看 source/token-contract.report.json。需要注意的证据边界source/evidence.md 声明本包derived from the curated OpenDesign bundled fixture即来自策展的内置 fixture并未对法拉利上游品牌仓库做新鲜抓取——因此 DESIGN.md 中的度量如 40–80px 区块 padding、44×42px Logo 尺寸应视为对原站的分析记录而工程落地的唯一可执行事实源是本包tokens.css的 56 项声明。13. 小结这套设计系统教给 Agent 的三件事克制的品牌色法拉利红是 CTA 信号而非氛围色每屏一个红色元素是最高优先级的构图约束黄色严格限定赛车语境语义色与品牌色绝不互换。明暗对切节奏黑区块沉浸、白区块编辑内容硬切换hard cut而非渐变过渡深度交给摄影与表面色对比阴影只留 1px 工具级耳语。双字体层 大写字母标签FerrariSans 叙事、Body-Font 注解大写 1px 字距是信息覆盖层的专属语法且大写只属于 Body-Font。配合 tokens.css 的 56 项归一化 Token、components.html 的 48 个选择器 fixture 与 USAGE.md 的读取顺序Ferrari 包给出了一个完整的参考范式DESIGN.md 承载视觉意图与反模式Token 契约承载可执行数值两者分层协作——前者告诉 Agent 为什么后者告诉 Agent 怎么写。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考