OKLch 色彩科学
全部颜色以 OKLch 定义,确保跨设备的感知均匀与色准,亮度阶梯可预测,深浅模式无缝映射。
暖白纸色基底,橄榄绿强调。基于 OKLch 色彩与设计令牌构建,框架无关、暗色就绪、中英文混排优化——并附带可直接复制给任意 Agent 的提示词与 Skill。
适配任何现代媒体平台
每一个视觉决策都被沉淀为令牌与语义化的 class,让设计意图在任何平台、任何协作者(包括 AI)之间无损传递。
全部颜色以 OKLch 定义,确保跨设备的感知均匀与色准,亮度阶梯可预测,深浅模式无缝映射。
200+ CSS 自定义属性覆盖色彩、字体、间距、圆角、阴影、动效与层级。改一个变量,全局即时更新。
衬线 Display + 无衬线 Body 的经典搭配,针对中英文混排的字距、行高与标点做了专门优化。
完整的暗色令牌覆盖,暖灰基底而非纯黑,强调色自动亮化。支持系统偏好与本地持久化。
没有构建工具、没有运行时依赖。一份 CSS 即可用于任意技术栈、邮件、PDF 与设计工具。
统一的时长与缓动令牌、滚动揭示、SVG 描边与微交互,并完整尊重 prefers-reduced-motion。
对比度满足 WCAG AA,焦点可见、语义化标签、键盘可达——开箱即合规。
把整套规范浓缩为可复制的系统提示词与 Skill。任何 Agent 读取后即可产出符合规范的代码与文档。
无需安装、无需训练。把提示词粘贴给 ChatGPT、Claude、Cursor、Kiro 或任意编码助手,它就会用 CGArtLab 的令牌、组件与排版规范,输出风格统一的界面、文档与素材。
从「提示词」页一键复制系统提示词或精简版。
作为系统/项目指令,或对话开场白发送。
组件、落地页、文档、邮件——皆遵循规范。
你是 CGArtLab 设计系统的执行者。所有输出严格遵循: · 风格:编辑主义 × 橄榄绿,暖白纸色基底,克制留白。 · 颜色:一律用 OKLch。强调色 --ds-accent = oklch(52% 0.08 115); 背景 oklch(97% 0.012 80);正文 oklch(20% 0.02 60)。 · 字体:标题用衬线(Iowan/Charter/Georgia),正文/UI 用无衬线, 代码用等宽(JetBrains Mono)。中英混排开启字距优化。 · 间距:4px 基准比例(4/8/12/16/24/32…)。圆角核心 8–16px。 · 令牌优先:用 var(--ds-*) 变量,禁止硬编码魔法数字。 · 组件 class:ds-btn / ds-card / ds-badge,变体用 ds-btn--primary。 · 暗色:用 [data-theme="dark"],基底用暖灰而非纯黑。 · 可访问性:对比度达 WCAG AA,焦点可见,语义化标签。 收到后,请用上述规范产出我接下来要求的内容。
每个模块都在视觉手册中以 live 形式展示,并在使用文档中配有代码与规范说明。
这些页面与文档完全基于 CGArtLab 设计系统构建——是规范最好的证明。