跳至主要内容
v1.1 · 开源设计系统 · 200+ 设计令牌

为人与 AI 而生的
编辑主义设计系统

暖白纸色基底,橄榄绿强调。基于 OKLch 色彩与设计令牌构建,框架无关、暗色就绪、中英文混排优化——并附带可直接复制给任意 Agent 的提示词与 Skill。

OKLch · 暗色模式 · WCAG AA · HTML / React / Vue / Svelte / Email / PDF

适配任何现代媒体平台

原生 HTML / CSS React / Vue / Svelte Astro / 静态站点 邮件 / 富文本 PDF / 打印 Penpot / Figma 暗色模式
200+设计令牌
25核心组件
100UI 图标
0构建依赖
为什么选择它

克制、温暖、可被复制的系统

每一个视觉决策都被沉淀为令牌与语义化的 class,让设计意图在任何平台、任何协作者(包括 AI)之间无损传递。

OKLch 色彩科学

全部颜色以 OKLch 定义,确保跨设备的感知均匀与色准,亮度阶梯可预测,深浅模式无缝映射。

令牌驱动

200+ CSS 自定义属性覆盖色彩、字体、间距、圆角、阴影、动效与层级。改一个变量,全局即时更新。

编辑主义排版

衬线 Display + 无衬线 Body 的经典搭配,针对中英文混排的字距、行高与标点做了专门优化。

暗色模式

完整的暗色令牌覆盖,暖灰基底而非纯黑,强调色自动亮化。支持系统偏好与本地持久化。

框架无关

没有构建工具、没有运行时依赖。一份 CSS 即可用于任意技术栈、邮件、PDF 与设计工具。

动效系统

统一的时长与缓动令牌、滚动揭示、SVG 描边与微交互,并完整尊重 prefers-reduced-motion

可访问性

对比度满足 WCAG AA,焦点可见、语义化标签、键盘可达——开箱即合规。

AI 就绪

把整套规范浓缩为可复制的系统提示词与 Skill。任何 Agent 读取后即可产出符合规范的代码与文档。

复制一段提示词,即刻对齐

让任何 Agent
说同一种设计语言

无需安装、无需训练。把提示词粘贴给 ChatGPT、Claude、Cursor、Kiro 或任意编码助手,它就会用 CGArtLab 的令牌、组件与排版规范,输出风格统一的界面、文档与素材。

1

复制提示词

从「提示词」页一键复制系统提示词或精简版。

2

粘贴给 Agent

作为系统/项目指令,或对话开场白发送。

3

获得合规产出

组件、落地页、文档、邮件——皆遵循规范。

查看全部提示词与 Skill
精简提示词 · Quick Prompt
你是 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,焦点可见,语义化标签。

收到后,请用上述规范产出我接下来要求的内容。
约 230 字 · 适合对话开场需要完整版?→
系统组成

从令牌到组件,一应俱全

每个模块都在视觉手册中以 live 形式展示,并在使用文档中配有代码与规范说明。

真实示例

用系统本身构建的页面

这些页面与文档完全基于 CGArtLab 设计系统构建——是规范最好的证明。

开始使用

把一致与优雅,变成默认值

浏览手册了解全貌,复制提示词武装你的 Agent,或直接下载令牌与素材开始构建。