OpenDesign 设计系统包 Renault 使用指南从阅读顺序到 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 仓库内置的 Renault 设计系统包Design System 2.0为核心系统讲解该包的目录契约、推荐阅读顺序、设计语言要点、语义 token 绑定、组件清单与来源审计机制。读完本文你将掌握如何在 OpenDesign 的 Agent 工作流中正确加载、解读并复用 Renault 包——从把tokens.css粘贴进产物style块到用components.manifest.json检索组件、用preview/页面做视觉核验再到遵守跨品牌切换时不得改写 schema token 名称的硬性约束。一、包是什么Renault 设计系统包在 OpenDesign 中的定位OpenDesign 仓库在 design-systems/ 目录下维护了 151 个便携式设计系统包每个子目录都是一份可独立分发的设计上下文。按照 design-systems/README.md 的约定每个捆绑包至少包含三个必需文件design-systems/slug/ ├── manifest.json # 发现元数据、来源溯源与声明路径 ├── DESIGN.md # 供 Agent 阅读的规范设计散文canonical design prose └── tokens.css # 可编译的语义 token 样式表canonicalRenault 包design-systems/renault/是这一约定下的富包rich package范例——在三个必需文件之外它还声明了 USAGE.md、components.html、components.manifest.json、design-tokens.json、tailwind-v4.css、preview/预览页与source/来源证据目录。它的 manifest.json 记录了包的身份信息id为renault类别是AutomotiveimportMode为normalized归一化导入并建议应用color与accessibility-baseline两项 craft 规范。值得注意的是manifest.source明确标注type: bundled、origin: OpenDesign curated bundled fixture——该包不是对雷诺官网的实时抓取而是基于 OpenDesign 官方整理的捆绑 fixture 衍生而来这一来源声明直接决定了后文Avoid清单中的若干约束。在运行时OpenDesign 的 prompt 组合prompt composition会消费USAGE.md、tokens.css、组件信息、导入模式与 craft 绑定来组装 Agent 提示目录在每次/api/design-systems请求时被重新扫描因此修改包后无需重启 daemon。二、阅读顺序Agent 与评审者的标准路径USAGE.md 是全包的入口文件它开篇就规定了五步阅读顺序Read Order这也是 OpenDesign Agent 在生成 Renault 风格产物时必须遵循的操作序列先读 USAGE.md 本身理解整个包的契约contract范围再读DESIGN.md获取视觉意图、约束与反模式anti-patterns——即为什么这么做把tokens.css粘贴进第一个产物的style块在编写任何组件 CSS 之前先建立 token 基础用components.manifest.json作为紧凑的组件清单当需要精确选择器或状态细节时再打开components.html检查preview/页面当需要视觉 sanity check 时使用。这套顺序的本质是契约 → 意图 → token → 组件 → 视觉的渐进式上下文加载先知道包的边界再理解设计哲学然后落地样式基础接着复用既有组件最后做视觉验证。从源码结构看preview/目录下提供了 preview/colors.html、preview/typography.html、preview/spacing.html 三个独立预览页分别覆盖色彩、排版与间距三个维度的可视化核验恰好与manifest.preview.pages的声明一一对应。三、设计亮点Renault 设计语言的四个签名特征USAGE.md 用四条Design Highlights浓缩了整套设计语言的本质结合 DESIGN.md 可以进一步还原其背后的设计逻辑1. 全屏 Hero 轮播与极光渐变背景。页面以全视口 hero 轮播开场洋红/紫罗兰/青色magenta/violet/teal的极光渐变在车身摄影后方铺开。需要强调的是DESIGN.md 明确指出这些是摄影/合成photographic/composited而非 CSS 渐变——因此规范里有一条硬约束禁止在 UI 表面使用扁平 CSS 渐变唯一的合法渐变是照片化 hero 极光与保证文字可读性的深色遮罩。2. NouvelR 专有字体与 28 度radical r。NouvelR 是 Black[Foundry] 为雷诺 2021 品牌重塑设计的几何无衬线字体其签名细节是字母 r 的终端以精确的 28 度切割与雷诺菱形 logo 的角度呼应。该字体提供 Light 至 Extrabold 六个字重覆盖拉丁、希腊、西里尔、希伯来、阿拉伯与韩文六套书写系统CSS 中以NouvelR, sans-serif声明。与法拉利FerrariSans Body-Font、兰博基尼LamboType Open Sans的双字体体系不同Renault 使用单一字体族处理标题、正文、按钮、说明与导航的全部文本。3. Renault Yellow#EFDF00作为超级主强调色。品牌签名 Pantone 黄只用于最高优先级的 CTAsuper-primary对应.is-cta-super-primary类上的--CtaLink-background-color。它是 CTA 信号而非氛围色规范明确禁止将其用作区块或表面的背景色。4. 全按钮零圆角。所有按钮都是尖锐的直角矩形border-radius: 0传递精密工程感。这是一个不可协商的品牌标记——唯一允许使用胶囊圆角46–50px的是搜索输入框与筛选元素。四、设计体系深度解析视觉主题、色彩、排版与组件如果说 USAGE.md 是操作手册DESIGN.md 就是这套系统的设计宪法。它用九个实质性章节多于 README 要求的七个 H2 下限完整规定了视觉语言以下按主题归纳。4.1 视觉主题与氛围有序结构与彩色内容的对照Renault 官网是结构克制、内容鲜活的典型界面框架纪律严明NouvelR 排版、黑白 CTA 体系、零圆角按钮内容则被色彩点燃hero 渐变、饱和车辆摄影、Renault Yellow 点缀。布局遵循卡片化编辑节奏——hero 下方是由 PromoCard 组成的网格每张卡片都是全出血full-bleed照片面板顶部叠加从rgba(0,0,0,0.6)到透明的深色渐变确保白色标题文字在鲜艳影像上保持可读。明暗卡片交替形成棋盘式节奏白色编辑面板与黑色is-alternative-mode区块并置页面下部切换为 Absolute Black 画布展示 E-Tech 电动与科技内容形成电动在黑暗中、传统在光明中的情绪转换。4.2 色彩系统单色加黄的极简策略DESIGN.md 的色彩体系遵循monochrome-plus-yellow原则核心色板如下角色色名色值用途主色Renault Yellow#EFDF00超级主 CTA最高优先级动作按钮主色Absolute Black#000000主按钮背景、浅色表面标题、深色区块表面主色Pure White#FFFFFF编辑内容主表面、反色按钮背景、hero 文字次级Soft Yellow#F8EB4C黄色 CTA 的 hover/pressed 态次级Renault Blue#1883FD所有链接变体的 hover 色唯一的交互性彩色信号次级Warm Gray#D9D9D6禁用态、非激活 UI、柔和边框表面Charcoal#222222文本密集深色区块的次级深色表面--rt-color-dark表面Pale Silver#F2F2F2浅色差异化表面与卡片边框语义Success Green / Error Rose / Warning Amber / Info Blue#8DC572/#BE6464/#F0AD4E/#337AB7表单与状态指示禁止装饰性使用排版上使用真正的黑#000000而非近黑正文同样为黑色深色表面上的文本用纯白。这些色值在 USAGE.md 的 Agent 快速参考Quick Color Reference中再次以自然语言形式出现便于提示词直接引用。4.3 排版层级单一字体的极端伸缩DESIGN.md 给出了完整的 16 级字号层级表覆盖从 56px hero 标题到 8.5px 法律小字Micro Caption的极端范围。关键原则有三Bold 默认700 占据标题层级区别于使用 medium 500 的品牌超紧凑 display 行高hero 与区块标题行高 0.95行近乎相撞形成紧迫现代的排版肌理28 度 radical r品牌身份嵌入每个字符。部分说明文字使用text-transform: capitalize而 micro text 使用lowercase构成层级信号的反转。4.4 组件样式从按钮到轮播的完整规范按钮体系分四类全部零圆角、padding: 10px 15px、NouvelR 16px/700Super Primary黄底色#EFDF00、文字#000000边框1px solid #EFDF00minHeight/minWidth 46px用于configure / buy now等高优先级转化Primary黑底色#000000、文字#FFFFFF反色模式为白底黑字用于keşfedin探索等次级转化Ghost描边透明底 白/黑描边用于ilk sen öğren抢先了解/ satın alın购买Text Link默认无边框无背景hover 一律转为#1883FD雷诺蓝。卡片与容器PromoCard 分浅色与深色is-alternative-mode两型均采用全出血摄影 顶部linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%)遮罩、零圆角、无阴影无边框VehicleRangeCard 为透明底车型展示卡仅靠 grid gap 分隔。输入框是系统的有意例外搜索输入框为胶囊形border-radius: 50px、白底、1px solid #D1D1D1边框、padding: 6px 35px 6px 15px右侧留白放置搜索图标、NouvelR 12.8px——这是对零圆角按钮体系的刻意偏离胶囊形保留给输入元素、绝不给动作元素。导航桌面端为白色无阴影 sticky 导航 13px/700 黑色链接hover 转蓝移动端折叠为全屏抽屉导航内主 CTA 为黑色 Primary 按钮。轮播为全屏自动播放轮播带圆点指示器与边缘箭头每页由渐变/照片背景 车辆图 标题 CTA 组成。4.5 布局、间距与阴影间距以 8px 为基本单位按钮内边距统一10px 15px区块纵向留白 40–80px卡片 gap 16–24px最小可交互尺寸 46×46px超过 WCAG AAA 的 44×44px。容器最大宽度 1440pxhero 全出血通栏。圆角量表区分 0px按钮/卡片、2px区域控件、3px内容面板、4px标签、46px/50px胶囊输入。阴影系统共七级Level 0–6从rgba(0,0,0,0.2) 0px 4px 8px的 hover 轻浮起到rgba(0,0,0,0.15) 0px 40px 80px的深面板其中 Level 3 复合阴影紧致深色 rgba(50,50,93,0.1)宽泛紫调用于营造拟真浮起效果Level 6 环境光rgb(199,197,199) 0px 0px 12px 2px以暖灰呼应品牌暖色调。UI 元素不使用模糊效果深度全靠阴影与色彩对比传达。4.6 响应式行为断点体系覆盖 425px 以下到 1440px 以上共七档移动端单列全宽卡片、hero 标题缩放至 ~32px、CTA 纵向堆叠、导航折叠为汉堡菜单平板端 PromoCard 开始 2 列桌面 1025–1280px 进入完整 3 列布局1281–1440px 为最大内容宽度居中容器。折叠策略包括导航 → logo汉堡3 列卡片 → 2 列 → 单列车型横排始终保留水平滚动页脚多列 → 移动端单列手风琴。图片统一object-fit: cover全出血适配移动端可裁剪为更紧凑的车身取景。五、Token 契约tokens.css 与派生文件的层级关系USAGE.md 强调保留 schema token 名称不变以保证跨品牌切换可靠这正是 tokens.css 存在的意义。该文件在:root中声明了 56 个语义 token按功能可分为五组色彩--bg: #f7f4ef、--surface: #ffffff、--surface-warm: #fff4bf、--fg: #111111、--fg-2: #3f3f3f、--muted: #6f6b63、--meta: #ffcc33、--border: #dfd8ca、--border-soft: #ece6db以及强调色--accent: #ffcc33、--accent-on: #111111hover/active 用 CSScolor-mix(in oklab, ...)动态派生8%/14% 掺黑语义色--success: #198754、--warn: #f59e0b、--danger: #d92d20字体--font-display与--font-body均为Renault Group, Helvetica Neue, Arial, sans-serif另有等宽字体--font-mono字号/行高/字距--text-xs(12px) 至--text-4xl(82px) 七档--leading-body: 1.5、--leading-tight: 1.02、--tracking-display: -0.03em间距/圆角/阴影--space-1(4px) 至--space-12(48px) 八档、--section-y-*三档区块纵距、--radius-sm/md/lg/pill(4/8/14/9999px)、--elev-flat/ring/raised、--focus-ring0 0 0 4px rgba(255,204,51,0.36)黄色焦点环动效/容器--motion-fast: 140ms、--motion-base: 230ms、--ease-standard: cubic-bezier(0.16, 1, 0.3, 1)、--container-max: 1220px与三档容器 gutter。围绕这份契约source/token-contract.report.json 对每个 token 做了逐条回源映射每条记录含layer、value、confidence: high与sources行号汇总显示56 个 token 全部有源码背书sourceBackedTokens: 56分层为 A1-identity 8 个、A1-structure 18 个、B-slot 4 个、A2 26 个契约评分 100 分、评级 excellent、无需重建。同时存在一组派生文件derived outputs它们不是并列的事实源而是缓存design-tokens.jsonDesign Tokens 格式的 JSON 输出由 token 契约报告派生必须与tokens.css一致tailwind-v4.cssTailwind v4 映射头部注释明确Derived from tokens.css. Keep tokens.css as the source of truth通过theme块把--color-*、--text-*、--spacing-*等命名空间逐一桥接到tokens.css的原始变量components.manifest.json由components.html与tokens.css派生。source/evidence.md 进一步声明design-tokens.json与tailwind-v4.css应依据报告与 token 样式表重新生成而非手工编辑。这正是 USAGE.md Treatsource/files as audit evidence把 source/ 文件当作审计证据的落点。从源码结构可以推断组件 fixture 的:root块components.html 第 9–66 行与tokens.css逐字一致证明组件产物确实以 tokens.css 为唯一 token 来源。需要客观指出的一点DESIGN.md 记录的原始品牌分析如 Renault Yellow#EFDF00、零圆角按钮与归一化后的 tokens.css 绑定值--accent: #ffcc33、按钮border-radius: var(--radius-md) 8px并不完全等同。前者描述的是对上游网站的视觉观察后者是 OpenDesign 打包时整理的可编译语义 token——两层职责不同使用时应注意区分设计意图文档与实现契约文件。六、组件清单与产物核验manifest 与 fixture 的使用components.manifest.json 是组件的紧凑索引fixture 统计显示components.html含 1 个 style 块、48 个选择器、26 个类、19 个元素。token 使用分析区分了declared56 个与referenced44 个并标出 7 个已声明未使用的 token--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warnundeclaredReferenced为空——即不存在未声明却被引用的游离 token契约闭环。清单将组件归纳为九个语义分组groups其中六个present: true分组关键类/元素引用 token 示例buttons.btn、.btn-primary、.btn-secondary--accent、--accent-on、--elev-ring、--motion-fastinputs.field、input、label--border、--radius-sm、--space-4cards.card-row、.panel、.panel-head、.tile--elev-raised、--radius-lg、--surfacebadges.status—linksa—typography.eyebrow、.lead、h1–h3--text-4xl、--text-xl、--fg-2layout.container、section、.metric-grid--container-gutter-*、--section-y-desktopUSAGE.md 的规则是从components.manifest.json复用组件分组而不是发明新控件——当需要精确选择器或状态时再打开 components.html。该 fixture 是一个完整的可运行页面hero 区块、panel实时模块含status状态徽标、metric-grid指标、mini-card双卡片、以及lower区三个tile完整示范了按钮、输入框、色板 swatch 的实际组合方式。system/目录另提供 system/kit.html 组件 kit 与kit.dark.html深色变体适合更完整的视觉走查。七、Do 与 AvoidAgent 必须遵守的红线USAGE.md 以明确的 Do/Avoid 两栏规定了使用边界这是全包最重要的操作性约束完整继承如下Do应当遵守精确保留 schema token 名称使跨品牌切换保持可靠使用--accent承担主操作、链接、焦点状态与一个明确的焦点元素优先从components.manifest.json复用组件分组再考虑发明新控件将source/文件当作捆绑 fixture 回填backfill的审计证据。Avoid必须避免避免在复制的:roottoken 块之外使用裸 hex 值避免独立于tokens.css重新定义 Tailwind 或设计 token 值避免声称有原始上游来源证据——本包基于官方整理的捆绑 fixture非实时抓取避免添加components.html或DESIGN.md中未呈现的新组件配方。这些红线与 DESIGN.md 第 7 章的 Dos and Donts 互相印证Renault Yellow 只能用于超级主 CTA、按钮零圆角不可破坏、单一字体纪律、每个区块内不得混用多个彩色强调色、语义色禁止装饰性使用、hero 的 56px 字号不得下移到首屏以下、胶囊形只属于输入元素、UI 表面禁用扁平 CSS 渐变。两处规范一操作一意图共同构成完整的护栏。八、Agent 提示指南与迭代方法针对生成式工作流DESIGN.md 第 9 章提供了两条可直接套用的方法论快速颜色引用把颜色名与 hex 直接写进提示词——Renault Yellow (#EFDF00)用于超级主 CTA、Absolute Black (#000000)用于默认主 CTA 与深色背景、Pure White (#FFFFFF)用于浅色背景、Charcoal (#222222)用于次级深色、Renault Blue (#1883FD)用于链接 hover。示例组件提示文档给出五个完整可复制的自然语言提示模板涵盖 hero 区块全视口极光渐变 居中车辆图 56px/0.95 NouvelR Bold 白色标题 Primary/Ghost 双按钮、PromoCard全出血摄影 深色遮罩 40px 白色标题 反色 Primary 按钮、车辆网格3 列、透明底渲染、24px 型号名、14px 价格说明、GhostConfigure按钮、深色 E-Tech 区块黑色画布 Renault Yellow 超级主按钮与胶囊搜索输入框50px 圆角、12.8px 文本、右侧图标留白。迭代指南当需要精修既有画面时——每次只聚焦一个组件Renault 的组件边界清晰PromoCard、VehicleRangeCard、CTA 变体引用具体色名与 hex用自然语言而非 CSS 值描述意图sharp zero-radius rectangle比border-radius: 0更能传达意图在具体数值旁同时描述感觉assertive automotive energy比font-weight: 700更能传达 NouvelR Bold 的性格始终检查明暗归属是否符合棋盘式交替每屏只保留一个 Renault Yellow 按钮黄色出现在两个 CTA 上层级就会崩塌。九、来源与审计捆绑 fixture 的可追溯性Renault 包的来源证据集中在source/目录source/evidence.md 声明这是基于 OpenDesign 捆绑 fixture 的 Design System 2.0 回填不声称对原始品牌仓库或网站的重新抓取source/token-contract.report.json 将每个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行如--bg→tokens.css:7。这与 design-systems/README.md 的工程约束一致manifest 与包质量守卫package-quality guards会校验声明路径、富包档案、派生文件一致性、token 契约、组件 fixture、来源证据与预览覆盖品牌引用包仅是美学灵感并非所引用品牌的官方资产。整套机制保证了 Agent 可以放心地把该包当作可信输入token 有回源、组件有 fixture、预览有页面、派生文件可再生成。十、在 OpenDesign 中启用 Renault 包要使用这套系统无需手动复制文件在 OpenDesign 的 Design System 界面选择 Renault或在受支持的项目创建工作流中选定它其设计上下文即被组合进 Agent 提示。目录在每次/api/design-systems请求时重扫修改包后刷新界面即可生效。包内预览页可直接在浏览器打开做视觉核验tokens.css可作为任何新产物style块的基座tailwind-v4.css则提供了 Tailwind v4 项目的桥接层——但无论哪种接入方式都请记住 USAGE.md 的核心告诫tokens.css 是唯一事实源派生文件只可再生成、不可手改token 名称是跨品牌切换的契约一个字都不能动。至此你已经掌握了 Renault 包的完整使用闭环按 Read Order 加载上下文 → 用 DESIGN.md 建立设计意图 → 以 tokens.css 落地 token 契约 → 借 manifest 与 fixture 复用组件 → 靠 preview 与 source 完成核验与审计。这套方法论同样适用于 OpenDesign 仓库中其余 150 个设计系统包因为它们共享同一份最小机器可读结构。【免费下载链接】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），仅供参考