AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】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/cohere/DESIGN-vi.mdCohere 设计系统越南语规范文档展开并结合仓库内该品牌的 tokens.css、components.html、manifest.json 等打包产物讲解如何在 OpenDesign 中以 Agent 提示词驱动的方式还原一个面向 CTO 与企业架构师的企业 AI 平台界面白底冷灰容器、22px 签名圆角、CohereText 衬线标题 Unica77 无衬线正文的双字体系统以及克制的色彩只在交互时刻出现的设计纪律。读完本文你将掌握该设计系统的完整 Token 语义、组件规范、间距/圆角/层级体系以及可直接复制的 Agent 提示词模板。1. 设计主题与整体氛围为企业 AI 打造的指挥台Cohere 设计系统在 OpenDesign 中被归类为AI LLM品类见 manifest.json 的category: AI LLM它的视觉气质被定义为打磨精致的企业指挥台enterprise command deck——自信、整洁让 AI 看起来像严肃的基础设施而非消费级玩具。整个体验建立在一块明亮的白色画布上内容被组织进大圆角22px卡片中形成一种有机的、云朵般的容器语言。这是一套面向 CTO 与企业架构师的界面专业但不冷漠精致但不令人生畏。设计语言通过双字体系统连接两个世界CohereText自定义展示衬线字体display serif配合紧凑的字距tracking让标题获得技术宣言般的庄重感Unica77 Cohere Web几何风格的无衬线字体以瑞士式的精确处理全部正文与 UI 文本。这对 serif/sans 组合塑造出自信的权威遇见工程化的清晰这一人格恰好映射一个企业 AI 平台的定位。色彩被使用到极致克制界面几乎完全由黑白构成配以冷灰色边框#d9d9dd、#e5e7eb紫罗兰色只出现在摄影级 hero 色带、渐变区块以及一个承担交互信号的蓝色#1863dc——它只在 hover 与 focus 状态出现。这种克制意味着当色彩真正出现时产品截图、企业摄影、深紫色区块它会携带最大的视觉权重。核心特征清单规范文档 §1 的关键特性明亮白色画布 冷灰容器边框22px 签名圆角——独特的Cohere 卡片圆润度双自定义字体CohereText展示衬线 Unica77正文无衬线企业级色彩克制黑、白、冷灰点缀极少的紫蓝深紫/紫罗兰 hero 区块制造戏剧性对比Ghost/透明按钮 hover 时变蓝展示多样化真实应用场景的企业摄影CohereMono 用于代码与技术标签配合大写变换在仓库中这套主题被编码进了 tokens.css 顶部的注释块中作为关键品牌决策声明例如 22px border-radius is THE Cohere visual signature、Interaction Blue (#1863dc) only on hover/focus — never ambient与规范文档逐条对应。2. 色彩体系与角色分工规范文档DESIGN-vi.md §2给出了完整的色彩角色表仓库的 tokens.css 将其逐一映射为 CSS 变量2.1 主色Primary颜色色值CSS Token用途Cohere Black#000000--fg主标题文本、最高强调元素Near Black#212121--fg-2标准正文链接色——比纯黑略柔和Deep Dark#17171c——带蓝调的近黑用于导航与暗色区块文本2.2 次色与强调Secondary Accent颜色色值CSS Token用途Interaction Blue#1863dc--accent唯一的有彩色动作色按钮 hover、focus 状态、active 链接Ring Blue#4c6ee650% 透明度——Tailwind ring键盘 focus 指示Focus Purple#9b60aa——输入框 focus 边框——一支柔和的紫罗兰在 tokens.css 中--accent的语义被进一步扩展为完整的状态族--accent-hover用color-mix(in oklab, var(--accent), black 8%)派生、--accent-active用color-mix(in oklab, var(--accent), black 16%)派生--accent-on: #ffffff指定强调色上的文本色。这正是交互蓝只属于交互时刻纪律的可执行表达。2.3 表面与背景Surface Background颜色色值CSS Token用途Pure White#ffffff--bg主页面背景与卡片表面Snow#fafafa--surface细微的抬升表面、浅色区块背景Lightest Gray#f2f2f2--border-soft卡片边框与最柔和的容器线值得注意的细节--surface-warm暖色表面槽位被直接别名为var(--surface)并注释 no warm tier — palette is strictly cool-toned。这体现了 OpenDesign Token Schema 的B-slot 别名机制见 design-systems/_schema/AGENTS.md品牌对某个层级没有独立主张时用var(--sibling)别名折叠即可通过契约校验同时保留了未来独立赋值的扩展位。2.4 中性色与文本Neutrals Text颜色色值CSS Token用途Muted Slate#93939f--muted弱化的 footer 链接、三级文本——带蓝紫调的冷灰Border Cool#d9d9dd--border标准区块与列表项边框——冷调微紫灰Border Light#e5e7eb——更浅的边框变体——Tailwind 标准 gray-2002.5 渐变系统Gradient System紫罗兰 Hero 色带深紫渐变区块在白色画布上制造戏剧性对比以全宽色带的形式承载产品截图与核心信息。深色 Footer 渐变页面经深紫/炭黑过渡到黑色 footer形成黄昏dusk效果。规范文档还补充了系统语义色--success: #16a34a、--warn: #eab308、--danger: #ef4444见 tokens.css注释明确reserved for state, not decoration——语义色只用于状态表达不用于装饰。3. 字体系统与排版层级3.1 字体族角色字体回退栈来自 tokens.cssDisplayCohereTextCohereText, Space Grotesk, Inter, ui-sans-serif, sans-serifBody / UIUnica77 Cohere WebUnica77 Cohere Web, Inter, Arial, ui-sans-serif, sans-serifCodeCohereMonoCohereMono, JetBrains Mono, ui-monospace, monospaceIconCohereIconDefault自定义图标字体3.2 完整排版层级表规范文档 §3与 tokens.css 类型刻度一一对应角色字体字号字重行高字距对应 Token备注Display / HeroCohereText72px (4.5rem)4001.00紧-1.44px--text-4xl/--leading-tight最大冲击力衬线权威Display SecondaryCohereText60px (3.75rem)4001.00紧-1.2px--text-3xl大型区块标题Section HeadingUnica7748px (3rem)4001.20紧-0.48px——功能区块标题Sub-headingUnica7732px (2rem)4001.20紧-0.32px--text-2xl卡片标题、功能名Feature TitleUnica7724px (1.5rem)4001.30normal--text-xl更小的区块标题Body LargeUnica7718px (1.13rem)4001.40normal--text-lg引导段Body / ButtonUnica7716px (1rem)4001.50normal--text-base/--leading-body标准正文、按钮文本Button MediumUnica7714px (0.88rem)5001.71松normal--text-sm小按钮、强调标签CaptionUnica7714px (0.88rem)4001.40normal--text-sm元数据、描述Uppercase LabelUnica77 / CohereMono14px (0.88rem)4001.400.28px--text-sm大写区块标签SmallUnica7712px (0.75rem)4001.40normal--text-xs最小文本、footer 链接Code MicroCohereMono8px (0.5rem)4001.400.16px——超小大写代码标签3.3 排版原则Serif 用于宣言Sans 用于功能CohereText 在展示尺度承载品牌嗓音——衬线字脚serif terminals让标题拥有已发表研究般的权威感Unica77 以瑞士几何的中立性处理一切功能性文本。大尺度负字距CohereText 在 60–72px 使用 -1.2px 到 -1.44px 的字距形成致密、有冲击力的文字块。tokens.css 中用--tracking-display: -0.02em表达约等于 72px 时的 -1.44px。单一正文字重几乎全部 Unica77 使用 400 字重500 只出现在小按钮强调中。系统依赖字号与间距而非字重对比来建立层级。大写代码标签CohereMono 使用大写 正字距0.16–0.28px处理技术标签与区块标记建立结构化、技术化的信息层级。4. 组件样式规范4.1 按钮Ghost / 透明按钮默认交互风格背景透明rgba(255, 255, 255, 0)文本Cohere Black#000000无可见边框Hover文本切换为 Interaction Blue#1863dc透明度 0.8FocusInteraction Blue 实心 2px outline设计意图在交互之前不可见——invisible until interacted with在 components.html 的实现中ghost 按钮被编码为background: transparent配合 tokens.css 的--focus-ring: 0 0 0 2px var(--accent)实现 focus 语义而.btn-primary则采用background: var(--fg)、hover 变var(--fg-2)的深色实心按钮border-radius: var(--radius-pill)呈药丸形。深色实心按钮深/黑背景 Pure White 文本用于亮色表面上的 CTA药丸形或标准圆角。描边按钮基于边框的容器用于次要动作。4.2 卡片与容器背景Pure White#ffffff边框Lightest Gray1px solid #f2f2f2对应--border-soft用于细腻卡片Cool Border#d9d9dd对应--border用于强调卡片圆角22px——主卡片、图片、对话框容器的 Cohere 签名圆角小元素使用 4px、8px、16px、20px阴影最小化——Cohere 依赖背景色与边框而非阴影特殊0px 0px 22px 22px仅底部圆角用于区块容器对话框modal/dialog 使用 8px 圆角components.html 中卡片被实现为border-radius: var(--radius-md)并注明 22px — THE Cohere signaturecomponents.html连元信息卡也复用 22px 圆角L245。tokens.css 中--radius-md: 22px与--radius-lg: 22px被刻意设为同一值注释明确 PRIMARY SIGNATURE — every main card and container。4.3 输入框与表单文本深色输入上白字浅色上黑字Focus 边框Focus Purple#9b60aa1px solidFocus 阴影红色 ringrgb(179, 0, 0) 0px 0px 0px 2px——可能用于错误状态指示Focus outlineInteraction Blue 实心 2px4.4 导航白底或深底上的简洁横向导航LogoCohere wordmark自定义 SVG链接深色文本16px Unica77CTA深色实心按钮移动端折叠为汉堡菜单4.5 图像处理主题与场景多元的企业摄影用于戏剧性区块的紫色调 hero 摄影深色表面上的产品 UI 截图与卡片系统一致的 22px 圆角图像全出血紫色渐变区块4.6 特色组件22px 卡片系统22px 圆角是 Cohere 的视觉签名所有主卡片、图片与容器统一使用创造出区别于常规 8–12px 圆角的云朵般有机柔软感。在 OpenDesign 的组件清单 components.manifest.json 中fixture 被描述为 Enterprise command deck: 22px signature card radius, CohereText serif display, ghost buttons与规范一一对应。企业信任条Enterprise Trust Bar公司 Logo 排列在横向色带中以干净的单色处理证明企业级采用。紫色 Hero 色带全宽深紫区块承载产品 showcase在白色页面流中制造戏剧性视觉断点产品截图悬浮于紫色环境内。大写代码标签CohereMono 大写 字距用作区块标记与分类标签构建技术化、结构化的信息层级。5. 布局原则间距、网格与留白哲学5.1 间距系统基础单位8px刻度2px、6px、8px、10px、12px、16px、20px、22px、24px、28px、32px、36px、40px、56px、60px按钮内边距随变体变化卡片内边距约 24–32pxtokens.css 对应--space-6: 24px、--space-8: 32px区块纵向间距宽松区块间 56–60pxtokens.css 将纵向节奏细化为响应式三档--section-y-desktop: 60px、--section-y-tablet: 48px、--section-y-phone: 32px这正是规范文档区块间 56–60px在企业大屏、平板、手机三端的可执行版本。5.2 网格与容器容器最大宽度最大可达 2560px极宽并响应式缩放——tokens.css 落地的工程化默认值为--container-max: 1440px并配套--container-gutter-desktop: 32px/--container-gutter-tablet: 24px/--container-gutter-phone: 16px三档 gutterHero居中 戏剧性排版功能区块多列卡片网格企业区块全宽紫色色带检测到 26 个 breakpoint——极其细粒度的响应式系统5.3 留白哲学企业级清晰每个区块只呈现一个明确的命题区块间留有呼吸空间。摄影即主角大型摄影区块提供视觉趣味无需装饰性设计元素。卡片分组相关内容被组织进 22px 圆角卡片形成自然的信息簇。5.4 圆角标尺Border Radius Scale档位值用途TokenSharp4px导航元素、小标签、分页——Comfortable8px对话框、次级容器、小卡片--radius-smGenerous16px重点容器、中等卡片——Large20px大型功能卡片——Signature22px主卡片、hero 图像、主容器——THE Cohere 圆角--radius-md/--radius-lgPill9999px按钮、标签、状态指示--radius-pill6. 深度与抬升几乎无阴影的层级哲学层级处理方式用途FlatLevel 0无阴影、无边框页面背景、文本块BorderedLevel 11px solid #f2f2f2或#d9d9dd标准卡片、列表分隔Purple BandLevel 2全宽深紫背景Hero 区块、功能 showcase阴影哲学Cohere 几乎完全不用阴影。深度通过背景色对比紫色带上的白卡、Snow 上的白色表面、边框容器冷灰边框以及明暗区块的戏剧性交替传达。当元素需要抬升时靠暗底上的白而非投影实现。tokens.css 的抬升 Token 忠实执行了这一哲学--elev-flat: none、--elev-ring: 0 0 0 1px var(--border-soft)1px 环形边框、--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.06)仅 hover 时的极轻阴影。对比其他品牌的阴影体系Cohere 的阴影强度处于最低档位这正是企业级克制的体现。7. 该做与不该做Dos and Donts该做Do所有主卡片与容器使用22px 圆角——这是视觉签名CohereText 用于展示标题72px、60px配合负字距所有正文与 UI 文本使用 Unica77字重 400保持黑白配色 冷灰边框Interaction Blue#1863dc只用于 hover/focus 交互状态深紫区块用于戏剧性视觉断点与产品 showcaseCohereMono 应用大写 字距制作区块标签维持主题多元的企业级摄影不该做Dont主卡片不要使用 22px 以外的圆角——签名圆角很重要不要引入暖色——调色板严格限定冷调不要使用重阴影——深度来自色彩对比与边框正文不要用粗体700——400–500 是安全区间不要跳过 serif/sans 层级——标题 CohereText、正文 Unica77不要把紫色用作卡片表面色——紫色只保留给全宽区块不要把区块间距压缩到 40px 以下——企业布局需要呼吸空间按钮默认不要加装饰——ghost/透明是基础状态8. 响应式行为8.1 Breakpoint 体系名称宽度主要变化Small Mobile425px紧凑布局、最小间距Mobile425–640px单列、卡片堆叠Large Mobile640–768px小幅间距调整Tablet768–1024px2 列网格开始Desktop1024–1440px完整多列布局Large Desktop1440–2560px容器最大宽度检测到 26 个 breakpoint——数据集中响应式最细粒度的站点之一。tokens.css 的注释补充说明26-breakpoint 体系由组件侧处理Token 层只给出容器宽度与 gutter。8.2 触控目标按钮尺寸足够触控交互导航链接间距舒适卡片表面本身即触控目标8.3 折叠策略导航完整导航折叠为汉堡菜单功能网格多列 → 2 列 → 单列Hero 文本72px → 48px → 32px 逐级缩放紫色区块保持全宽内容堆叠卡片网格3 → 2 → 1 列8.4 图像行为摄影在 22px 圆角容器内等比缩放产品截图保持宽高比紫色区块按比例缩放背景9. Agent 提示词指南可直接复用9.1 快速色彩参考主文本Cohere Black (#000000)页面背景Pure White (#ffffff)次级文本Near Black (#212121)Hover 强调Interaction Blue (#1863dc)弱化文本Muted Slate (#93939f)卡片边框Lightest Gray (#f2f2f2)区块边框Border Cool (#d9d9dd)9.2 组件提示词示例Create a hero section on Pure White (#ffffff) with CohereText at 72px weight 400, line-height 1.0, letter-spacing -1.44px. Cohere Black text. Subtitle in Unica77 at 18px weight 400, line-height 1.4.Design a feature card with 22px border-radius, 1px solid Lightest Gray (#f2f2f2) border on white. Title in Unica77 at 32px, letter-spacing -0.32px. Body in Unica77 at 16px, Muted Slate (#93939f).Build a ghost button: transparent background, Cohere Black text in Unica77 at 16px. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline.Create a deep purple full-width section with white text. CohereText at 60px for the heading. Product screenshot floats within using 22px border-radius.Design a section label using CohereMono at 14px, uppercase, letter-spacing 0.28px. Muted Slate (#93939f) text.9.3 迭代指南一次只聚焦一个组件主卡片永远使用 22px 圆角——the Cohere card roundness明确指定字体——标题 CohereText、正文 Unica77、标签 CohereMono交互元素只在 hover 时使用 Interaction Blue#1863dc表面保持白色 冷灰边框——无暖色调紫色只用于全宽区块绝不用于卡片背景10. 仓库中的工程化落地从规范文档到可消费的 Token 包Cohere 在 OpenDesign 中不止是一份设计散文而是一个完整的、机器可校验的设计系统项目包Design System Project package。其目录结构如下design-systems/cohere/ ├── DESIGN.md # 规范正文DESIGN-vi.md 是其越南语译本 ├── DESIGN-vi.md # 本文依据的越南语规范文档 ├── manifest.json # 机器可读的项目清单schemaVersion: od-design-system-project/v1 ├── tokens.css # 权威编译后的 Token56 个声明 ├── design-tokens.json # 由 tokens.css token-contract.report.json 派生的 JSON Token ├── tailwind-v4.css # 由 tokens.css 派生的 Tailwind v4 theme ├── components.html # 独立组件夹具48 个选择器、25 个类 ├── components.manifest.json # 可重建的组件清单缓存 ├── USAGE.md # Agent 使用指南 ├── preview/ # colors / typography / spacing 三个静态预览页 ├── source/ # 导入证据evidence.md、tokens.source.json、token-contract.report.json └── system/ # kit.html / kit.dark.html / tokens.default.json 等系统化产物关键工程细节manifest.json 声明了importMode: normalizedcraft 字段建议应用color与accessibility-baseline两条工艺基线preview 目录暴露三个静态预览页供 Agent 做视觉校验。source/token-contract.report.json 给出了可审计的契约报告56 个 Token 全部声明、全部有源可溯其中 A1-identity 8 个、A1-structure 18 个、B-slot 4 个、A2 26 个契约分数 100、评级 excellent。这印证了 design-systems/_schema/AGENTS.md 描述的四层 Token 契约A1 品牌决定、A2 品牌带 fallback、B-slot 别名折叠、C 扩展在 Cohere 品牌上的完整执行。USAGE.md 给出了 Agent 的消费顺序先读 USAGE → 再读 DESIGN.md → 把tokens.css粘贴进第一个 artifact 的style块 → 用 components.manifest.json 做组件清单 → 必要时打开 preview/ 做视觉检查。system/tokens.default.json 是系统化精简视图colorPrimary: #1863dc、borderRadius: 22、fontSize: 16浓缩了该品牌的三个核心决策。11. 总结Cohere 设计系统的核心心智模型还原 Cohere 风格界面的关键在于记住四条纪律它们贯穿了规范文档的每一个章节也被 tokens.css 逐条编码签名圆角 22px所有主卡片与容器统一使用绝不妥协双字体分工CohereText 负责宣言级标题负字距、字重 400Unica77 负责全部功能文本CohereMono 负责大写技术标签色彩克制黑、白、冷灰是全部底子Interaction Blue#1863dc只出现在交互瞬间深紫色块只用于全宽视觉断点无阴影层级深度靠背景色对比、冷灰边框与明暗交替传达而不是投影。当你需要在 OpenDesign 中为一个企业 AI 产品生成自信、专业、克制的界面时直接复用 design-systems/cohere/ 包将 tokens.css 注入style按 components.html 的夹具组织组件再按上文 §9 的提示词模板驱动 Agent 逐组件迭代即可。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】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 中的 Cohere 设计系统规范企业级 AI 平台的双重字体与 22px 签名圆角实战指南OpenDesign 中的 Cohere 设计系统规范企业级 AI 平台的双重字体与 22px 签名圆角实战指南 本文以 OpenDesign 仓库内置的 CAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Cohere 风格企业级 AI 设计系统22px 签名圆角、双字体体系与 Agent 可消费的设计规范全解OpenDesign 中的 Cohere 风格企业级 AI 设计系统22px 签名圆角、双字体体系与 Agent 可消费的设计规范全解 本文以 OpenDesAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Cohere 设计系统实战指南从 22px 签名圆角到企业级 AI 平台的设计语言OpenDesign Cohere 设计系统实战指南从 22px 签名圆角到企业级 AI 平台的设计语言 本文基于 OpenDesign 仓库内置的 CoheAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考