OpenDesign 设计系统包实战解析HashiCorp 企业级基础设施设计语言DESIGN.md 全量指南【免费下载链接】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本指南以design-systems/hashicorp/DESIGN.md为骨架结合tokens.css、components.html、manifest.json、USAGE.md等仓库文件系统讲解 OpenDesign 中 HashiCorp 设计系统包的双模式视觉语言、多产品色彩体系、工程级排版规则与 Whisper 级阴影哲学。读完你将掌握如何在 OpenDesign 的 Agent 工作流中按契约消费该设计包、如何用--mds-color-*/语义 token 复刻 HashiCorp 的「昼夜双模」界面以及如何编写能被编码 Agent 直接执行的设计提示词。HashiCorp 的官网是把企业基础设施「具象化」的典型样本它必须同时传达云基础设施管理的复杂度与亲近感。OpenDesign 将这套视觉语言固化成一个可移植的设计系统包design-system package位于 design-systems/hashicorp/。这个包不只是静态的样式快照而是一套面向 Agent 与 LLM 的「可执行设计契约」——DESIGN.md是给 Agent 的规范散文tokens.css是编译后的语义 token 样式表components.html是组件证据夹具。本文逐一拆解其全部规则并给出源码级实现依据。1. 包结构一个设计系统包的最小可移植形态在 OpenDesign 中每个设计系统子目录都是一个便携包。据 design-systems/README.mdHashiCorp 包符合「最小机器可读形态」manifest.json发现元数据与来源、DESIGN.mdAgent 规范、tokens.css编译后的语义 token 样式表。HashiCorp 包还补齐了丰富的派生文件design-systems/hashicorp/ ├── manifest.json # 包发现元数据、来源、文件清单 ├── DESIGN.md # 规范散文本文主体 ├── USAGE.md # Agent 阅读顺序与使用守则 ├── tokens.css # 语义 token 权威样式表 ├── design-tokens.json # 派生Design Tokens JSON56 个 token ├── tailwind-v4.css # 派生Tailwind v4 映射 ├── components.html # 组件证据夹具53 个选择器 / 27 个类 ├── components.manifest.json # 派生组件与 token 索引 ├── preview/ # colors / typography / spacing 预览页 ├── source/ # evidence.md、token-contract 报告、tokens.source.json └── system/ # kit.html 等系统级演示页manifest.json声明了id: hashicorp、category: Backend Data并将craft.suggested绑定为color与accessibility-baseline——也就是说当该包被选中时OpenDesign 会把 craft/color.md 与 craft/accessibility-baseline.md 一并组合进 Agent 提示词上下文。按 USAGE.md 规定的阅读顺序先读USAGE.md理解包契约 → 读DESIGN.md理解视觉意图与反模式 → 将tokens.css粘入第一个 artifact 的style块 → 用components.manifest.json做组件清单速查 → 需要精确选择器/状态时打开components.html→ 视觉核对时看preview/页面。2. 视觉主题昼夜双模与企业基础设施气质HashiCorp 设计语言的核心张力是「白昼/黑夜」双模式并存信息型版块用干净的白底Hero 与产品展示区用戏剧性的深色#15181e、#0d0e12。这组「build in light, deploy in dark」的昼夜二元性直接映射了开发者工作流——白天编写、夜晚部署。排版上品牌字体 HashiCorp Sans以__hashicorpSans_96f0ca形式加载承担「重量」标题使用 600–700 字重、1.17–1.19 的紧密行高形成密集而权威的文本块。Hero 大标题 82px、字重 600、开启 OpenTypekern——这是基础设施级别的排版而非装饰。组件体系使用mdsMarkdown Design System前缀指向一套完全由 CSS 变量驱动的 token 系统——颜色、间距、状态全部经由变量管理。阴影则极其克制双层微阴影使用rgba(97, 104, 117, 0.05)几乎不可见仅足够把交互表面从背景中分离出来。关键特征清单源自 DESIGN.md §1双模式干净白色区块 戏剧性深色#15181eHero/产品区自定义 HashiCorp Sans 字体600–700 字重开启kern多产品色彩体系经由--mds-color-*CSS 自定义属性产品品牌色Terraform 紫、Vault 黄、Waypoint 青、Vagrant 蓝大写字母间距标签13px、字重 600、字距 1.3px微阴影双层 0.05 透明度——以「耳语」而非「嘶吼」制造深度token 驱动的mds组件体系语义化变量命名收紧的圆角2px–8px绝无胶囊形或圆形次要文本使用 system-ui 回退栈在 tokens.css 中这套「黑暗优先」的识别度被固化为--bg: #15181eDark CharcoalHero 画布与--surface: #0d0e12Near Black卡片与输入框并明确注释HashiCorp 最具品牌识别度的表面是深色的因此--bg绑定深色画布而非白色。3. 色彩体系与角色分配3.1 品牌主色颜色值用途黑#000000品牌主色浅色表面上的文本--mds-color-hcp-brand深炭灰#15181e深色模式背景、Hero 区块近黑#0d0e12最深的深色表面、深色表单输入框3.2 中性色阶颜色值用途浅灰#f1f2f3浅色背景、细微表面中灰#d5d7db边框、深色按钮文字冷灰#b2b6bd边框强调0.1–0.4 透明度深灰#656a76辅助文本、次级标签--mds-form-helper-text-color炭灰#3b3d45浅色次级文本、按钮边框近白#efeff1深色表面上的主文本3.3 产品品牌色多产品体系产品颜色值TokenTerraform 紫#7b42bc--mds-color-terraform-button-backgroundVault 黄#ffcf25--mds-color-vault-button-backgroundWaypoint 青#14c6cb--mds-color-waypoint-button-background-focusWaypoint 青 Hover#12b6bb--mds-color-waypoint-button-background-hoverVagrant 蓝#1868f2--mds-color-vagrant-brand紫强调#911ced--mds-color-palette-purple-300访问后紫#a737ff--mds-color-foreground-action-visited这是「设计系统内的设计系统」父品牌是黑白加蓝强调每个子产品注入自己的色相身份。关键约束产品色只允许出现在对应产品的上下文中§7 明令禁止在 Vault 内容上使用 Terraform 紫。3.4 语义色角色值Token / 用途Action 蓝#1060ff深色上主操作链接链接蓝#2264d6浅色主链接亮蓝#2b89ff激活链接、Hover 强调琥珀#bb5a00--mds-color-palette-amber-200警告态浅琥珀#fbeabf--mds-color-palette-amber-100警告背景Vault 微黄#fff9cf--mds-color-vault-radar-gradient-faint-stop橙#a9722e--mds-color-unified-core-orange-6红#731e25--mds-color-unified-core-red-7错误态藏青#101a59--mds-color-unified-core-blue-73.5 阴影与聚焦微阴影rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px默认卡片/按钮浮起焦点描边3px solid var(--mds-color-focus-action-external)——系统化焦点环token 层的绑定决策tokens.css将--warn绑定为#bb5a00DESIGN.md 的 Amber-200而非 schema 默认的#eab308因为更亮的黄会在深色画布上被误读为「Vault 产品色」而非「警告态」--success与--danger继承 schema 默认值因为 DESIGN.md 文档化的红#731e25是深色错误背景调而非前景信号色。4. 排版规则4.1 字体家族品牌主字体__hashicorpSans_96f0caHashiCorp Sans回退__hashicorpSans_Fallback_96f0ca系统 UIsystem-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial4.2 层级表完整继承角色字体字号字重行高字距备注Display HeroHashiCorp Sans82px (5.13rem)6001.17 (tight)normalkern开启Section HeadingHashiCorp Sans52px (3.25rem)6001.19 (tight)normalkern开启Feature HeadingHashiCorp Sans42px (2.63rem)7001.19 (tight)-0.42px负字距Sub-headingHashiCorp Sans34px (2.13rem)600–7001.18 (tight)normal特性区块Card TitleHashiCorp Sans26px (1.63rem)7001.19 (tight)normal卡片/面板标题Small TitleHashiCorp Sans19px (1.19rem)7001.21 (tight)normal紧凑标题Body EmphasisHashiCorp Sans17px (1.06rem)600–7001.18–1.35normal加粗正文Body Largesystem-ui20px (1.25rem)400–6001.50normalHero 描述Bodysystem-ui16px (1.00rem)400–5001.63–1.69 (relaxed)normal标准正文Nav Linksystem-ui15px (0.94rem)5001.60 (relaxed)normal导航项Small Bodysystem-ui14px (0.88rem)400–5001.29–1.71normal次级内容Captionsystem-ui13px (0.81rem)400–5001.23–1.69normal元数据、页脚链接Uppercase LabelHashiCorp Sans13px (0.81rem)6001.69 (relaxed)1.3pxtext-transform: uppercase4.3 原则品牌/系统分工标题与品牌关键文本用 HashiCorp Sans正文、导航与功能性文本用 system-ui。「品牌字体承载重量system-ui 承载文字」。Kern 常开所有 HashiCorp Sans 文本启用 OpenTypekern——字距调整不容妥协。紧密标题所有标题使用 1.17–1.21 行高形成密集、堆叠的文本块传达「承重墙」般的基础设施感。放松正文正文使用 1.50–1.69 行高相当慷慨在密集标题下方营造舒适阅读节奏。大写标签作寻路13px 大写 1.3px 字距作为系统的分类/区块标记——永远是 HashiCorp Sans 字重 600。在 components.html 的实现中这一分工被落实为h1/h2/h3使用--font-display并声明font-feature-settings: kern而.lead、.body-muted、.field等正文级元素全部使用--font-bodysystem-ui。.eyebrow类则完整复刻大写寻路标签13px、600、1.3px 字距、text-transform: uppercase。5. 组件样式5.1 按钮Primary Dark主深色背景#15181e文本#d5d7db内边距9px 9px 9px 15px不对称左侧更多圆角5px边框1px solid rgba(178, 182, 189, 0.4)阴影rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px焦点3px solid var(--mds-color-focus-action-external)Hover使用--mds-color-surface-interactivetokenSecondary White次白背景#ffffff文本#3b3d45内边距8px 12px圆角4pxHover--mds-color-surface-interactive 低阴影浮起焦点3px solid transparent描边干净、极简外观产品色按钮Terraform背景#7b42bcVault背景#ffcf25深色文本Waypoint背景#14c6cbHover#12b6bb每个产品按钮遵循相同结构模式仅替换品牌色components.html 中还提供了第三种类型.btn-accentAction 蓝--accent背景 白文本作为页面中「信号最高的唯一 CTA」并硬性规定每屏可见的 accent 使用不超过 2 处。.btn:focus-visible使用box-shadow: var(--focus-ring)3px 实心环:active有translateY(0.5px)微下压反馈。5.2 徽章 / 胶囊背景#42225b深紫文本#efeff1内边距3px 7px圆角5px边框1px solid rgb(180, 87, 255)字体16px在components.html中徽章被拆分为.badge基础、.badge-status状态徽章用color-mix以 80% 透明度的--success渲染、.badge-dot6px 状态圆点。components.manifest.json显示徽章组引用了--font-body、--radius-pill、--space-2、--text-sm四个 token。5.3 输入框文本输入深色模式背景#0d0e12文本#efeff1边框1px solid rgb(97, 104, 117)内边距11px圆角5px焦点3px solid var(--mds-color-focus-action-external)描边复选框背景#0d0e12边框1px solid rgb(97, 104, 117)圆角3px实现层components.html中.field input的边框使用var(--meta)——注释明确指出#656a76--meta与文档化的rgb(97, 104, 117)同色相聚焦时边框切换为--accent并叠加--focus-ring。5.4 链接浅色背景 Action 蓝#2264d6Hover → blue-600 变量Hover 时下划线深色背景 Action 蓝#1060ff或#2b89ffHover 时下划线深色背景白#ffffff透明下划线 → Hover 时可见下划线浅色背景中性#3b3d45透明下划线 → Hover 时可见下划线深色背景浅色#efeff1类似 Hover 模式所有链接以var(--wpl-blue-600)作为 Hover 色5.5 卡片与容器浅色模式白背景 微阴影浮起深色模式#15181e或更深的表面卡片/容器圆角8px产品展示卡片带渐变边框或强调光5.6 导航干净的水平导航 巨型下拉菜单HashiCorp logo 左对齐system-ui 15px 字重 500 的链接产品分类按生命周期管理分组头部含 Get started 与 Contact us CTAHero 区有深色变体6. 布局原则6.1 间距系统基础单位8px刻度2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px在 token 层tokens.css 将结构节奏收敛为--space-1(4px) 到--space-12(48px) 共 8 档2/3/6/7/9/11 等亚档增量属于过细粒度留在组件内联处理。6.2 栅格与容器最大内容宽度约 1150pxxl 断点全宽深色 Hero 区块 内容居中卡片栅格2–3 列布局桌面端慷慨的水平内边距6.3 断点名称宽度关键变化Mobile Small375px紧密单列Mobile375–480px标准移动端Small Tablet480–600px微调Tablet600–768px2 列栅格开始Small Desktop768–992px完整导航可见Desktop992–1120px标准布局Large Desktop1120–1440px最大宽度内容Ultra-wide1440px居中、宽裕边距6.4 留白哲学企业级呼吸感区块间 48px–80px 的慷慨纵向间距传达稳定与严肃。密集标题、宽阔正文紧密行高标题压在放松正文之上形成每个区块「顶部有重量」的视觉。深色作画布深色 Hero 区块用额外纵向内边距让 3D 插画与渐变「呼吸」。6.5 圆角刻度Minimal2px链接、小型内联元素Subtle3px复选框、小型输入Standard4px次级按钮Comfortable5px主按钮、徽章、输入框Card8px卡片、容器、图片token 层的决策tokens.css 注释 #9--radius-sm绑定 5px、--radius-md/--radius-lg绑定 8px 上限、--radius-pill绑定 5px——因为 HashiCorp 并不存在真正的 9999px 胶囊形「无胶囊」是结构性规则而非风格选择。7. 深度与浮起层级处理用途FlatLevel 0无阴影默认表面、文本块WhisperLevel 1rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px卡片、按钮、交互表面FocusLevel 23px solid var(--mds-color-focus-action-external)描边焦点环——与上下文匹配颜色阴影哲学HashiCorp 使用了现代网页设计中堪称最克制的阴影系统。5% 透明度的双层阴影几乎不可见——它们的存在不是为了制造视觉深度而是为了发出「可交互」的信号。如果你能看到阴影那它就已经太重了。这种克制传达出企业价值的「稳定」——没有东西漂浮没有东西不确定。这一哲学在 tokens.css 中逐字保留为--elev-raised注释 #10 明确引用「If you can see the shadow, its too strong.」并配套--elev-flat: none与--elev-ring: 0 0 0 1px var(--border)冷灰发丝线。焦点环则绑定为--focus-ring: 0 0 0 3px var(--accent)——锐利实心环、无光晕这是 schema 默认 3px alpha 光晕的工程化替代。8. Token 契约实现tokens.css 的 12 条绑定决策tokens.css 不只是 CSS 变量而是一份带注释的「品牌契约」。它逐条解释了每个 token 为何如此绑定其中有 12 条核心决策最值得深读--bg是深色而非白色HashiCorp 存在昼夜双模式但深色表面才是身份定义面——82px 的 HashiCorp Sans、多产品强调色、Whisper 阴影都在深色画布上发挥作用。--fg四级梯度独立绑定近白#efeff1→ 中灰#d5d7db→ 冷灰#b2b6bd→ 深灰#656a76全部保留因为品牌确实完整走完了这个梯度合并任何一级都会压平 HashiCorp 内容的企业密度。--border绑定带 alpha 的字面值rgba(178, 182, 189, 0.4)直接取自 Primary Dark 按钮边框让--elev-ring能复刻冷灰发丝线--border-soft降到 0.15 alpha 用于内部行分隔。--accent是 Action 蓝#1060ff不是产品色产品色是产品作用域 token公司级功能 CTA 色是#1060ff。--accent-hover抬升为亮蓝#2b89ff而非 schema 默认的压暗公式否则深色画布上会失去对比度:active态再用标准公式压暗。--warn是烧琥珀#bb5a00而非 schema 默认#eab308原因见 §3.5。--font-display加载 HashiCorp Sans 实质回退栈--font-body用 system-ui——品牌/系统分工是结构规则。类型刻度顶端 82px--text-4xl--leading-tight1.17--tracking-display为normal因为品牌靠 kern 而非字距。--leading-body1.63、--leading-tight1.17——「顶部重量」规则的字面落实。圆角刻度收紧5px/8px/8px/5px8px 是天花板。--elev-raised逐字保留 Whisper 阴影组件 CSS 不得加强。--focus-ring是 3px 实心环0 0 0 3px var(--accent)。--section-y-desktop80px、--container-max1150px——DESIGN.md §5 文档化的上下端点。这些决策还指向三个源契约文件标准 token 名见 design-systems/_schema/tokens.schema.ts其内容再导出自packages/contracts/src/design-systems/token-schema.ts、A2 回退对等见_schema/defaults.css、lint 强制见apps/daemon/src/lint-artifact.ts。派生产物 design-tokens.json 记录了这份契约的质量分数56 个 token 全部声明且全部有源码背书A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个契约评分 100、等级 excellent无需重建。source/evidence.md与source/token-contract.report.json则记录每个 token 绑定回tokens.css声明行的审计证据并声明该包基于 curated bundled fixture 回填不做上游重爬。9. 组件清单与 Tailwind v4 派生components.manifest.json 是组件夹具的机器可读索引components.html含 1 个 style 块、53 个选择器、27 个类、25 个元素。它把组件划分为 9 个组每组标注了 token 引用buttons.btn/.btn-accent/.btn-primary/.btn-secondary及:hover、:active、:focus-visible引用--accent、--border、--elev-raised、--focus-ring等 8 个 tokeninputs.field系列与表单结构引用--fg-2、--meta、--text-sm、--text-xscards.cardbadges.badge/.badge-dot/.badge-statuslinksa/a:hoverkeyboardkbd3px 圆角、--font-monoicons.icon16px SVG 槽位typography.eyebrow/.lead/.body-*与标题元素引用--font-display、--leading-tight、--text-2xl/3xllayout.container/.hero-grid/.features-grid/.form-row/.stack-*/.row-between引用--container-max、--container-gutter-*、--border-softtoken 一致性审计显示56 个声明 token 中 48 个被组件引用未声明的引用为 0undeclaredReferenced: []——声明与消费完全闭合。另有 8 个 token--danger、--elev-flat、--elev-ring、--motion-base、--radius-lg、--space-1、--surface-warm、--warn为预留未用。对 Tailwind v4 用户tailwind-v4.css 把全部 token 桥接进theme命名空间--color-bg、--color-accent、--font-display、--text-4xl、--shadow-raised、--radius-pill、--spacing-section-desktop等可在 Tailwind 类中直接使用bg-bg、text-fg-2、shadow-raised、rounded-pill这类工具类。文件头部注明「Derived from tokens.css. Keep tokens.css as the source of truth.」——它是缓存而非并列事实源。10. 注意事项Dos 与 DontsDo标题与品牌文本用 HashiCorp Sans正文与 UI 文本用 system-ui所有 HashiCorp Sans 文本启用kern产品品牌色只用于对应产品Terraform 紫Vault 黄以此类推区块标记用 13px 字重 600、1.3px 字距的大写标签阴影保持在「Whisper」级0.05 透明度双层使用--mds-color-*token 体系保证颜色应用一致维持「紧密标题 / 放松正文」节奏1.17–1.21 vs 1.50–1.69 行高无障碍焦点环一律使用3px solidDont不要在对应产品上下文之外使用产品品牌色Vault 内容上不许出现 Terraform 紫不要将阴影透明度提高到 0.1 以上——Whisper 级别是有意为之不要使用胶囊形按钮8px 圆角——锐利极简圆角是结构性的不要在标题上跳过kern——字体需要它不要用小号正文使用 HashiCorp Sans——它专为 17px 标题设计不要在同一个组件中混用产品色——每个产品只有一种颜色不要用纯黑#000000做深色背景——用#15181e或#0d0e12不要忘记不对称按钮内边距——9px 9px 9px 15px是有意为之USAGE.md 补充了包级守则保留 schema token 名称以保障跨品牌切换可靠用--accent表示主操作、链接、焦点态及一个明确的焦点元素复用components.manifest.json中的组件组而非发明新控件source/仅作为回填夹具的审计证据——不得声称包内含原创上游源码证据。11. 响应式行为断点名称宽度关键变化Mobile768px单列、汉堡导航、堆叠 CTATablet768–992px2 列栅格、导航开始展开Desktop992–1150px完整布局、巨型下拉导航Large1150px最大宽度居中、宽裕边距折叠策略Hero82px → 52px → 42px 标题尺寸导航巨型下拉 → 汉堡菜单产品卡片3 列 → 2 列 → 堆叠深色区块保持全宽但压缩内边距按钮内联 → 移动端全宽堆叠components.html落地了这条折叠链h1在 ≤1023px 时从 82px--text-4xl塌到 52px--text-3xl≤639px 时再塌到 42px--text-2xl.hero-grid从1.4fr 1fr双列在 ≤1023px 时变单列.features-grid三列 → 双列 → 单列section纵向内边距随--section-y-desktop/tablet/phone80/56/40px逐级收缩。12. Agent Prompt Guide可执行的设计指令快速颜色参考浅色背景#ffffff、#f1f2f3深色背景#15181e、#0d0e12浅色文本#000000、#3b3d45深色文本#efeff1、#d5d7db链接#2264d6浅色、#1060ff深色、#2b89ff激活辅助文本#656a76边框rgba(178, 182, 189, 0.4)、rgb(97, 104, 117)焦点3px solid产品适配色示例组件提示词可直接复用深色 Hero「在深色背景#15181e上创建 Hero。标题 82px HashiCorp Sans 字重 600、行高 1.17、kern 开启、白色文本。副文本 20px system-ui 字重 400、行高 1.50、#d5d7db 文本。两个按钮主深色#15181e、5px 圆角、9px 15px 内边距与次白#ffffff、4px 圆角、8px 12px 内边距。」产品卡片「设计产品卡片白背景、8px 圆角、rgba(97,104,117,0.05) 双层阴影。标题 26px HashiCorp Sans 字重 700正文 16px system-ui 字重 400 行高 1.63。」大写区块标签「构建大写区块标签13px HashiCorp Sans 字重 600、行高 1.69、字距 1.3px、text-transform uppercase、#656a76 颜色。」产品 CTA 按钮「创建产品专属 CTA 按钮Terraform → #7b42bc 背景Vault → #ffcf25 深色文本Waypoint → #14c6cb。全部5px 圆角、500 字重文本、16px system-ui。」深色表单「设计深色表单#0d0e12 输入背景、#efeff1 文本、1px solid rgb(97,104,117) 边框、5px 圆角、11px 内边距。焦点3px solid 强调色描边。」迭代指南永远从模式决策开始信息型用浅色白Hero/产品用深色#15181eHashiCorp Sans 只用于标题17px其余全部 system-ui阴影保持 Whisper 级0.05 透明度——如果可见就降低产品色神圣不可侵犯——每个产品恰好拥有一种颜色焦点环永远是 3px solid与产品上下文匹配颜色大写标签是系统化寻路模式——13px、600、1.3px 字距结语从规范散文到可执行契约HashiCorp 设计系统包展示了 OpenDesign 设计系统 2.0 的核心思路DESIGN.md是给 Agent 读的规范、tokens.css是给浏览器读的契约、components.html是给测试与清单生成用的证据夹具三者由manifest.json与source/审计链闭合。当你在 OpenDesign 的 Design System 表面选中hashicorp包时这套「双模式画布 多产品色 品牌/系统字体分工 Whisper 阴影」的完整约束会被组合进 Agent 提示词从而让编码 Agent 产出的 HTML 界面在视觉上真正「像 HashiCorp」。若需进一步阅读可继续探索 DESIGN.md 原文、tokens.css 的逐条注释决策或通过 docs/design-systems.md 了解整套包的作者指南与评审清单。【免费下载链接】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），仅供参考 OpenDesign 设计系统包实战解析：HashiCorp 企业级基础设施设计语言（DESIGN.md 全量指南）
OpenDesign 设计系统包实战解析HashiCorp 企业级基础设施设计语言DESIGN.md 全量指南【免费下载链接】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本指南以design-systems/hashicorp/DESIGN.md为骨架结合tokens.css、components.html、manifest.json、USAGE.md等仓库文件系统讲解 OpenDesign 中 HashiCorp 设计系统包的双模式视觉语言、多产品色彩体系、工程级排版规则与 Whisper 级阴影哲学。读完你将掌握如何在 OpenDesign 的 Agent 工作流中按契约消费该设计包、如何用--mds-color-*/语义 token 复刻 HashiCorp 的「昼夜双模」界面以及如何编写能被编码 Agent 直接执行的设计提示词。HashiCorp 的官网是把企业基础设施「具象化」的典型样本它必须同时传达云基础设施管理的复杂度与亲近感。OpenDesign 将这套视觉语言固化成一个可移植的设计系统包design-system package位于 design-systems/hashicorp/。这个包不只是静态的样式快照而是一套面向 Agent 与 LLM 的「可执行设计契约」——DESIGN.md是给 Agent 的规范散文tokens.css是编译后的语义 token 样式表components.html是组件证据夹具。本文逐一拆解其全部规则并给出源码级实现依据。1. 包结构一个设计系统包的最小可移植形态在 OpenDesign 中每个设计系统子目录都是一个便携包。据 design-systems/README.mdHashiCorp 包符合「最小机器可读形态」manifest.json发现元数据与来源、DESIGN.mdAgent 规范、tokens.css编译后的语义 token 样式表。HashiCorp 包还补齐了丰富的派生文件design-systems/hashicorp/ ├── manifest.json # 包发现元数据、来源、文件清单 ├── DESIGN.md # 规范散文本文主体 ├── USAGE.md # Agent 阅读顺序与使用守则 ├── tokens.css # 语义 token 权威样式表 ├── design-tokens.json # 派生Design Tokens JSON56 个 token ├── tailwind-v4.css # 派生Tailwind v4 映射 ├── components.html # 组件证据夹具53 个选择器 / 27 个类 ├── components.manifest.json # 派生组件与 token 索引 ├── preview/ # colors / typography / spacing 预览页 ├── source/ # evidence.md、token-contract 报告、tokens.source.json └── system/ # kit.html 等系统级演示页manifest.json声明了id: hashicorp、category: Backend Data并将craft.suggested绑定为color与accessibility-baseline——也就是说当该包被选中时OpenDesign 会把 craft/color.md 与 craft/accessibility-baseline.md 一并组合进 Agent 提示词上下文。按 USAGE.md 规定的阅读顺序先读USAGE.md理解包契约 → 读DESIGN.md理解视觉意图与反模式 → 将tokens.css粘入第一个 artifact 的style块 → 用components.manifest.json做组件清单速查 → 需要精确选择器/状态时打开components.html→ 视觉核对时看preview/页面。2. 视觉主题昼夜双模与企业基础设施气质HashiCorp 设计语言的核心张力是「白昼/黑夜」双模式并存信息型版块用干净的白底Hero 与产品展示区用戏剧性的深色#15181e、#0d0e12。这组「build in light, deploy in dark」的昼夜二元性直接映射了开发者工作流——白天编写、夜晚部署。排版上品牌字体 HashiCorp Sans以__hashicorpSans_96f0ca形式加载承担「重量」标题使用 600–700 字重、1.17–1.19 的紧密行高形成密集而权威的文本块。Hero 大标题 82px、字重 600、开启 OpenTypekern——这是基础设施级别的排版而非装饰。组件体系使用mdsMarkdown Design System前缀指向一套完全由 CSS 变量驱动的 token 系统——颜色、间距、状态全部经由变量管理。阴影则极其克制双层微阴影使用rgba(97, 104, 117, 0.05)几乎不可见仅足够把交互表面从背景中分离出来。关键特征清单源自 DESIGN.md §1双模式干净白色区块 戏剧性深色#15181eHero/产品区自定义 HashiCorp Sans 字体600–700 字重开启kern多产品色彩体系经由--mds-color-*CSS 自定义属性产品品牌色Terraform 紫、Vault 黄、Waypoint 青、Vagrant 蓝大写字母间距标签13px、字重 600、字距 1.3px微阴影双层 0.05 透明度——以「耳语」而非「嘶吼」制造深度token 驱动的mds组件体系语义化变量命名收紧的圆角2px–8px绝无胶囊形或圆形次要文本使用 system-ui 回退栈在 tokens.css 中这套「黑暗优先」的识别度被固化为--bg: #15181eDark CharcoalHero 画布与--surface: #0d0e12Near Black卡片与输入框并明确注释HashiCorp 最具品牌识别度的表面是深色的因此--bg绑定深色画布而非白色。3. 色彩体系与角色分配3.1 品牌主色颜色值用途黑#000000品牌主色浅色表面上的文本--mds-color-hcp-brand深炭灰#15181e深色模式背景、Hero 区块近黑#0d0e12最深的深色表面、深色表单输入框3.2 中性色阶颜色值用途浅灰#f1f2f3浅色背景、细微表面中灰#d5d7db边框、深色按钮文字冷灰#b2b6bd边框强调0.1–0.4 透明度深灰#656a76辅助文本、次级标签--mds-form-helper-text-color炭灰#3b3d45浅色次级文本、按钮边框近白#efeff1深色表面上的主文本3.3 产品品牌色多产品体系产品颜色值TokenTerraform 紫#7b42bc--mds-color-terraform-button-backgroundVault 黄#ffcf25--mds-color-vault-button-backgroundWaypoint 青#14c6cb--mds-color-waypoint-button-background-focusWaypoint 青 Hover#12b6bb--mds-color-waypoint-button-background-hoverVagrant 蓝#1868f2--mds-color-vagrant-brand紫强调#911ced--mds-color-palette-purple-300访问后紫#a737ff--mds-color-foreground-action-visited这是「设计系统内的设计系统」父品牌是黑白加蓝强调每个子产品注入自己的色相身份。关键约束产品色只允许出现在对应产品的上下文中§7 明令禁止在 Vault 内容上使用 Terraform 紫。3.4 语义色角色值Token / 用途Action 蓝#1060ff深色上主操作链接链接蓝#2264d6浅色主链接亮蓝#2b89ff激活链接、Hover 强调琥珀#bb5a00--mds-color-palette-amber-200警告态浅琥珀#fbeabf--mds-color-palette-amber-100警告背景Vault 微黄#fff9cf--mds-color-vault-radar-gradient-faint-stop橙#a9722e--mds-color-unified-core-orange-6红#731e25--mds-color-unified-core-red-7错误态藏青#101a59--mds-color-unified-core-blue-73.5 阴影与聚焦微阴影rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px默认卡片/按钮浮起焦点描边3px solid var(--mds-color-focus-action-external)——系统化焦点环token 层的绑定决策tokens.css将--warn绑定为#bb5a00DESIGN.md 的 Amber-200而非 schema 默认的#eab308因为更亮的黄会在深色画布上被误读为「Vault 产品色」而非「警告态」--success与--danger继承 schema 默认值因为 DESIGN.md 文档化的红#731e25是深色错误背景调而非前景信号色。4. 排版规则4.1 字体家族品牌主字体__hashicorpSans_96f0caHashiCorp Sans回退__hashicorpSans_Fallback_96f0ca系统 UIsystem-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial4.2 层级表完整继承角色字体字号字重行高字距备注Display HeroHashiCorp Sans82px (5.13rem)6001.17 (tight)normalkern开启Section HeadingHashiCorp Sans52px (3.25rem)6001.19 (tight)normalkern开启Feature HeadingHashiCorp Sans42px (2.63rem)7001.19 (tight)-0.42px负字距Sub-headingHashiCorp Sans34px (2.13rem)600–7001.18 (tight)normal特性区块Card TitleHashiCorp Sans26px (1.63rem)7001.19 (tight)normal卡片/面板标题Small TitleHashiCorp Sans19px (1.19rem)7001.21 (tight)normal紧凑标题Body EmphasisHashiCorp Sans17px (1.06rem)600–7001.18–1.35normal加粗正文Body Largesystem-ui20px (1.25rem)400–6001.50normalHero 描述Bodysystem-ui16px (1.00rem)400–5001.63–1.69 (relaxed)normal标准正文Nav Linksystem-ui15px (0.94rem)5001.60 (relaxed)normal导航项Small Bodysystem-ui14px (0.88rem)400–5001.29–1.71normal次级内容Captionsystem-ui13px (0.81rem)400–5001.23–1.69normal元数据、页脚链接Uppercase LabelHashiCorp Sans13px (0.81rem)6001.69 (relaxed)1.3pxtext-transform: uppercase4.3 原则品牌/系统分工标题与品牌关键文本用 HashiCorp Sans正文、导航与功能性文本用 system-ui。「品牌字体承载重量system-ui 承载文字」。Kern 常开所有 HashiCorp Sans 文本启用 OpenTypekern——字距调整不容妥协。紧密标题所有标题使用 1.17–1.21 行高形成密集、堆叠的文本块传达「承重墙」般的基础设施感。放松正文正文使用 1.50–1.69 行高相当慷慨在密集标题下方营造舒适阅读节奏。大写标签作寻路13px 大写 1.3px 字距作为系统的分类/区块标记——永远是 HashiCorp Sans 字重 600。在 components.html 的实现中这一分工被落实为h1/h2/h3使用--font-display并声明font-feature-settings: kern而.lead、.body-muted、.field等正文级元素全部使用--font-bodysystem-ui。.eyebrow类则完整复刻大写寻路标签13px、600、1.3px 字距、text-transform: uppercase。5. 组件样式5.1 按钮Primary Dark主深色背景#15181e文本#d5d7db内边距9px 9px 9px 15px不对称左侧更多圆角5px边框1px solid rgba(178, 182, 189, 0.4)阴影rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px焦点3px solid var(--mds-color-focus-action-external)Hover使用--mds-color-surface-interactivetokenSecondary White次白背景#ffffff文本#3b3d45内边距8px 12px圆角4pxHover--mds-color-surface-interactive 低阴影浮起焦点3px solid transparent描边干净、极简外观产品色按钮Terraform背景#7b42bcVault背景#ffcf25深色文本Waypoint背景#14c6cbHover#12b6bb每个产品按钮遵循相同结构模式仅替换品牌色components.html 中还提供了第三种类型.btn-accentAction 蓝--accent背景 白文本作为页面中「信号最高的唯一 CTA」并硬性规定每屏可见的 accent 使用不超过 2 处。.btn:focus-visible使用box-shadow: var(--focus-ring)3px 实心环:active有translateY(0.5px)微下压反馈。5.2 徽章 / 胶囊背景#42225b深紫文本#efeff1内边距3px 7px圆角5px边框1px solid rgb(180, 87, 255)字体16px在components.html中徽章被拆分为.badge基础、.badge-status状态徽章用color-mix以 80% 透明度的--success渲染、.badge-dot6px 状态圆点。components.manifest.json显示徽章组引用了--font-body、--radius-pill、--space-2、--text-sm四个 token。5.3 输入框文本输入深色模式背景#0d0e12文本#efeff1边框1px solid rgb(97, 104, 117)内边距11px圆角5px焦点3px solid var(--mds-color-focus-action-external)描边复选框背景#0d0e12边框1px solid rgb(97, 104, 117)圆角3px实现层components.html中.field input的边框使用var(--meta)——注释明确指出#656a76--meta与文档化的rgb(97, 104, 117)同色相聚焦时边框切换为--accent并叠加--focus-ring。5.4 链接浅色背景 Action 蓝#2264d6Hover → blue-600 变量Hover 时下划线深色背景 Action 蓝#1060ff或#2b89ffHover 时下划线深色背景白#ffffff透明下划线 → Hover 时可见下划线浅色背景中性#3b3d45透明下划线 → Hover 时可见下划线深色背景浅色#efeff1类似 Hover 模式所有链接以var(--wpl-blue-600)作为 Hover 色5.5 卡片与容器浅色模式白背景 微阴影浮起深色模式#15181e或更深的表面卡片/容器圆角8px产品展示卡片带渐变边框或强调光5.6 导航干净的水平导航 巨型下拉菜单HashiCorp logo 左对齐system-ui 15px 字重 500 的链接产品分类按生命周期管理分组头部含 Get started 与 Contact us CTAHero 区有深色变体6. 布局原则6.1 间距系统基础单位8px刻度2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px在 token 层tokens.css 将结构节奏收敛为--space-1(4px) 到--space-12(48px) 共 8 档2/3/6/7/9/11 等亚档增量属于过细粒度留在组件内联处理。6.2 栅格与容器最大内容宽度约 1150pxxl 断点全宽深色 Hero 区块 内容居中卡片栅格2–3 列布局桌面端慷慨的水平内边距6.3 断点名称宽度关键变化Mobile Small375px紧密单列Mobile375–480px标准移动端Small Tablet480–600px微调Tablet600–768px2 列栅格开始Small Desktop768–992px完整导航可见Desktop992–1120px标准布局Large Desktop1120–1440px最大宽度内容Ultra-wide1440px居中、宽裕边距6.4 留白哲学企业级呼吸感区块间 48px–80px 的慷慨纵向间距传达稳定与严肃。密集标题、宽阔正文紧密行高标题压在放松正文之上形成每个区块「顶部有重量」的视觉。深色作画布深色 Hero 区块用额外纵向内边距让 3D 插画与渐变「呼吸」。6.5 圆角刻度Minimal2px链接、小型内联元素Subtle3px复选框、小型输入Standard4px次级按钮Comfortable5px主按钮、徽章、输入框Card8px卡片、容器、图片token 层的决策tokens.css 注释 #9--radius-sm绑定 5px、--radius-md/--radius-lg绑定 8px 上限、--radius-pill绑定 5px——因为 HashiCorp 并不存在真正的 9999px 胶囊形「无胶囊」是结构性规则而非风格选择。7. 深度与浮起层级处理用途FlatLevel 0无阴影默认表面、文本块WhisperLevel 1rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px卡片、按钮、交互表面FocusLevel 23px solid var(--mds-color-focus-action-external)描边焦点环——与上下文匹配颜色阴影哲学HashiCorp 使用了现代网页设计中堪称最克制的阴影系统。5% 透明度的双层阴影几乎不可见——它们的存在不是为了制造视觉深度而是为了发出「可交互」的信号。如果你能看到阴影那它就已经太重了。这种克制传达出企业价值的「稳定」——没有东西漂浮没有东西不确定。这一哲学在 tokens.css 中逐字保留为--elev-raised注释 #10 明确引用「If you can see the shadow, its too strong.」并配套--elev-flat: none与--elev-ring: 0 0 0 1px var(--border)冷灰发丝线。焦点环则绑定为--focus-ring: 0 0 0 3px var(--accent)——锐利实心环、无光晕这是 schema 默认 3px alpha 光晕的工程化替代。8. Token 契约实现tokens.css 的 12 条绑定决策tokens.css 不只是 CSS 变量而是一份带注释的「品牌契约」。它逐条解释了每个 token 为何如此绑定其中有 12 条核心决策最值得深读--bg是深色而非白色HashiCorp 存在昼夜双模式但深色表面才是身份定义面——82px 的 HashiCorp Sans、多产品强调色、Whisper 阴影都在深色画布上发挥作用。--fg四级梯度独立绑定近白#efeff1→ 中灰#d5d7db→ 冷灰#b2b6bd→ 深灰#656a76全部保留因为品牌确实完整走完了这个梯度合并任何一级都会压平 HashiCorp 内容的企业密度。--border绑定带 alpha 的字面值rgba(178, 182, 189, 0.4)直接取自 Primary Dark 按钮边框让--elev-ring能复刻冷灰发丝线--border-soft降到 0.15 alpha 用于内部行分隔。--accent是 Action 蓝#1060ff不是产品色产品色是产品作用域 token公司级功能 CTA 色是#1060ff。--accent-hover抬升为亮蓝#2b89ff而非 schema 默认的压暗公式否则深色画布上会失去对比度:active态再用标准公式压暗。--warn是烧琥珀#bb5a00而非 schema 默认#eab308原因见 §3.5。--font-display加载 HashiCorp Sans 实质回退栈--font-body用 system-ui——品牌/系统分工是结构规则。类型刻度顶端 82px--text-4xl--leading-tight1.17--tracking-display为normal因为品牌靠 kern 而非字距。--leading-body1.63、--leading-tight1.17——「顶部重量」规则的字面落实。圆角刻度收紧5px/8px/8px/5px8px 是天花板。--elev-raised逐字保留 Whisper 阴影组件 CSS 不得加强。--focus-ring是 3px 实心环0 0 0 3px var(--accent)。--section-y-desktop80px、--container-max1150px——DESIGN.md §5 文档化的上下端点。这些决策还指向三个源契约文件标准 token 名见 design-systems/_schema/tokens.schema.ts其内容再导出自packages/contracts/src/design-systems/token-schema.ts、A2 回退对等见_schema/defaults.css、lint 强制见apps/daemon/src/lint-artifact.ts。派生产物 design-tokens.json 记录了这份契约的质量分数56 个 token 全部声明且全部有源码背书A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个契约评分 100、等级 excellent无需重建。source/evidence.md与source/token-contract.report.json则记录每个 token 绑定回tokens.css声明行的审计证据并声明该包基于 curated bundled fixture 回填不做上游重爬。9. 组件清单与 Tailwind v4 派生components.manifest.json 是组件夹具的机器可读索引components.html含 1 个 style 块、53 个选择器、27 个类、25 个元素。它把组件划分为 9 个组每组标注了 token 引用buttons.btn/.btn-accent/.btn-primary/.btn-secondary及:hover、:active、:focus-visible引用--accent、--border、--elev-raised、--focus-ring等 8 个 tokeninputs.field系列与表单结构引用--fg-2、--meta、--text-sm、--text-xscards.cardbadges.badge/.badge-dot/.badge-statuslinksa/a:hoverkeyboardkbd3px 圆角、--font-monoicons.icon16px SVG 槽位typography.eyebrow/.lead/.body-*与标题元素引用--font-display、--leading-tight、--text-2xl/3xllayout.container/.hero-grid/.features-grid/.form-row/.stack-*/.row-between引用--container-max、--container-gutter-*、--border-softtoken 一致性审计显示56 个声明 token 中 48 个被组件引用未声明的引用为 0undeclaredReferenced: []——声明与消费完全闭合。另有 8 个 token--danger、--elev-flat、--elev-ring、--motion-base、--radius-lg、--space-1、--surface-warm、--warn为预留未用。对 Tailwind v4 用户tailwind-v4.css 把全部 token 桥接进theme命名空间--color-bg、--color-accent、--font-display、--text-4xl、--shadow-raised、--radius-pill、--spacing-section-desktop等可在 Tailwind 类中直接使用bg-bg、text-fg-2、shadow-raised、rounded-pill这类工具类。文件头部注明「Derived from tokens.css. Keep tokens.css as the source of truth.」——它是缓存而非并列事实源。10. 注意事项Dos 与 DontsDo标题与品牌文本用 HashiCorp Sans正文与 UI 文本用 system-ui所有 HashiCorp Sans 文本启用kern产品品牌色只用于对应产品Terraform 紫Vault 黄以此类推区块标记用 13px 字重 600、1.3px 字距的大写标签阴影保持在「Whisper」级0.05 透明度双层使用--mds-color-*token 体系保证颜色应用一致维持「紧密标题 / 放松正文」节奏1.17–1.21 vs 1.50–1.69 行高无障碍焦点环一律使用3px solidDont不要在对应产品上下文之外使用产品品牌色Vault 内容上不许出现 Terraform 紫不要将阴影透明度提高到 0.1 以上——Whisper 级别是有意为之不要使用胶囊形按钮8px 圆角——锐利极简圆角是结构性的不要在标题上跳过kern——字体需要它不要用小号正文使用 HashiCorp Sans——它专为 17px 标题设计不要在同一个组件中混用产品色——每个产品只有一种颜色不要用纯黑#000000做深色背景——用#15181e或#0d0e12不要忘记不对称按钮内边距——9px 9px 9px 15px是有意为之USAGE.md 补充了包级守则保留 schema token 名称以保障跨品牌切换可靠用--accent表示主操作、链接、焦点态及一个明确的焦点元素复用components.manifest.json中的组件组而非发明新控件source/仅作为回填夹具的审计证据——不得声称包内含原创上游源码证据。11. 响应式行为断点名称宽度关键变化Mobile768px单列、汉堡导航、堆叠 CTATablet768–992px2 列栅格、导航开始展开Desktop992–1150px完整布局、巨型下拉导航Large1150px最大宽度居中、宽裕边距折叠策略Hero82px → 52px → 42px 标题尺寸导航巨型下拉 → 汉堡菜单产品卡片3 列 → 2 列 → 堆叠深色区块保持全宽但压缩内边距按钮内联 → 移动端全宽堆叠components.html落地了这条折叠链h1在 ≤1023px 时从 82px--text-4xl塌到 52px--text-3xl≤639px 时再塌到 42px--text-2xl.hero-grid从1.4fr 1fr双列在 ≤1023px 时变单列.features-grid三列 → 双列 → 单列section纵向内边距随--section-y-desktop/tablet/phone80/56/40px逐级收缩。12. Agent Prompt Guide可执行的设计指令快速颜色参考浅色背景#ffffff、#f1f2f3深色背景#15181e、#0d0e12浅色文本#000000、#3b3d45深色文本#efeff1、#d5d7db链接#2264d6浅色、#1060ff深色、#2b89ff激活辅助文本#656a76边框rgba(178, 182, 189, 0.4)、rgb(97, 104, 117)焦点3px solid产品适配色示例组件提示词可直接复用深色 Hero「在深色背景#15181e上创建 Hero。标题 82px HashiCorp Sans 字重 600、行高 1.17、kern 开启、白色文本。副文本 20px system-ui 字重 400、行高 1.50、#d5d7db 文本。两个按钮主深色#15181e、5px 圆角、9px 15px 内边距与次白#ffffff、4px 圆角、8px 12px 内边距。」产品卡片「设计产品卡片白背景、8px 圆角、rgba(97,104,117,0.05) 双层阴影。标题 26px HashiCorp Sans 字重 700正文 16px system-ui 字重 400 行高 1.63。」大写区块标签「构建大写区块标签13px HashiCorp Sans 字重 600、行高 1.69、字距 1.3px、text-transform uppercase、#656a76 颜色。」产品 CTA 按钮「创建产品专属 CTA 按钮Terraform → #7b42bc 背景Vault → #ffcf25 深色文本Waypoint → #14c6cb。全部5px 圆角、500 字重文本、16px system-ui。」深色表单「设计深色表单#0d0e12 输入背景、#efeff1 文本、1px solid rgb(97,104,117) 边框、5px 圆角、11px 内边距。焦点3px solid 强调色描边。」迭代指南永远从模式决策开始信息型用浅色白Hero/产品用深色#15181eHashiCorp Sans 只用于标题17px其余全部 system-ui阴影保持 Whisper 级0.05 透明度——如果可见就降低产品色神圣不可侵犯——每个产品恰好拥有一种颜色焦点环永远是 3px solid与产品上下文匹配颜色大写标签是系统化寻路模式——13px、600、1.3px 字距结语从规范散文到可执行契约HashiCorp 设计系统包展示了 OpenDesign 设计系统 2.0 的核心思路DESIGN.md是给 Agent 读的规范、tokens.css是给浏览器读的契约、components.html是给测试与清单生成用的证据夹具三者由manifest.json与source/审计链闭合。当你在 OpenDesign 的 Design System 表面选中hashicorp包时这套「双模式画布 多产品色 品牌/系统字体分工 Whisper 阴影」的完整约束会被组合进 Agent 提示词从而让编码 Agent 产出的 HTML 界面在视觉上真正「像 HashiCorp」。若需进一步阅读可继续探索 DESIGN.md 原文、tokens.css 的逐条注释决策或通过 docs/design-systems.md 了解整套包的作者指南与评审清单。【免费下载链接】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），仅供参考