OpenDesign 设计系统实战复刻 Resend「虚空黑 霜蓝描边」高奢深色主题的完整指南【免费下载链接】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/resend/DESIGN.md 为骨架结合该包内的 tokens.css、components.html、components.manifest.json 与共享 token 模式 design-systems/_schema/tokens.schema.ts系统拆解 OpenDesign 中 Resend 设计系统包的完整构成从纯黑画布、霜蓝描边、三字体层级到多色强调体系再到可供 Agent 直接复用的 Prompt 配方。读完本文你将能够在 OpenDesign 生态中直接用一套 token 组件配方生成「画廊式暗黑 高级邮件基础设施」气质的落地页、仪表盘与代码展示面板。1. 包结构与阅读顺序一个可被 Agent 消费的设计系统包Resend 设计系统包位于仓库的 design-systems/resend 目录由 manifest.json 声明为od-design-system-project/v1规范版本分类为「Productivity SaaS」类型为bundled由 OpenDesign 策展的内置 fixture 派生而非对上游官网的实时抓取这一点在 source/evidence.md 中有明确声明。包内文件职责划分如下文件作用DESIGN.md视觉意图、约束与反模式anti-patterns是本文的主体tokens.css可直接粘贴进style的:roottoken 块含 14 条品牌决策注释components.html组件引用 fixture73 个选择器、39 个 class、25 个元素components.manifest.json紧凑的组件清单分组、选择器、class 与 token 引用关系manifest.json包契约文件映射、craft 建议、预览页与审计来源design-tokens.json / tailwind-v4.css派生输出由 report 与 token 样式表再生不建议手改preview/colors / typography / spacing 三个可视化检查页source/审计证据evidence、tokens.source.json、token-contract.report.jsonsystem/index.html、kit.dark.html、kit.html、tokens.default.json 等系统级产物USAGE.md 给出了 Agent 与评审者应遵循的阅读顺序先读 USAGE.md 理解包契约再读 DESIGN.md 理解视觉意图、约束与反模式把 tokens.css 粘贴进第一个 artifact 的style块再写组件 CSS用 components.manifest.json 做紧凑清单需要精确选择器或状态时打开 components.html需要视觉抽查时检查 preview/ 页面。同时它强调两条铁律保留 schema token 名称以保证跨品牌切换可靠避免在拷贝的:roottoken 块之外使用裸 hex 值也不得脱离 tokens.css 独立重定义 Tailwind 或 design-token 值。2. 视觉主题与氛围把邮件基础设施做成奢侈品Resend 官网是一块「黑暗的电影画布」——它把邮件基础设施当作奢侈品来呈现。整页铺满纯黑#000000文字以近白#f0f0f0发光营造出「内容在虚空舞台上表演」的剧场感。它区别于普通的开发者工具暗色这是摄影画廊式的受控黑暗每个元素都被有目的地照亮没有任何东西争夺注意力。2.1 三字体层级系统的明星精心挑选的三款字体构成了既编辑感又技术感的层级Domaine DisplayKlim Type Foundry 衬线体96px 巨幅 hero 标题行高几乎贴底1.00负字距-0.96px呈现出杂志封面式的展示文本ABC FavoritDinamo 出品负责章节标题以更激进的字距56px 下 -2.8px压缩出「工程化」的中层文本Inter承担正文与 UI提供让展示字体发光的干净可读性Commit Mono承担代码块让等宽字体成为一等公民。2.2 标志性元素霜蓝描边与多色强调让 Resend 与众不同的是它的冰蓝色描边体系。它不用中性灰边框而是用rgba(214, 235, 253, 0.19)—— 一条 19% 不透明度的淡蓝色霜线赋予每个容器和分隔线在黑色背景上的冷冽晶体质感。结合胶囊形按钮9999px 圆角、多色强调体系橙、绿、蓝、黄、红各有独立 CSS 变量刻度以及 OpenType 风格集ss01、ss03、ss04、ss11最终呈现出一套高级、精准、低调自信的设计系统。关键特征清单原文要点纯黑背景 近白#f0f0f0文本 —— 剧场/画廊式黑暗三字体层级Domaine Display衬线 hero、ABC Favorit几何章节、Inter正文/UI冰蓝描边rgba(214, 235, 253, 0.19)—— 每条边框都有冷冽晶体微光多色强调体系橙、绿、蓝、黄、红各有编号 CSS 变量刻度胶囊按钮与标签9999px 圆角 透明背景展示字体启用 OpenType 风格集ss01、ss03、ss04、ss11Commit Mono 用于代码 —— 等宽字体是设计元素而非事后补救极轻阴影用蓝色描边环rgba(176, 199, 217, 0.145) 0px 0px 0px 1px代替传统投影。3. 色彩体系与角色分工3.1 主色PrimaryToken色值角色Void Black虚空黑#000000页面背景定义性画布色经--color-black-12以 95% 不透明度使用Near White近白#f0f0f0主文本、按钮文字、高对比元素Pure White纯白#ffffff--color-white最高强调文本、链接高亮3.2 强调色刻度Accent Scale橙OrangeToken色值用途Orange 4#ff5900--color-orange-422% 不透明度 —— 柔和暖光Orange 10#ff801f--color-orange-10主橙色强调 —— 温暖、有活力Orange 11#ffa057--color-orange-11更亮的橙色作次级使用绿GreenToken色值用途Green 3#22ff99--color-green-312% 不透明度 —— 微弱的翡翠色晕Green 4#11ff99--color-green-418% 不透明度 —— 成功指示辉光蓝BlueToken色值用途Blue 4#0075ff--color-blue-434% 不透明度 —— 中等蓝强调Blue 5#0081fd--color-blue-542% 不透明度 —— 更强蓝Blue 10#3b9eff--color-blue-10亮蓝 —— 链接、交互元素其他Token色值用途Yellow 9#ffc53d--color-yellow-9暖金 —— 警告或高亮Red 5#ff2047--color-red-534% 不透明度 —— 错误态、破坏性操作3.3 中性刻度Neutral Scale名称色值角色Silver#a1a4a5次级文本、弱化链接、描述Dark Gray#464a4d三级文本、去强调内容Mid Gray#5c5c5c悬停态、微妙强调Medium Gray#494949四级文本Light Gray#f8f8f8浅色模式表面如适用Border Gray#eaeaea浅色上下文边框Edge Gray#ececec浅色表面上的微妙边框Mist Gray#dedfdf浅色分隔线Soft Gray#e5e6e6替代浅色边框3.4 表面与覆盖层Surface OverlayFrost Primary#fcfdff主色 token轻微蓝调94% 不透明度White Hoverrgba(255, 255, 255, 0.28)深色上的按钮悬停态White 60%oklab 表达约 0.577 透明度半透明白用于弱化文本White 64%约 0.642 透明度稍亮的半透明白。3.5 边框与阴影Frost Borderrgba(214, 235, 253, 0.19)标志性冰蓝边框19% 不透明度Frost Border Altrgba(217, 237, 254, 0.145)更淡的变体用于列表项Ring Shadowrgba(176, 199, 217, 0.145) 0px 0px 0px 1px蓝色描边式「边框阴影」Focus Ringrgb(0, 0, 0) 0px 0px 0px 8px厚重黑色焦点环产品语境中的可访问性设计Subtle Shadowrgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px极简卡片抬升。4. 字体规则4.1 字体族Font Families角色字体回退栈Display SerifdomaineDomaine Displayhero 标题专用Display SansaBCFavoritABC Favoritui-sans-serif, system-uiBody / UIinterui-sans-serif, system-uiMonospacecommitMonoui-monospace, SFMono-Regular, Menlo, Monaco, ConsolasSecondaryHelvetica特定 UI 上下文回退System-apple-system, system-ui, Segoe UI, Roboto内嵌内容4.2 层级表HierarchyRoleFontSizeWeightLine HeightLetter SpacingNotesDisplay Herodomaine96px6.00rem4001.00tight-0.96pxss01, ss04, ss11Display Hero Mobiledomaine76.8px4.80rem4001.00tight-0.768px移动端缩放Section HeadingaBCFavorit56px3.50rem4001.20tight-2.8pxss01, ss04, ss11Sub-headingaBCFavorit20px1.25rem4001.30tightnormalss01, ss04, ss11Sub-heading CompactaBCFavorit16px1.00rem4001.50-0.8pxss01, ss04, ss11Feature Titleinter24px1.50rem5001.50normal章节副标题Body Largeinter18px1.13rem4001.50normal引言Bodyinter16px1.00rem4001.50normal标准正文Body Semiboldinter16px1.00rem6001.50normal强调、激活态Nav LinkaBCFavorit14px0.88rem5001.430.35pxss01, ss03, ss04—— 正向字距Button / Linkinter14px0.88rem500–6001.43normal按钮、导航、CTACaptioninter14px0.88rem4001.60relaxednormal描述Helvetica CaptionHelvetica14px0.88rem400–6001.00–1.71normalUI 元素Smallinter12px0.75rem400–5001.33normal标签、元信息、小字Small Uppercaseinter12px0.75rem5001.33normaltext-transform: uppercaseSmall Capitalizeinter12px0.75rem5001.33normaltext-transform: capitalizeCode BodycommitMono16px1.00rem4001.50normal代码块Code SmallcommitMono14px0.88rem4001.43normal行内代码Code TinycommitMono12px0.75rem4001.33normal小号代码标签Heading (Helvetica)Helvetica24px1.50rem4001.40normal备选标题语境4.3 字体原则三字体编辑层级Domaine Display衬线 hero、ABC Favorit几何 sans 章节、Inter可读正文。每种字体有严格角色绝不越界展示层的激进负字距Domaine -0.96px、ABC Favorit -2.8px。展示文本像杂志刊头一样被压缩、有紧迫感、经过精心设计导航的唯一正向字距ABC Favorit 导航链接使用 0.35px 字距是全系统唯一的正向字距营造出与压缩标题形成对比的「透气」导航文字OpenType 即身份ss01、ss03、ss04、ss11风格集在全部 ABC Favorit 与 Domaine 文本上启用激活替代字形形成 Resend 字体的独特个性Commit Mono 作为设计元素等宽字体不藏在代码块里而是显著用于代码示例与技术内容被当作一等视觉元素对待。在实现层面components.html 的 body 级样式直接启用了font-feature-settings: liga 1, ss01 1, ss04 1, ss11 1并搭配-webkit-font-smoothing: antialiased与text-rendering: optimizeLegibility没有这些字体的浏览器会静默忽略指令不会出现回退丑陋。5. 组件样式5.1 按钮Primary Transparent Pill主透明胶囊背景transparent文字#f0f0f0内边距5px 12px圆角9999px全胶囊边框1px solid rgba(214, 235, 253, 0.19)霜边框悬停背景rgba(255, 255, 255, 0.28)白玻璃用途深色背景上的主 CTAWhite Solid Pill白实心胶囊背景#ffffff文字#000000内边距5px 12px圆角9999px用途高对比 CTA如 Get startedGhost Button幽灵按钮背景transparent文字#f0f0f0圆角4px无边框悬停微妙背景色调用途次级操作、Tab 项5.2 卡片与容器背景透明或极淡深色色调边框1px solid rgba(214, 235, 253, 0.19)霜边框圆角16px标准卡片、24px大区块/面板阴影rgba(176, 199, 217, 0.145) 0px 0px 0px 1px描边环深色产品截图与代码演示作为卡片内容无传统 box-shadow 抬升。5.3 输入与表单文字深色下#f0f0f0浅色下#000000圆角4px焦点基于 shadow 的焦点环极简样式 —— 继承深色主题。5.4 导航粘性深色头部底部霜边框1px solid rgba(214, 235, 253, 0.19)Resend wordmark 左对齐导航链接ABC Favorit 14px、weight 500、0.35px 字距胶囊 CTA 右对齐移动端汉堡折叠。5.5 图片处理产品截图与代码演示主导内容区块深色主题截图在深色背景上无缝融合图片圆角12px–16px全宽区块配微妙渐变覆盖层。5.6 特色组件Tab 导航水平 Tab 配微妙选中指示器Tab 项 8px 圆角激活态带微妙背景区分。代码预览面板使用 Commit Mono 的深色代码块霜边框rgba(214, 235, 253, 0.19)多色强调 token 语法高亮橙、蓝、绿、黄。多色强调徽章每个产品特性从 CSS 变量刻度取自己的强调色徽章用低不透明度12–42%强调色作背景、全不透明度作文字。从 components.manifest.json 可以确认这些组件的实现规模按钮组.btn/.btn-ghost/.btn-pill/.btn-pill-white含 hover 与:focus-visible状态、表单.field含::placeholder、:hover、:focus-visible、卡片.card、徽章.badge-accent/.badge-muted/.badge-success/.badge-dot、链接a.link-accent、代码面板.code-panel含.tok-key/.tok-str/.tok-fn/.tok-com四个语法 token 类以及布局原语.container/.row-between/.stack-3/.stack-4/.stack-6共 9 个组件分组、73 个选择器。6. 布局原则6.1 间距系统基础单位8px刻度1px、2px、4px、5px、6px、7px、8px、10px、12px、16px、20px、24px、30px、32px、40px。6.2 栅格与容器居中内容配宽裕 max-width全宽黑色区块内嵌受限内容单列 hero 向下扩展为特性栅格代码预览面板作为全宽或受限展示。6.3 留白哲学电影感黑空间黑色背景本身就是留白。区块间 80px–120px 的慷慨垂直间距创造出「穿越黑暗的滚动体验」每个区块像一幕幕场景浮现紧凑内容、广袤环绕文本块与卡片内部紧凑却漂浮在广袤的暗色空间中 —— 形成孤立的「内容之岛」排版主导节奏96px 的巨型展示字体自成垂直节奏每个标题都是锚定周边空间的视觉事件。6.4 圆角刻度档位圆角用途Sharp4px按钮幽灵、输入、小交互元素Subtle6px菜单面板、导航项Standard8pxTab、内容块Comfortable10px强调元素Card12px剪贴板按钮、中等容器Large16px特性卡片、图片、主按钮Section24px大面板、区块容器Pill9999px主 CTA、标签、徽章7. 深度与层级Depth Elevation层级处理用途FlatLevel 0无阴影、透明背景默认 —— 大多数元素立于虚空之上RingLevel 1rgba(176, 199, 217, 0.145) 0px 0px 0px 1px卡片、容器的「阴影即边框」Frost BorderLevel 1b1px solid rgba(214, 235, 253, 0.19)显式边框 —— 按钮、分隔线、TabSubtleLevel 2rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px浅色卡片抬升FocusLevel 3rgb(0, 0, 0) 0px 0px 0px 8px厚重黑色焦点环 —— 可访问性阴影哲学Resend 几乎完全不用阴影。在纯黑背景上传统阴影是隐形的 —— 你无法向虚空投射影子。Resend 转而通过标志性霜边框rgba(214, 235, 253, 0.19)创造深度 —— 那些捕捉光线、在黑暗中发光的纤细冰蓝线条营造出「悬浮在空间中的玻璃面板」美学边框是主要的深度机制。装饰性深度hero 内容后方的微妙暖色渐变辉光橙/琥珀色调产品截图通过自身内部 UI 创造视觉深度无渐变背景 —— 深度来自边框亮度与内容对比。8. 该做与不该做Dos and DontsDo用纯黑#000000作页面背景 —— 虚空就是画布所有结构线使用霜边框rgba(214, 235, 253, 0.19)—— 它们是蓝调签名Domaine Display只用于 hero 标题96pxABC Favorit 用于章节标题Inter 用于其余一切在 Domaine 与 ABC Favorit 文本上启用 OpenTypess01、ss04、ss11主 CTA 与标签使用胶囊圆角9999px使用多色强调刻度橙/绿/蓝/黄/红配不透明度变体做语境化高亮阴影保持在描边环层级0px 0px 0px 1px—— 黑底上传统阴影无效ABC Favorit 导航链接使用 0.35px 字距 —— 唯一的正向字距。Dont不要把背景提亮到#000000以上 —— 纯黑虚空不可妥协不要用中性灰边框 —— 所有边框必须带霜蓝调不要把 Domaine Display 用到正文 —— 它是展示专用衬线体不要在同一组件中混用强调色 —— 每个特性只用一个强调色不要在深色背景上用 box-shadow 做抬升 —— 用霜边框代替不要跳过 OpenType 风格集 —— 它们定义了排版的个性不要在导航链接上用负字距 —— ABC Favorit 导航用正向 0.35px不要在深色上做不透明按钮 —— 透明 霜边框才是该模式。9. 响应式行为断点名称宽度关键变化Mobile Small480px单列、紧凑内边距、76.8px heroMobile480–600px标准移动端、堆叠布局Desktop600px完整布局、96px hero、展开区块注Resend 使用极简断点系统 —— 只检测 480px 与 600px。设计为桌面优先配干净的移动端折叠。触控目标胶囊按钮充足内边距5px 12px 起Tab 项8px 圆角配舒适命中区域导航链接以 0.35px 字距做视觉分隔。折叠策略HeroDomaine 96px → 移动端 76.8px导航横向 → 汉堡菜单特性区块并排 → 堆叠代码面板保持宽度必要时横向滚动间距按比例压缩。图片行为产品截图保持宽高比深色截图在任何尺寸下与深色背景无缝融合圆角12px–16px跨断点保持。10. Agent Prompt Guide把整套规则交给生成模型快速色彩参考背景Void Black#000000主文本Near White#f0f0f0次级文本Silver#a1a4a5边框Frost Borderrgba(214, 235, 253, 0.19)橙色强调#ff801f绿色强调#11ff9918% 不透明度蓝色强调#3b9eff焦点环rgb(0, 0, 0) 0px 0px 0px 8px示例组件 Prompt可直接复用Hero 区块「在纯黑#000000背景上创建 hero 区块。标题 96px Domaine Display、weight 400、行高 1.00、字距 -0.96px、近白#f0f0f0文字、OpenType ss01 ss04 ss11。副标题 20px ABC Favorit、weight 400、行高 1.30。两个胶囊按钮白色实心#ffffff、9999px 圆角与透明霜边框rgba(214,235,253,0.19)。」导航栏「设计导航栏深色背景配底部霜边框1px solid rgba(214,235,253,0.19)。导航链接 14px ABC Favorit、weight 500、字距 0.35px、OpenType ss01 ss03 ss04。白色胶囊 CTA 右对齐。」特性卡片「构建特性卡片透明背景、霜边框rgba(214,235,253,0.19)、16px 圆角。标题 56px ABC Favorit、weight 400、字距 -2.8px。正文 16px Inter、weight 400、#a1a4a5 文字。」代码块「用 Commit Mono 16px 在深色背景上创建代码块。霜边框容器24px 圆角。语法颜色橙#ff801f、蓝#3b9eff、绿#11ff99、黄#ffc53d。」强调徽章「设计强调徽章背景 #ff5900 22% 不透明度、文字 #ffa057、9999px 圆角、12px Inter、weight 500。」迭代指南从纯黑开始 —— 万物悬浮于虚空霜边框rgba(214, 235, 253, 0.19)是普适结构元素 —— 不是灰、不是中性色三字体、三角色Domainehero、ABC Favorit章节、Inter正文—— 绝不跨界展示字体上 OpenType 风格集是强制项 —— 它们定义个性多色强调在背景用低不透明度12–42%、文字用全不透明度胶囊形9999px用于 CTA 与徽章标准圆角4px–16px用于容器不用阴影 —— 用霜边框对抗虚空创造深度。11. 实现层tokens.css 的 14 条品牌决策design-systems/resend/tokens.css 不只是值的堆砌 —— 它的头部注释逐条记录了将共享 schemadesign-systems/_schema/tokens.schema.ts通过 design-systems/_schema/defaults.css 提供 A2 回退适配到 Resend 品牌语气的 14 条决策每条都能回溯到 DESIGN.md 的对应章节--bg与--surface都绑到#000000卡片不靠填充抬升只靠霜边框识别对应 §7「纯黑不可妥协」--surface-warm别名到 surface因为品牌没有任何第二个背景色--border直接绑定 alpha 值rgba(214, 235, 253, 0.19)而非实心 hex让--elev-ring0 0 0 1px var(--border)默认就能复现冰线也让所有组件用border: 1px solid var(--border)取到同一值--border-soft降至rgba(217, 237, 254, 0.145)用于不与该竞争的内部行分隔--fg是#f0f0f0而非#ffffff四级前景梯度#f0f0f0 → #a1a4a5 → #5c5c5c → #464a4d独立绑定对应 §2 的中性刻度把纯白留给白胶囊 CTA 与链接高亮--accent是 Resend Orange#ff801f§2 中唯一标注「primary orange accent」的条目--accent-on是#000000—— 饱和橙底上用黑字最清晰白胶囊模式属于#ffffff实心底不属于橙色强调填充hover 提亮 10%、active 压暗 12%与 schema 默认「全压暗」相反 —— 在虚空画布上「按下」读作向暗处微陷「悬停」读作亮度上浮符合深色系统惯例语义色直取 §2 多色刻度--success: #11ff99Green 4、--warn: #ffc53dYellow 9、--danger: #ff2047Red 5文档化的 12–42% 低透明度色调由组件层用color-mix(in oklab, var(--success), transparent 80%)就地达成字号刻度 12/14/16/18/20/24/56/96 全部有据其中 36px 的--text-2xl是合成的中间档桥接 24px 特性标题到 56px 章节标题避免 H2 的 24→56 跳变--tracking-display: -0.05em由 §3 章节标题-2.8px 56px -0.05em推导ABC Favorit 的压缩强于 Domaine-0.01em 96px绑到 ABC Favorit 的特征值让整个展示层都带上「工程化刊头」感--font-display把 ABC Favorit 列首位、Inter 作结构性回退而 Domaine Display刻意不进栈—— 它是付费 Klim 字体缺失时会以突兀的衬线跌落暴露需要 Domaine 的 hero 在组件层用font-family: Domaine Display, var(--font-display)叠加区块节奏 120px / 80px / 48px桌面取 §5 文档范围80–120px的上限平板与手机按比例下落圆角四档4pxSharp、8pxStandard、16pxLarge、9999pxPill24px 的 Section 圆角是组件内联值不入共享 schema--elev-raised把文档化的描边环与 §6 Level 2 的柔和投影叠加纯黑上模糊阴影会消失描边环负责边缘柔和投影只补一点大气色调覆盖时永不剥离描边环--focus-ring是 2px 橙色实环而非 schema 的 3px alpha 辉光文档化的 8px 黑环在黑色画布上会被吞掉换成橙色 2px 实环在虚空与卡片表面都清晰可辨--container-max: 1200px桌面水槽 32px营销页把水槽当作画廊留白而非出血。这些决策全部受到契约约束components.manifest.json的tokens.declared共列出 56 个 token且undeclaredReferenced为空 —— 即组件 fixture 引用的每一个 token 都在:root中声明过无悬挂引用。审计产物 source/token-contract.report.json 给出了更细的量化结果56 个 token 全部declared、全部sourceBacked按层划分 A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个契约分数 100、等级 excellent且recommendRebuild为 false。12. 在 OpenDesign 中消费这套系统按 USAGE.md 的约定实际使用方式是把 tokens.css 的:root块原样粘贴进 artifact 的第一个style块components.html 第 18 行起即这样演示的然后只通过var(--token)引用值禁止在块外出现裸 hex。生产时注意所有品牌共用同一套 A2 token 名由 design-systems/_schema/tokens.schema.ts 与 defaults.css 定义跨品牌切换只换:root块即可语法高亮等组件配色属于组件层职责用color-mix(in oklab, ...)就地完成 alpha 混合不新增 token付费字体ABC Favorit、Domaine Display、Commit Mono不在本仓库内回退栈已就位以保证未加载时的可读性想快速目检 token 是否生效可打开 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页或直接看 system/index.html 与 system/kit.dark.html若要在更广的语境中校验本系统的色彩可访问性可对照 craft/color.md 与 craft/accessibility-baseline.mdmanifest.json 的craft.suggested也正是指向这两项。13. 参考文件速查设计意图与规则全文design-systems/resend/DESIGN.md包使用契约design-systems/resend/USAGE.mdToken 定义与 14 条决策design-systems/resend/tokens.css组件引用 fixturedesign-systems/resend/components.html组件清单与 token 引用关系design-systems/resend/components.manifest.json包清单文件映射 / craft 建议 / 预览页design-systems/resend/manifest.json共享 token schemadesign-systems/_schema/tokens.schema.ts 与 A2 回退 design-systems/_schema/defaults.css审计证据design-systems/resend/source/evidence.md、design-systems/resend/source/token-contract.report.json【免费下载链接】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），仅供参考