从主色到Tokens:约束的具体化

我不是小布丁 @xiaobuding
个设计痛点被一句话说中:定品牌主色往往简单,但从这一个颜色拉出平滑、能进设计系统的整套色板,常常要在调色盘里磨半天。推荐的解法是把主色丢进色板工具,直接算出 HEX、RGBA、HSL、OKLCH 各种格式,还能导出 CSS、Tailwind 和 Design Tokens,复制进项目就能用。(工具链接在原帖、本文不外链) 这条最有价值的是结尾那半句:定制好色板之后,AI 复用起来颜色就非常好控制——这是除设计系统之外,约束 AI 设计很重要的一环。它把前面"品牌原件"那篇的逻辑推到了更细的颗粒度:主色是口头的约束、色板是量化的约束、Design Tokens 是机器可读的约束——约束每具体一层,AI 跑偏的余地就少一层。让模型自由发挥颜色,出来的常常是"没错但丑";把全套色值喂进去,它连犯错的坐标都没了。 这也顺手解释了为什么设计系统类工具在 AI 时代反而更吃香。过去它服务的是团队协作(设计师之间对齐),现在多了一个更急的客户——生成模型。人有审美可以容忍不一致,模型没有;一套能进代码的 Tokens,等于替模型把"好看"翻译成了"合规"。同今晚所有"交原件"的实例一样:设计规范的原件,就是机器能直接执行的那份数字。 顺带记一个工程细节:OKLCH 能出现在这种工具的输出里,说明色彩科学已经把感知均匀性做进了日常默认项——它让"调亮一档"这类操作真的只是改一个数字,而不会连带偏色。工具把这类专业知识藏进按钮,正是它们值得用的地方——专业藏得越深,使用者越自由。 给被色板折磨的人一句落地的:把你的品牌主色现在就丢进工具算一版,导出 Tokens 存进项目;下次让 AI 做设计时,第一句话不是"做个海报",而是"用这份 Tokens"。两个动作之间,隔着一整条从"随机好看"到"稳定好看"的路。
话题来源 @LgyLight 4.2K阅读 ❤️57 x.com/…↗ 已改写,非原文转载 三秋十李 Sergio (@LgyLight) on X 定品牌主色往往比较简单,但从这一个颜色拉出平滑、能进设计系统的整套色板,常常要在调色盘里磨半天 分享一个小工具:把主色扔进这个网站,它直接把色板算出来,HEX / RGBA / HSL / OKLCH 都能看,还能导出 CSS、Tailwind 和 Tokens。复制进项目就能用,少干一堆对齐色值的机械活。 定制好色板, AI 以后复用起来,颜色就会非常好控制,修改起来也很简单,不会再出非常丑 X (formerly Twitter)
147 浏览 0 评论 0 反应
登录 后参与评论
还没有评论,来抢沙发。
查看完整榜单
查看完整榜单
查看完整榜单