企业官网建设流程全解析

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 样式表（canonical）

Renault 包（design-systems/renault/）是这一约定下的"富包"（rich package）范例——在三个必需文件之外，它还声明了 USAGE.md、components.html、components.manifest.json、design-tokens.json、tailwind-v4.css、preview/预览页与source/来源证据目录。

它的 manifest.json 记录了包的身份信息：id为renault，类别是Automotive，importMode为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 风格产物时必须遵循的操作序列：

1. 先读 USAGE.md 本身，理解整个包的契约（contract）范围；
2. 再读DESIGN.md，获取视觉意图、约束与反模式（anti-patterns）——即"为什么这么做"；
3. 把tokens.css粘贴进第一个产物的<style>块，在编写任何组件 CSS 之前先建立 token 基础；
4. 用components.manifest.json作为紧凑的组件清单，当需要精确选择器或状态细节时再打开components.html；
5. 检查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 黄只用于最高优先级的 CTA（super-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"原则，核心色板如下：

排版上使用真正的黑（#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/700：

• Super Primary（黄）：底色#EFDF00、文字#000000，边框1px solid #EFDF00，minHeight/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）。容器最大宽度 1440px，hero 全出血通栏。圆角量表区分 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: #111111，hover/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-ring（0 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.json：Design Tokens 格式的 JSON 输出，由 token 契约报告派生，必须与tokens.css一致；
• tailwind-v4.css：Tailwind 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 使用分析区分了declared（56 个）与referenced（44 个），并标出 7 个已声明未使用的 token（--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn），undeclaredReferenced为空——即不存在"未声明却被引用"的游离 token，契约闭环。

清单将组件归纳为九个语义分组（groups），其中六个present: true：

USAGE.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 与 Avoid：Agent 必须遵守的红线

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 章的 Do's and Don'ts 互相印证：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 价格说明、Ghost"Configure"按钮）、深色 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