AI生成设计系统：颜色、字体与组件库

可视化演示

展示AI生成设计系统三大核心：色彩生成（关键词→语义映射→HSL和谐→四色体系×五级渐变20个Token+WCAG AA+校验）、字体与设计Token(1.25比例模块化字阶xs-xl+统一Token变量设计开发共享)、主题切换与一致性（Light/Dark双主题CSS变量切换+4组件×2主题8组Token自动校验一致性100%）,三模式切换理解设计系统全貌。

设计系统概览

老周的第一版装修方案，是每个区域单独下单：吧台选复古绿，座位区选雾霾蓝，外带区选了明黄。单品各有各的好看，可推门进去却像误入了三家店的拼盘。师傅说，装修不是买齐单品，而是先定规则——什么颜色打底、什么字体做门头、什么高度的桌椅搭配。这才有了「整店方案」。

设计系统的本质，就是数字产品世界的「整店方案」。它把颜色、字体、组件库这些可复用资产，连同「怎么用它们」的规则一起沉淀下来。组件是看得见的家具，设计 Token 是看不见的施工标准——杯子的直径、墙漆的色号、菜单的字号，都先定义成变量，再被各处引用。

AI 的介入，让这份方案从「人工梳理」变成「自动生成」。你只需给出品牌关键词，AI 就能产出候选色板、字阶与组件骨架；人负责选型与审核。衡量一套设计系统成熟度，常看「组件接入率」——有多少组件在真正使用 Token 而非写死数值：

有了整店方案，后面每一步都顺了。老周点点头：那就照这份图纸，让 AI 把颜色、字号、家具一件件「生成」出来给我们看看。

关键词到色板

老周对师傅说：我想要「温暖、治愈、燕麦拿铁」的感觉。师傅听懂了，可 AI 怎么听懂？它把每个词翻译成「颜色语义」：温暖靠近橙黄，治愈靠近柔和低饱和，燕麦拿铁靠近米色系——然后在色彩空间里为这些语义找到落点。

这条流水线的第一站是色板生成。先做关键词提取：从需求描述里捞出和色彩强相关的词；再做语义映射：把这些词与已知色相家族的语义进行比对，选出最近的「色相锚点」；最后做色阶插值：在锚点与明度两端之间均匀地插出一整条刻度，得到 9 档语义色板。

比如锚定主色相 30°（暖橙），从近白的奶油色（明度 95%）到深棕（明度 40%）插出 9 档。插值在颜色空间里逐通道进行，公式如下：

老周看着屏幕上从奶油白渐变到深咖啡的一排小方块，像极了菜单上从拿铁到浓缩的色阶图——他忽然明白，AI 不是在「找颜色」，而是在「养一条颜色光谱」。

字阶与Token

菜单上，店名、分类标题、饮品名、价格、注释，字号不能随手调。老周发现师傅给出的字号表是有规律的：每个级别都按同一比例放大，像台阶一样整齐。这就是「模块化字阶」。

字阶公式：基准字号 $f_0$（正文 14px），配比 $r$（如 1.25），第 $n$ 级字号就是 $f_0$ 乘以 $r$ 的 $n$ 次方。这样无论标题、正文还是注释怎么组合，视觉层级始终和谐：

光有字号还不够，所有设计决策都要沉淀为「设计 Token」——一种带语义名字的变量：--brand-5 表示品牌色第 5 档，--font-3 表示第 3 级字号，--space-4 表示 4px 网格上的第 4 档间距。Token 分色彩、字体、间距、圆角、阴影等类别，命名规范是「类别-含义-序号」，间距刻度则遵循 4px 基准网格制。

老周看着这份字号刻度表，就像看着咖啡杯从小杯到超大杯整整齐齐排成一列——每一级只多一点点，却始终是一家人。

组件库生成

师傅建议老周：杯子、托盘、桌椅都别定做，选「标准件」。标准件便宜、耐换、坏了随时补。设计系统里，组件库就是这些标准件：按钮、卡片、输入框、弹窗，全部由可复用的标准件构成。

组件怎么生成？三步走。组件拆解：把一个组件拆成结构骨架（容器、标题、内容、操作区）与状态（默认、悬停、禁用）；属性规范：用 Token 填充各部分——背景用 --brand-5、文字用 --font-3、圆角用 --radius-2；代码生成：AI 按模板输出组件代码，保证任何页面引用的都是同一套取值。

组件的间距与圆角同样来自刻度，常用 4px 基准网格：间距随索引线性增长，所有尺寸都是 4 的整数倍，页面在任何屏幕上都对得齐：

老周的咖啡馆里，吧台、外带区、二楼座位用着同一批杯子，只是不同分区搭配不同颜色的杯垫——组件是标准件，Token 是杯垫，换杯垫就能换氛围。

一致性校验

装修完工，老周请来监理：墙漆色号对不对？灯光下菜单字清不清楚？门头、杯子、外卖袋上的 logo 颜色一不一样？这场「验收」，在设计系统里叫一致性校验。

校验分三关。Token 检查：扫描代码里有没有绕过 Token、直接写死的色值字号；对比度校验：计算文字与背景的对比度是否达到 WCAG AA 标准（正文至少 4.5:1）；视觉回归：对改版前后的页面截图做像素级比对，差异超阈值就报警并生成差异报告。

对比度公式：取两个颜色的相对亮度 $L_1$、$L_2$，各加 0.05（防止纯黑纯白除零），用较亮值除以较暗值：

监理在验收单上画勾：色号准、字迹清、logo 统一。老周舒了口气——AI 不是把活干完就撒手，而是陪着把每一处细节都验收到位。

主题切换

冬天，老周给咖啡馆换了整套软装：暖橙灯罩、厚绒椅垫、深色桌布。他没敲一堵墙，也没换一件家具。这套「换软装」的思路，就是主题切换。

实现机制是「一层变量、两套取值」：所有组件只引用 Token，不引用具体值；深浅两套主题各自维护一份 Token 映射——浅色主题下 --brand-5 是浅紫，深色主题下它是暗紫。切换时只需换掉这一层映射，整个应用的颜色、字阶、间距、阴影同步变化，这就是主题变量的切换机制，也支持跟随系统动态适配。

判断某个背景上该配深字还是浅字，需要知道颜色的「相对亮度」。相对亮度不是简单取 RGB 平均，而是按人眼敏感度加权：绿色权重最大，蓝色最小：

老周的咖啡馆换季只花一个下午：换杯垫、换灯罩、换桌布，其他全都照旧——这正是 Token 主题切换的魅力：换一套取值映射，就是一个全新的氛围。

设计开发协同

设计图定稿后，最怕施工队「自由发挥」：师傅凭手感调了墙漆比例，菜单字号换了字体，最后和图纸差了十万八千里。所以老周要求：设计师和施工队必须看同一份图纸。

在工程里，这份「图纸」就是 Token 仓库。设计师在 Figma 里改一个 --brand-5，代码仓库里的 CSS 变量同步更新，页面无需手工改动。AI 在这里扮演「传话员」：解析设计稿，自动生成或更新 Token 与组件代码，并把变更记录成版本——任何一边改了都能追溯，版本管理由此顺畅。

协同的核心目标叫「同源一致」：设计侧的取值与代码侧的取值之差必须为零：

老周看着设计师和施工队对着同一块屏幕改方案，感慨道：以前是两拨人传话，现在是 AI 牵着两头的线，谁动都能看见。这才是开连锁店该有的底气——第一家在哪开，第二家就照抄一份「温度」。

AI 应用场景

Python 演示

# 迷你版 AI 设计系统生成器：色板 -> 字阶 -> Token -> 组件 -> 校验class DesignSystemGenerator:    def __init__(self, hue=250):        self.primary_hue = hue        self.palette = {}        self.type_scale = []        self.tokens = {}     def hsl_to_rgb(self, h, s, l):        c = (1 - abs(2 * l - 1)) * s        x = c * (1 - abs((h / 60) % 2 - 1))        m = l - c / 2        if h < 60:            rgb = (c, x, 0)        elif h < 120:            rgb = (x, c, 0)        elif h < 180:            rgb = (0, c, x)        elif h < 240:            rgb = (0, x, c)        elif h < 300:            rgb = (x, 0, c)        else:            rgb = (c, 0, x)        return tuple(round((v + m) * 255) for v in rgb)     def generate_palette(self, steps=9):        # 从亮到暗生成同一色相下的 9 档色阶        for i in range(steps):            t = i / (steps - 1)            lightness = round(0.95 - t * 0.55, 2)            self.palette["brand-%d" % (i + 1)] = (self.primary_hue, 0.82, lightness)        return self.palette     def generate_type_scale(self, base=14, ratio=1.25, steps=6):        # 等比字阶：f_n = f_0 * r^n        self.type_scale = [round(base * ratio ** i, 1) for i in range(steps)]        return self.type_scale     def build_tokens(self):        # 把内部色值转成 CSS 可用的 Token 字符串        for name, (h, s, l) in self.palette.items():            self.tokens["color-" + name] = "hsl(%d, %d%%, %d%%)" % (h, s * 100, l * 100)        for i, size in enumerate(self.type_scale):            self.tokens["font-scale-%d" % (i + 1)] = "%spx" % size        return self.tokens     def luminance(self, h, s, l):        # 线性化 RGB 后按人眼敏感度加权        r, g, b = self.hsl_to_rgb(h, s, l)         def linear(v):            v = v / 255            return v / 12.92 if v <= 0.03928 else ((v + 0.055) / 1.055) ** 2.4         return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b)     def contrast_ratio(self, c1, c2):        l1 = self.luminance(*c1) + 0.05        l2 = self.luminance(*c2) + 0.05        return round(max(l1, l2) / min(l1, l2), 2)     def generate_component(self, name, bg_key, text_key):        # 组件不写死颜色，只引用 Token        return {"name": name, "background": self.tokens[bg_key], "text": self.tokens[text_key]}  if __name__ == "__main__":    gen = DesignSystemGenerator(hue=250)  # 品牌主色相取靛蓝    palette = gen.generate_palette()    scale = gen.generate_type_scale()    tokens = gen.build_tokens()    print("色阶首末:", palette["brand-1"], palette["brand-9"])    print("字阶:", scale)    button = gen.generate_component("button", "color-brand-5", "color-brand-9")    print("按钮组件:", button)    print("正文对比度:", gen.contrast_ratio((250, 0.82, 0.40), (250, 0.82, 0.95)))

1. self.palette["brand-%d" % (i + 1)] = (self.primary_hue, 0.82, lightness)固定色相与饱和度，只让明度线性变化，生成成体系的 9 档色阶
2. round(base * ratio ** i, 1)等比字阶公式 f_n = f_0 × r^n 的直接实现
3. "hsl(%d, %d%%, %d%%)" % (h, s * 100, l * 100)把内部色值格式化成 CSS 可用的 Token 字符串
4. def linear(v)对 RGB 做伽马线性化，还原物理亮度
5. 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b)按人眼敏感度加权求相对亮度
6. max(l1, l2) / min(l1, l2)对比度公式，始终用较亮值除以较暗值
7. generate_component` 返回 `{"background": ..., "text": ...}组件只引用 Token，不写死色值

常见误区

面试题