语义色的三层结构
收录 2026-10
把零散色值整理成基础色、语义色、组件色三层，换主题时只动中间层。
现在有 [42] 个散落的色值，主题要支持 [默认] 和 [品牌联名] 两套。请设计三层结构：基础色（命名到 [blue-500] 这种粒度）、语义色（surface、text-secondary、danger 之类）、组件色（button-primary-bg 之类）。给出每层的命名规则和三条引用链示例，说明联名主题切换时哪层要改、哪层完全不动。
本站原创
中文原文
使用示例
示例输入
现在有四十多个散落色值，主题要支持默认和品牌联名两套，帮我设计三层色彩结构。
输出应包含
- 三层命名规则与引用链示例
- 主题切换时哪层改哪层不动
- 说明组件色如何引用语义色
复制前替换这些占位符 4
把方括号里的内容换成你的具体信息，替换后再粘贴给 AI。
[42][默认][品牌联名][blue-500]
使用建议
组件里直接写色值是最常见的债，先禁掉再谈主题化。
可以这样改
- 把风格词换成可测参数：光位、焦段、材质、构图。
- 要求同一提示词出 3 个变体，再对比差异。
交付物（这次应拿到什么）
- 可直接执行的参数表（光线/镜头/材质/构图）
- 2–3 个备选方向，并说明各自取舍
常见错法
- 堆「高级感、电影感、8K」这类词，结果每次都不一样。
- 要真实品牌或明星的样子，得到近似但不可用的图。
输出验收（怎么判断能用）
- 参数可执行：能直接写进工具或交给设计执行。
- 有取舍说明：为什么这样布光/构图，而不是只给结果。
适用场景与注意
- 适合：把模糊的“高级感”拆成光线、材质、镜头、构图等可执行参数。
- 注意：涉及真实品牌、明星、他人作品时改用等价描述，避免侵权与不合规。