OpenDesign 中的 IBM Carbon 设计系统实现指南从--cds-*语义令牌到 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/ibm 设计系统包整理而成。该包以 IBM Carbon 设计语言为蓝本完整定义了「白色表面 灰度中性色 单一 IBM Blue 60 强调色」的视觉规范、IBM Plex 排版体系、0px 圆角的矩形组件美学与 8px 间距网格并配套提供可直接注入 Agent 上下文的提示词模板。读完本文你将掌握如何在 OpenDesign 的 Agent 工作流中复刻 IBM 官网级别的企业级界面从复制 tokens.css 语义令牌、按 DESIGN.md 规范组装组件到使用现成的组件提示词与迭代规则让编码 Agent 一次性产出风格统一、可直接导出的 HTML 原型。1. 设计系统包结构一个可移植的「设计上下文」OpenDesign 将每个设计系统封装为目录下的独立包每个包具备统一的最小机器可读结构详见 design-systems/README.mddesign-systems/slug/ ├── manifest.json # 稳定发现元数据、来源与包内路径声明 ├── DESIGN.md # 面向 Agent 的规范正文设计散文 └── tokens.css # 编译后的语义令牌样式表IBM 包manifest.json属于完整形态的包额外声明了以下活跃运行时输入USAGE.mdAgent 的阅读顺序与使用指南design-tokens.json从令牌契约报告派生的 Design Tokens JSONtailwind-v4.css从tokens.css派生的 Tailwind v4 映射components.html/components.manifest.json独立组件夹具与组件/令牌索引preview/colors、typography、spacing 三个可视化预览页source/evidence.md、tokens.source.json、token-contract.report.json审计证据。其中design-tokens.json的派生报告显示该包共 56 个令牌全部有源码背书令牌契约评分 100 分、评级 excellent见 design-tokens.json 的summary字段。tailwind-v4.css与design-tokens.json都是从tokens.css派生的缓存产物唯一的事实来源是 tokens.css这一点在 source/evidence.md 中有明确说明。2. 视觉主题与氛围工程规格渲染成的网页IBM 的视觉语言是「企业权威的数字化具象」建立在 Carbon 设计系统之上严谨到像一份被渲染成网页的工程规格。其核心是严格二元对立亮白#ffffff画布 近黑#161616文字贯穿始终的唯一不变强调色——IBM Blue 60#0f62fe。这不是科技初创企业的俏皮极简主义而是蒸馏到像素级的企业精确度每个元素都存在于 Carbon 2x 硬网格中每个颜色都绑定语义令牌每个间距值都锚定在 8px 基础单位上。字体层面IBM Plex 家族是系统的根基IBM Plex SansLight300用于大尺寸标题——在超大字号下产生出乎意料的轻盈质感与 IBM 的企业严肃形成刻意对照正文 Regular40014px 时配合 0.16px 字距营造「工程感」而非「设计感」的微间距IBM Plex Mono服务代码、数据与技术标签与少用的 IBM Plex Serif 共同构成三成员家族。超越「单色 蓝」识别度的是对 Carbon 组件令牌体系的依赖每个交互状态都映射到--cds-前缀的 CSS 变量如--cds-button-primary、--cds-button-primary-hover、--cds-button-primary-active。按钮没有硬编码颜色而是引用令牌——这种令牌化架构意味着整个视觉层只是深层系统化基础之上的薄壳是「设计领域的高质量类型化 API」。关键特征清单IBM Plex Sans 300Light用于展示级文字——以排版克制承载企业分量IBM Plex Mono 用于代码与技术内容小字号下保持 0.16px 字距唯一强调色IBM Blue 60#0f62fe——每个交互元素、每个 CTA、每条链接Carbon 令牌系统--cds-*驱动所有语义颜色支持在变量层面切换主题8px 间距网格严格执行——无任意值一切对齐无边框扁平卡片置于#f4f4f4Gray 10表面——用背景色分层而非阴影表达深度表单输入框只使用下边框而非完整边框——Carbon 表单的标志性模式主按钮圆角 0px——刻意方正不做柔化。3. 色彩体系单色 蓝的工程化调色板3.1 核心颜色角色色值说明IBM Blue 60#0f62fe唯一的交互色主按钮、链接、焦点态、激活指示器也是主 UI 调色板中唯一的彩色色相White#ffffff页面背景、卡片表面、蓝底上的按钮文字对应--cds-backgroundGray 100#161616主文字、标题、深色 UI chrome、导航栏、页脚对应--cds-text-primary3.2 中性灰阶Gray 家族Gray 100#161616主文字、标题、深色 UI chrome、页脚背景Gray 90#262626次级深色表面、深色背景上的 hover 态Gray 80#393939三级深色、激活态Gray 70#525252次级文字、辅助文字、描述对应--cds-text-secondaryGray 60#6f6f6f占位文字、禁用文字Gray 50#8d8d8d禁用图标、弱化标签Gray 30#c6c6c6边框、分隔线、输入框下边框对应--cds-border-subtleGray 20#e0e0e0细边框、卡片轮廓Gray 10#f4f4f4次级表面背景、卡片填充、斑马纹行对应--cds-layer-01Gray 10 Hover#e8e8e8Gray 10 表面的 hover 态。3.3 交互色Blue 60#0f62fe主要交互——按钮、链接、焦点对应--cds-link-primary、--cds-button-primaryBlue 70#0043ce链接 hover 态对应--cds-link-primary-hoverBlue 80#002d9c蓝色元素的激活/按下态Blue 10#edf5ff蓝色调表面、选中行背景Focus Blue#0f62fe对应--cds-focus聚焦元素上 2px inset 边框Focus Inset#ffffff对应--cds-focus-inset深色背景上焦点的白色内环。3.4 支持与状态色Red 60#da1e28错误、危险--cds-support-errorGreen 50#24a148成功--cds-support-successYellow 30#f1c21b警告--cds-support-warningBlue 60#0f62fe信息--cds-support-info。3.5 深色主题Gray 100 主题BackgroundGray 100#161616--cds-backgroundLayer 01Gray 90#262626卡片与容器表面Layer 02Gray 80#393939抬升表面Text PrimaryGray 10#f4f4f4--cds-text-primaryText SecondaryGray 30#c6c6c6--cds-text-secondaryBorder SubtleGray 80#393939--cds-border-subtleInteractiveBlue 40#78a9ff链接与交互元素提亮以保证对比度。3.6 与仓库令牌的对应关系上述规范在 tokens.css 中被编译为可直接使用的语义令牌。注意包内令牌使用归一化命名--bg、--surface、--fg、--accent等其中几个关键映射值得注意:root { --bg: #ffffff; /* 页面背景 */ --surface: #f4f4f4; /* Gray 10 卡片表面 */ --surface-warm: #edf5ff; /* Blue 10 蓝色调表面 */ --fg: #161616; /* Gray 100 主文字 */ --fg-2: #525252; /* Gray 70 次级文字 */ --muted: #6f6f6f; /* Gray 60 占位文字 */ --meta: #8d8d8d; /* Gray 50 弱化元信息 */ --border: #c6c6c6; /* Gray 30 边框 */ --border-soft: #e0e0e0; /* Gray 20 细边框 */ --accent: #0f62fe; /* Blue 60 唯一强调色 */ --accent-on: #ffffff; /* 强调色上的前景色 */ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #24a148; --warn: #f1c21b; --danger: #da1e28; }其中--accent-hover与--accent-active使用现代 CSScolor-mix()基于强调色自动派生分别约等于文档中的 Blue 60 Hover#0353e9与 Blue 80#002d9c——这正体现了「令牌化架构 设计层面的类型化 API」换一个品牌只需替换:root令牌块即可实现跨品牌切换这也正是 USAGE.md 中「精确保留模式令牌名以保证跨品牌切换可靠」的底层原因。4. 排版规则IBM Plex 的类型工程4.1 字体家族主字体IBM Plex Sans备选Helvetica Neue, Arial, sans-serif等宽IBM Plex Mono备选Menlo, Courier, monospace衬线受限使用IBM Plex Serif用于编辑与表达性语境图标字体ibm_icons20px 专有图标字形。仓库中 tokens.css 的绑定为--font-display: IBM Plex Sans, Helvetica Neue, Arial, sans-serif; --font-body: IBM Plex Sans, Helvetica Neue, Arial, sans-serif; --font-mono: IBM Plex Mono, SF Mono, Menlo, monospace;4.2 字号层级角色字体字号字重行高字距备注Display 01IBM Plex Sans60px (3.75rem)300 (Light)1.17 (70px)0最大冲击力轻盈字重营造优雅Display 02IBM Plex Sans48px (3.00rem)300 (Light)1.17 (56px)0次级 hero响应式后备Heading 01IBM Plex Sans42px (2.63rem)300 (Light)1.19 (50px)0表达性标题Heading 02IBM Plex Sans32px (2.00rem)400 (Regular)1.25 (40px)0章节标题Heading 03IBM Plex Sans24px (1.50rem)400 (Regular)1.33 (32px)0子章节标题Heading 04IBM Plex Sans20px (1.25rem)600 (Semibold)1.40 (28px)0卡片标题、功能标题Heading 05IBM Plex Sans20px (1.25rem)400 (Regular)1.40 (28px)0更轻的卡片标题Body Long 01IBM Plex Sans16px (1.00rem)400 (Regular)1.50 (24px)0标准阅读文本Body Long 02IBM Plex Sans16px (1.00rem)600 (Semibold)1.50 (24px)0强调正文、标签Body Short 01IBM Plex Sans14px (0.88rem)400 (Regular)1.29 (18px)0.16px紧凑文本、说明文字Body Short 02IBM Plex Sans14px (0.88rem)600 (Semibold)1.29 (18px)0.16px粗体说明、导航元素Caption 01IBM Plex Sans12px (0.75rem)400 (Regular)1.33 (16px)0.32px元数据、时间戳Code 01IBM Plex Mono14px (0.88rem)400 (Regular)1.43 (20px)0.16px行内代码、终端Code 02IBM Plex Mono16px (1.00rem)400 (Regular)1.50 (24px)0代码块Mono DisplayIBM Plex Mono42px (2.63rem)400 (Regular)1.19 (50px)0hero 区的装饰性等宽字4.3 排版原则展示级字号用轻字重Carbon 表达性排印在 42px 及以上使用 300Light字重制造标志性的张力——内容以企业权威发声字形本身却以排版上的轻盈「低语」小字号微字距14px 用 0.16px、12px 用 0.32px 字距。这些看似微小的值是 Carbon 小尺寸可读性的秘密武器——它们略微打开 IBM Plex 的紧密字形三种功能字重300展示/表达、400正文/阅读、600强调/UI 标签。700 被有意排除在生产排印刻度之外生产型 vs 表达型生产型Productive字组用更紧的行距1.29支撑高密度 UI表达型Expressive字组用更松弛的行距1.40–1.50服务营销与编辑内容。5. 组件样式化Carbon 的方形组件语言5.1 按钮主按钮蓝色背景#0f62feBlue 60→--cds-button-primary文字#ffffff内边距14px 63px 14px 15px不对称——右侧预留图标位边框1px solid transparent圆角0px干脆的矩形——Carbon 的标志高度48px默认、40px紧凑、64px表达型Hover#0353e9Blue 60 Hover→--cds-button-primary-hoverActive#002d9cBlue 80→--cds-button-primary-activeFocus2px solid #0f62feinset 1px solid #ffffff内环。次级按钮灰色背景#393939Gray 80文字#ffffffHover#4c4c4cGray 70Active#6f6f6fGray 60与主按钮相同的内边距与圆角。三级按钮Ghost Blue背景transparent文字#0f62fe边框1px solid#0f62feHover#0353e9文字 Blue 10 色调背景圆角0px。Ghost 按钮背景transparent文字#0f62fe内边距14px 16px无边框Hover#e8e8e8色调背景。危险按钮背景#da1e28Red 60文字#ffffffHover#b81921Red 70。在仓库组件夹具中主/次按钮对应.btn-primary、.btn-secondary选择器components.manifest.json的 buttons 组显示它们引用--accent、--accent-on、--radius-md、--ease-standard、--motion-fast等令牌详见 components.manifest.json 的groups.buttons并定义了.btn:focus-visible的键盘焦点态。5.2 卡片与容器背景白色主题下#ffffff抬升卡片用#f4f4f4Gray 10边框无扁平设计——多数卡片无边框无阴影圆角0px与按钮的方形美学一致Hover可点击卡片背景过渡到#e8e8e8Gray 10 Hover内容内边距16px分隔方式背景色分层white → gray 10 → white而非阴影。5.3 输入框与表单背景#f4f4f4Gray 10→--cds-field文字#161616Gray 100内边距0px 16px仅水平高度40px默认、48px大号边框两侧与顶部无边框——底部2px solid transparent激活下边框2px solid #161616Gray 100焦点2px solid #0f62fe下边框 →--cds-focus错误2px solid #da1e28Red 60下边框标签12px IBM Plex Sans、字距 0.32px、Gray 70辅助文本12px、Gray 60占位符Gray 60#6f6f6f圆角0px顶部——尖角输入框。components.manifest.json的 inputs 组确认.field、input、input:focus、label构成该组件组令牌引用为--surface、--border、--radius-sm、--space-2/4/5等。5.4 导航背景#161616Gray 100——通栏深色页头高度48pxLogo8 条横线的 IBM 标志深底白字左对齐链接14px IBM Plex Sans、字重 400、默认#c6c6c6Gray 30链接 hover#ffffff文字激活链接#ffffff 下边框指示器平台切换器左对齐水平标签页搜索点击图标滑出搜索框移动端汉堡菜单 左侧滑出面板。5.5 链接默认#0f62feBlue 60无下划线Hover#0043ceBlue 70 下划线已访问保持 Blue 60访问态不变化行内链接正文中默认带下划线。5.6 特色组件内容块Hero/Feature通栏 white/gray-10 交替背景带左对齐标题 60px 或 48px 展示字CTA 为带箭头图标的蓝色主按钮图片/插图右对齐移动端下移。Tile可点击卡片背景#f4f4f4或#ffffffhover 时通栏下边框或背景变化hover 时右下角出现箭头图标无阴影——平面即身份。Tag / Label背景对应彩色 10% 不透明度如 Blue 10、Red 10文字对应 60 级色相内边距4px 8px圆角24px胶囊形——0px 规则的唯一例外字号12px、字重 400。通知横幅通栏条带通常 Blue 60 或 Gray 100 背景白色 14px 文字关闭图标右对齐。6. 布局原则8px 网格与碳式密度6.1 间距系统基础单位8pxCarbon 2x 网格组件间距刻度2px、4px、8px、12px、16px、24px、32px、40px、48px布局间距刻度16px、24px、32px、48px、64px、80px、96px、160px最小单位8px最小可用间距组件内部内边距通常 16px卡片/磁贴间间隙1px发丝线或 16px标准。仓库 tokens.css 将间距刻度编译为--space-14px到--space-1248px并补充了响应式章节垂直间距--section-y-desktop: 96px、--section-y-tablet: 72px、--section-y-phone: 48px。6.2 网格与容器16 列网格Carbon 2x 系统内容最大宽度1584px最大断点列间空隙32px移动端 16px页边距16px移动端、32px平板及以上内容通常占据 8–12 列以保证舒适行长通栏区块与受限内容交替。容器令牌在 tokens.css 中绑定为--container-max: 1312px沟槽--container-gutter-desktop: 32px、--container-gutter-tablet: 24px、--container-gutter-phone: 16px注意文档正文提到 1584px 最大断点而包内--container-max采用 1312px 作为实际容器上限二者分别对应「断点理论值」与「容器实现值」。6.3 留白哲学功能密度Carbon 偏好生产型密度而非大面积留白区块比消费级设计系统更紧凑——反映 IBM 的企业 DNA背景色分区用交替背景色white → gray 10 → white而非大间距制造视觉分隔48px 恒定节奏主要区块间垂直间距 48pxhero 区可用 80–96px。6.4 圆角刻度0px主按钮、输入框、磁贴、卡片——占主导地位的处理方式。Carbon 本质上是矩形的2px偶尔用于小交互元素如标签24px标签/徽章胶囊形——唯一的圆角例外50%头像圆形、图标容器。仓库中对应--radius-sm/md/lg: 0px与--radius-pill: 9999px与文档完全一致。7. 深度与抬升无阴影的分层体系层级处理方式应用FlatLevel 0无阴影背景#ffffff标准页面表面Layer 01无阴影背景#f4f4f4卡片、磁贴、交替区块Layer 02无阴影背景#e0e0e0Layer 01 内的抬升面板Raised0 2px 6px rgba(0,0,0,0.3)下拉菜单、提示框、溢出菜单Overlay0 2px 6px rgba(0,0,0,0.3) 深色底衬模态对话框、侧边面板Focus2px solid #0f62feinset 1px solid #ffffff键盘焦点环Bottom-border底部2px solid #161616激活输入框、激活标签页指示器阴影哲学Carbon 刻意回避阴影。IBM 主要通过背景色分层实现深度——用逐级加深的灰色堆叠表面而非添加box-shadow。这造就了扁平、受印刷启发的美学层级靠色值传达而非模拟光线。阴影只保留给真正浮起的元素下拉、提示、模态框这种克制让罕见的阴影获得分量感——当某个东西在 Carbon 中「悬浮」时它一定有含义。仓库中对应--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: 0 2px 6px rgba(0,0,0,0.12)与焦点环--focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0f62fe后者正是「白内环 蓝外环」焦点样式的直接实现。8. 该做与不该做该做Do展示级字号42px使用 IBM Plex Sans 字重 300——轻盈是有意为之14px 正文用 0.16px 字距12px 说明用 0.32px 字距按钮、输入框、卡片、磁贴使用圆角 0px——矩形就是系统本身实现时引用--cds-*令牌名如--cds-button-primary、--cds-text-primary用背景色分层white → gray 10 → gray 20而非阴影表达深度输入框使用下边框而非整体边框作为指示器保持默认按钮高度 48px 与预留图标位的不对称内边距将 Blue 60#0f62fe作为唯一强调色——一个蓝统御一切。不该做Dont不要圆化按钮边角——0px 圆角就是 Carbon 的身份不要在卡片或磁贴上使用阴影——平面即本质不要引入额外强调色——IBM 系统是「单色 蓝」不要使用 700Bold字重——刻度止步于 600Semibold不要给展示级文字加字距——字距只用于 14px 及以下不要给输入框加完整边框——Carbon 输入框只用下边框不要使用渐变背景——IBM 表面是扁平的纯色不要偏离 8px 间距网格——每个值都应能被 8 整除2px 与 4px 仅作微调。9. 响应式行为9.1 断点名称宽度关键变化Small (sm)320px单列、汉堡导航、16px 页边距Medium (md)672px双列网格开始、内容扩展Large (lg)1056px完整导航可见、3–4 列网格X-Large (xlg)1312px最大内容密度、宽布局Max1584px内容最大宽度、居中 页边距9.2 触控目标按钮高度默认 48px紧凑型至少 40px导航链接48px 行高便于点触输入框高度默认 40px、大号 48px图标按钮48px 方形触控区移动端菜单项48px 通栏行。9.3 折叠策略Hero展示字 60px → 42px → 32px 标题随视口收窄逐级缩小导航完整水平页头 → 汉堡 滑出面板网格4 列 → 2 列 → 单列磁贴/卡片水平网格 → 垂直堆叠图片保持宽高比、max-width: 100%页脚多列链接组 → 单列堆叠区块间距48px → 32px → 16px。9.4 图片行为自适应图片max-width: 100%产品插图按比例缩放Hero 图片可从并排布局切换为下方堆叠数据可视化保持宽高比移动端支持横向滚动。10. Agent 提示词指南让编码 Agent 输出 Carbon 风格10.1 颜色速查表主 CTAIBM Blue 60#0f62fe背景White#ffffff标题文字Gray 100#161616正文Gray 100#161616次级文字Gray 70#525252表面/卡片Gray 10#f4f4f4边框Gray 30#c6c6c6链接Blue 60#0f62fe链接 hoverBlue 70#0043ce焦点环Blue 60#0f62fe错误Red 60#da1e28成功Green 50#24a148。10.2 组件提示词示例Hero 区块「创建白色背景的 hero 区块。标题 60px IBM Plex Sans 字重 300、line-height 1.17、颜色 #161616。副标题 16px 字重 400、line-height 1.50、颜色 #525252、max-width 640px。蓝色 CTA 按钮背景 #0f62fe、文字 #ffffff、border-radius 0px、高度 48px、padding 14px 63px 14px 15px。」磁贴卡片「设计卡片磁贴背景 #f4f4f4、border-radius 0px、padding 16px。标题 20px IBM Plex Sans 字重 600、line-height 1.40、颜色 #161616。正文 14px 字重 400、letter-spacing 0.16px、line-height 1.29、颜色 #525252。Hover背景变为 #e8e8e8。」表单字段「创建表单字段背景 #f4f4f4、border-radius 0px、高度 40px、水平 padding 16px。上方标签 12px 字重 400、letter-spacing 0.32px、颜色 #525252。下边框默认 2px solid transparent聚焦时 2px solid #0f62fe。Placeholder#6f6f6f。」深色导航栏「创建深色导航栏背景 #161616、高度 48px。IBM 白色 logo 左对齐。链接 14px IBM Plex Sans 字重 400、颜色 #c6c6c6。Hover文字 #ffffff。激活#ffffff 2px 下边框。」标签组件「创建标签组件背景 Blue 10#edf5ff、文字 Blue 60#0f62fe、padding 4px 8px、border-radius 24px、12px IBM Plex Sans 字重 400。」10.3 迭代规则按钮、输入框、卡片一律使用 border-radius 0px——在 Carbon 中这是强制项字距只用于小字号14px 用 0.16px、12px 用 0.32px——绝不用在展示级文字三种字重300展示、400正文、600强调——不要 BoldBlue 60 是唯一强调色——不要引入次级强调色相深度靠背景色分层white → #f4f4f4 → #e0e0e0而非阴影输入框只有下边框绝不完整包边使用--cds-前缀命名令牌以保持 Carbon 兼容48px 是交互元素的通用高度。11. 在 OpenDesign 中使用 IBM 设计系统包按照包的 USAGE.md 定义的标准阅读顺序Agent 应按以下流程消费该包先读USAGE.md理解包契约再读DESIGN.md即本文的规范原文多语言版本见 DESIGN.md俄文版即 DESIGN-ru.md理解视觉意图、约束与反模式编写组件 CSS 前先把tokens.css粘贴进第一个工件artifact的style块——这是「先令牌后组件」的关键纪律需要精确选择器或状态时用components.manifest.json做紧凑组件清单打开components.html查证需要视觉 sanity check 时查看preview/下的 colors、typography、spacing 三个预览页。使用约束Avoid避免在复制的:root令牌块之外使用裸 hex 值避免独立于tokens.css重新定义 Tailwind 或设计令牌值tailwind-v4.css 只是派生映射tokens.css才是唯一事实来源避免声称原始上游来源证据——该包基于 OpenDesign 策展的捆绑夹具见 source/evidence.md避免添加components.html与DESIGN.md中未出现的组件配方。在 OpenDesign 的产品工作流中从 Design System 界面或受支持的项目创建流程中选择该包即可将其设计上下文合入 Agent 提示词见 design-systems/README.md 的说明。若在本地二次开发该包作者规范与检查清单可参考 docs/design-systems.md并以pnpm guard与pnpm typecheck校验包质量与类型。12. 结语Carbon 的克制即系统IBM Carbon 风格最容易被误读为「简陋」单色 一个蓝、0px 圆角、无阴影、字重止步 600。但正如本文所示这种克制背后是一整套精密工程——--cds-*语义令牌让主题切换变成变量替换8px 网格让任何元素位置都可预测背景分层取代阴影让层级表达不依赖光影。对于 OpenDesign 场景这套规范的真正价值在于它高度可提示化把第 3–7 节的规格编译进 tokens.css把第 10 节的提示词模板交给 Agent就能让编码 Agent 稳定地产出「企业权威感」的界面而不必在每次生成时重新解释什么是 IBM 风格。无论是 landing page、dashboard 还是产品原型这套「先令牌、后组件、再迭代」的流程都值得直接复用。【免费下载链接】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），仅供参考