跳至主要内容
资源下载

下载

示例 PDF、设计令牌、样式表、品牌素材与提示词——全部为纯静态文件,可直接用于任意项目。

示例文档

真实 PDF 示例

以设计系统的令牌与色板生成的可下载 PDF,演示规范如何延伸到打印与文档场景。

PDF · 4 页

设计系统速查手册

封面 + 色彩令牌 + 字体比例 + 间距/圆角/阴影 + 组件 class 目录,一份可打印的参考卡。

PDF · 1 页

OKLch 色卡

橄榄绿 10 级色阶、强调色、中性与语义色的单页色卡,附每个令牌的 OKLch 取值。

HTML · 打印为 PDF

打印就绪模板

简历、A4 报告与博客长文页内置 @media print 规范,浏览器「打印 → 存为 PDF」即得规范文档。

核心资源

令牌、样式与提示词

把它们拷进项目即可开始;或交给 Agent 让其遵循规范产出。

JSON

tokens.json

结构化设计令牌:颜色、字体、间距、圆角。供程序化导入与构建工具消费。

CSS

styles.css

完整样式表::root 全部令牌 + 暗色模式 + 全部组件与动效。零依赖。

JS

scripts.js

渐进增强脚本:暗色切换、滚动揭示、复制按钮、标签页、图标渲染与令牌表。

Markdown

SKILL.md

Agent 技能包:放入工具的 skills 目录,让 AI 持久遵循设计系统。

Markdown

system-prompt.md

完整系统提示词,适合作为系统/项目级指令交给任意 Agent。

手册 · 100 图标

图标库

100 枚 1.5px 线性 SVG 图标,在视觉手册中点击任意图标即可下载单枚。

品牌资源

Logo 与标识

橄榄叶 / 光圈 monogram,矢量 SVG,浅底深底两套。

CGArtLab Design System 标准 Logo(深底)

标准锁版 · 深底

logo-on-dark.svg

真实示例

用系统构建的页面

这些页面本身严格遵循设计系统,是最佳的实战参考。