使用CSS变量在:root中统一管理HEX颜色值是最轻量可控的落地方式，需按语义分层命名、集中定义、预留主题切换能力，并配合设计标注与前端校验闭环执行。
直接用 CSS 变量（:root 中定义）统一管理 HEX 颜色值，是落地颜色规范最轻量、最可控的方式。核心不是“能不能用”，而是“怎么定义才不翻车”——既要覆盖设计系统常见需求，又要兼顾开发可维护性与主题切换潜力。
颜色变量按语义分层命名，不按视觉值
避免写 --color-ff6b35 或 --color-orange-500 这类强耦合具体值或设计工具层级的命名。应聚焦用途：
-
基础色板：如
--color-primary、--color-success、--color-warning—— 对应按钮主色、操作成功、警示等业务含义 -
中性色系：如
--color-text-primary、--color-bg-surface、--color-border-divider—— 描述使用场景，而非“黑/灰/白” -
状态色：如
--color-state-hover、--color-state-disabled—— 明确是交互反馈，不是独立色卡
HEX 值统一收口在 :root，禁止散落在组件里
所有 HEX 定义只出现在全局根作用域，例如：
:root {
--color-primary: #4a6fa5;
--color-primary-hover: #3a5a8c;
--color-text-primary: #212121;
--color-bg-surface: #ffffff;
--color-border-divider: #e0e0e0;
}
组件样式中只用变量，例如：background-color: var(--color-primary);。这样换主题时只需覆盖 :root，无需搜索全项目 HEX。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
预留浅色/深色主题切换能力，即使当前只做一套
用 @media (prefers-color-scheme: dark) 或自定义 class 控制变量重写，提前留好扩展位：
:root {
--color-bg-surface: #ffffff;
--color-text-primary: #212121;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg-surface: #121212;
--color-text-primary: #e0e0e0;
}
}
不强求立刻实现暗色模式，但变量结构和命名要支持它——比如不用 --color-white 而用 --color-bg-surface。
配合设计稿标注与前端校验，闭环落地
设计师输出规范时，同步提供变量名与 HEX 对照表；前端可借助工具（如 Stylelint 插件或简单脚本）扫描 CSS 文件，报错提示 “检测到未声明的 HEX 值 #ff5722”，倒逼变量使用习惯。
