OpenDesign Revolut 设计系统包使用指南从 Tokens 契约到组件还原的 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本文是 OpenDesign 仓库中design-systems/revolut设计系统包Design System 2.0的完整技术指南面向使用 OpenDesign 的编码 Agent 与人工评审者。文章以包内契约文档 USAGE.md 为主线完整继承其阅读顺序、设计要点、Do/Avoid 清单并结合包内的 DESIGN.md、tokens.css、components.html 与 components.manifest.json 等真实文件展开源码级解析。读完你将掌握如何正确接入该包的 token 体系、如何在不破坏跨品牌切换的前提下还原 Revolut 式金融级视觉、以及如何用清单文件做组件复用与自检。一、包结构与阅读顺序先契约、后视觉、再组件该包遵循 OpenDesign 设计系统 2.0 的统一打包规范manifest.json 声明了schemaVersion: od-design-system-project/v1、importMode: normalized规范化导入并明确其source.type为bundled即来源于 OpenDesign 策展的捆绑 fixture而非对上游官网的实时抓取——这一点直接决定了下文避免声称存在原始上游证据的约束。包的顶层文件布局如下文件角色USAGE.md使用契约入口先读它DESIGN.md视觉意图、约束与反模式tokens.css唯一的 token 事实来源design-tokens.json规范化 token 清单派生产物tailwind-v4.cssTailwind v4 主题桥接派生产物components.html组件参考 fixture含精确选择器与状态components.manifest.json组件清单分组、选择器、token 引用preview/colors / typography / spacing 三页视觉预览source/审计证据evidence.md、token 契约报告、原始 token JSONUSAGE.md 给出的推荐阅读顺序是一个可操作的接入流程建议 Agent 严格照做先读本文件理解包契约再读 DESIGN.md掌握视觉意图、约束与反模式把tokens.css粘贴进第一个 artifact 的style块先于任何组件 CSS 的编写用 components.manifest.json 做紧凑的组件盘点当需要精确选择器或状态细节时打开 components.html需要视觉校验时检查preview/下的三张页面。二、设计要点速览该包到底在还原什么revolut包的设计目标是premium consumer-finance surfaces with bright blue action and polished dashboard cards高端消费金融表面 亮蓝行动色 精致的仪表盘卡片。其核心特征在 DESIGN.md 中被归纳为Aeonik Pro 显示字体136px / weight 500 的广告牌级金融头条近黑#191c1f 纯白的二元色底配以全面的--rui-*语义 token通用胶囊按钮9999px 圆角内边距充裕14px 32pxInter 正文正向字距0.16px–0.24px。同时需要说明的是包内存在两层事实DESIGN.md 描述的是上游 Revolut 官网风格近黑白、Aeonik Pro、--rui-*语义色而tokens.css 记录的是 OpenDesign 捆绑 fixture 的规范化实现Inter、亮蓝--accent: #0666eb、--bg: #f7f8fb浅底。两者的关系是灵感来源 vs 落地实现使用时应以 tokens.css 为准DESIGN.md 作为视觉意图与反模式约束的参照。三、Token 契约tokens.css 是唯一事实来源3.1 56 个 token 的四层结构design-tokens.json 的 summary 显示totalTokens: 56、declaredTokens: 56、sourceBackedTokens: 56契约评分为 100、等级excellent且recommendRebuild: false——即当前 token 样式表与契约完全对齐无需重建。56 个 token 按四层分布层级数量含义A1-identity8品牌身份色--bg、--surface、--fg、--muted、--border等A1-structure18结构 token字号、行高、字距、间距、圆角、动效、容器A226派生/功能 token--accent-hover、--accent-active等B-slot4槽位 token--surface-warm、--fg-2、--meta、--accent完整的 tokens.css 内容:root块如下Agent 应原样复制到 artifact 的style块中:root { --bg: #f7f8fb; --surface: #ffffff; --surface-warm: #eef4ff; --fg: #111827; --fg-2: #334155; --muted: #64748b; --meta: #0666eb; --border: #dbe3ef; --border-soft: #edf2f7; --accent: #0666eb; --accent-on: #ffffff; --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #16a34a; --warn: #f59e0b; --danger: #ef4444; --font-display: Inter, system-ui, sans-serif; --font-body: Inter, system-ui, sans-serif; --font-mono: SF Mono, ui-monospace, Menlo, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 36px; --text-3xl: 54px; --text-4xl: 76px; --leading-body: 1.5; --leading-tight: 1.02; --tracking-display: -0.03em; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --section-y-desktop: 104px; --section-y-tablet: 72px; --section-y-phone: 52px; --radius-sm: 12px; --radius-md: 20px; --radius-lg: 30px; --radius-pill: 9999px; --elev-flat: none; --elev-ring: 0 0 0 1px var(--border); --elev-raised: 0 24px 64px rgba(17, 24, 39, 0.12); --focus-ring: 0 0 0 4px rgba(6, 102, 235, 0.22); --motion-fast: 150ms; --motion-base: 240ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --container-max: 1180px; --container-gutter-desktop: 36px; --container-gutter-tablet: 28px; --container-gutter-phone: 18px; }3.2 关键 token 的语义与使用场合颜色层--bg页面底#f7f8fb、--surface卡片白、--surface-warm暖色面板#eef4ff、--fg主文本#111827、--fg-2次级文本、--muted弱化文本、--meta/--accent品牌亮蓝#0666eb主行动色、--border/--border-soft分隔线两级、--success/--warn/--danger语义状态色。accent 家族--accent是所有主行动、链接、焦点状态的统一信号--accent-hover与--accent-active用color-mix(in oklab, ...)在 OKLab 色彩空间下向黑混合 8% / 14%保证 hover/pressed 状态无需手写新色值即可保持一致品牌感。动效层--motion-fast: 150ms用于 hover 等微交互--motion-base: 240ms用于较大过渡--ease-standard: cubic-bezier(0.22, 1, 0.36, 1)是统一缓动曲线。布局层--container-max: 1180px容器上限--container-gutter-*三档响应式内边距36px / 28px / 18px--section-y-*三档区块纵向留白104px / 72px / 52px与 components.html 中的媒体查询一一对应media (max-width: 1023px)与media (max-width: 639px)。层级层--elev-flat: none与--elev-ring呼应 DESIGN.md 的零阴影原则而--elev-raised: 0 24px 64px rgba(17,24,39,0.12)用于面板卡片--focus-ring是统一的键盘焦点环。3.3 组件清单如何反映 token 使用度components.manifest.json 的tokens段做了声明 vs 引用的交叉核对56 个声明 token 中 49 个被组件实际引用--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn属于unusedDeclared保留以备语义完整但当前组件未使用undeclaredReferenced为空说明组件中没有出现引用却未声明的孤儿 token契约是闭合的。这也解释了为什么--accent是贯穿按钮、焦点、状态的核心信号。四、组件体系manifest 盘点 fixture 精确还原4.1 组件分组总览manifest 将组件归为 8 组其中 6 组存在present: truekeyboard与icons两组缺席分组状态覆盖类/选择器buttons存在.btn、.btn-primary、.btn-secondary及 hover/focus-visibleinputs存在.field、input、input:focus、labelcards存在.card-row、.panel、.panel-head、.tilebadges存在.status状态徽标links存在内联atypography存在.eyebrow、.lead、h1–h3keyboard缺席—icons缺席—fixture 统计1 个style块、48 个选择器、26 个 class、19 个元素类型。fixture 元数据还记录literals3 处颜色字面量、24 处像素值、4 处硬编码字体族——这些是需要审查的漏网之鱼。4.2 按钮体系含完整 CSS 还原以 components.html 第 135–157 行为准按钮基线类.btn如下.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow 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为底、--accent-on为字hover 走--accent-hover并上浮 1px次按钮是白底描边hover 时边框与文字同时染上品牌蓝。按钮引用 token 包括--accent、--accent-on、--border、--ease-standard、--elev-ring、--fg、--font-body、--motion-fast、--radius-md、--space-5、--surface、--text-smmanifest 中buttons分组的tokenReferences完整记录。注意实现中按钮圆角是--radius-md20px而非文档所说的胶囊 9999px——这正是fixture 落地与上游风格存在差异的例证还原时以 fixture 为准。4.3 表单、卡片与状态徽标输入框.field、input、input:focus、label.field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); } label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; } input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; } input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }卡片与面板.panel使用color-mix(in oklab, var(--surface), transparent 4%)微透明表面 --border描边 --radius-lg30px--elev-raised投影.panel-head是头部条下边框--border-soft.mini-card以--surface-warm暖底区分.tile是纯白描边小块。状态徽标.status以--font-mono小号大写字母 0.08em 字距呈现状态文本其::before是 8px 的--radius-pill圆点底色--success在线绿——Focus, hover, and status states share the same brand signal这一设计陈述在实现上就是让徽标、焦点环、输入框共用同一套语义 token。4.4 排版与响应式排版组.eyebrowmono 小号大写、--meta品牌蓝、0.12em 字距、.lead--fg-2、18px、h1--text-4xl: 76px、weight 700、--tracking-display: -0.03em。h1/h2/h3统一走--font-display--leading-tight1.02 负字距是显示字重 紧凑行高原则的实现。响应式断点组件 fixture 实际值与 DESIGN.md 的 5 档命名不同以 fixture 为准断点变化max-width: 1023px容器边距降为--container-gutter-tablet区块纵向留白降为--section-y-tabletmax-width: 860px.hero、.lower、.metric-grid、.card-row全部降为单列.metric边框从竖向改横向max-width: 639px容器边距降为--container-gutter-phone区块留白降为--section-y-phone五、Tailwind v4 桥接从 CSS 变量到实用类如果产出环境使用 Tailwind v4tailwind-v4.css 提供了官方桥接方式其头部注释明确声明Derived from tokens.css. Keep tokens.css as the source of truth.由 tokens.css 派生tokens.css 才是事实来源。用法import tailwindcss; import ./tokens.css; theme { --color-accent: var(--accent); --color-accent-on: var(--accent-on); --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-warm: var(--surface-warm); --color-fg: var(--fg); --color-fg-2: var(--fg-2); --color-muted: var(--muted); --color-border: var(--border); --color-border-soft: var(--border-soft); --font-display: var(--font-display); --font-body: var(--font-body); --font-sans: var(--font-body); --font-mono: var(--font-mono); --text-xs: var(--text-xs); /* ... 字号、行高、间距、圆角、阴影、动效、容器 token 逐一映射 ... */ }映射规律--color-*← 颜色 token--font-*← 字体--text-*← 字号--leading-*← 行高--tracking-*← 字距--spacing-*← 间距注意--spacing-1/2/3...与--spacing-section-*、--spacing-container-*的特殊命名--radius-*← 圆角--shadow-*← 层级--shadow-flat/ring/raised/focus-ring--duration-*← 动效时长--ease-*← 缓动。核心约束是所有值都通过var()回指 tokens.css绝不在此文件内重新定义色值这正是 USAGE.md 避免脱离 tokens.css 独立重定义设计 token 的落点。六、审计证据链source/ 目录的作用source/evidence.md 记录了该包的来源边界本包是 Design System 2.0 的 backfill基于 OpenDesign 策展的捆绑 fixture 派生未对上游原始品牌仓库或官网进行全新抓取It does not claim a fresh crawl of the original upstream brand repository or website收录的 fixture 文件为 DESIGN.md、tokens.css、components.html 三者source/token-contract.report.json 将每个 TOKEN_SCHEMA 绑定映射回已提交的tokens.css声明行design-tokens.json与tailwind-v4.css是派生产物应依据契约报告与 token 样式表重新生成而非手工编辑。这条证据链的实战意义当评审者质疑某个 token 值从哪来时可以直接用source/token-contract.report.json回溯到 tokens.css 的具体声明行同时它约束了表述边界——包内内容只能说是基于捆绑 fixture不能声称是上游原始证据。七、Do 与 AvoidAgent 的合规红线以下内容完整继承自 USAGE.md 并补充实现依据应当做Do严格保留 schema token 名称--accent、--bg、--surface等 token 名是跨品牌切换的契约键改名会破坏品牌切换的可靠性manifestimportMode: normalized正是依赖这些稳定名称做规范化导入。用--accent表达一切主行动主操作按钮、链接、焦点态、以及页面唯一焦点元素全部通过--accent家族含--accent-hover/--accent-active/--focus-ring实现保证品牌信号一致。先复用组件清单在发明新控件之前先检查 components.manifest.json 的 8 个分组——按钮、输入、卡片、徽标、链接、排版已齐备。把source/当作审计证据做 fixture backfill 校验时用source/token-contract.report.json与source/tokens.source.json作为核对依据。应当避免Avoid避免在复制的:roottoken 块之外使用裸十六进制色值所有颜色必须走语义 token保证未来品牌切换只改一处。避免脱离 tokens.css 独立重定义 Tailwind 或设计 token 值如第 5 节所示一切以 tokens.css 为唯一事实来源。避免声称存在原始上游来源证据本包基于策展的捆绑 fixture见source/evidence.md表述时必须与之相符。避免添加 components.html 或 DESIGN.md 中不存在的组件配方新增组件必须能回到这两个文件中找到依据。八、视觉意图速查与迭代自检清单DESIGN.md 提供的Agent Prompt Guide可作为产出时的快捷引用Quick Color Reference语义值DarkRevolut Dark#191c1fLightWhite#ffffffSurfaceLight#f4f4f4BlueRevolut Blue#494fdfDangerRed#e23b4aSuccessTeal#00a87e迭代自检顺序Aeonik Pro weight 500 用于标题——绝不使用 bold700所有按钮是胶囊9999px 圆角且内边距充裕14px 32px零阴影——扁平是该品牌的视觉身份营销表面只用近黑 白语义色仅用于产品界面。将该清单与本指南第 3、4 节的 fixture 实现对照即可发现落地版Inter #0666eb亮蓝 20px 圆角按钮是策展 fixture 对上游风格的规范化演绎评审时应分别以 DESIGN.md 审意图、以 components.html 审实现二者各有其用。九、产出校验清单完成一次 Revolut 风格还原后建议按以下顺序自检:roottoken 块是否完整复制且未被修改对照 tokens.css页面中是否还存在 tokens.css 之外的裸色值/像素值对照 manifest 的literals统计主行动是否都通过--accent家族表达焦点态是否使用--focus-ring新增交互控件是否能在 components.manifest.json 中找到对应分组与选择器描述性表述是否遵守source/evidence.md的bundled fixture边界。这套流程既适用于编码 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），仅供参考