项目颜色职责体系：颜色组×角色×状态×模式

观点：只给 AI 一个主色值，它会在每个页面重新猜颜色用途；必须给一张”颜色组×角色×状态×模式”的完整约束表，AI 才能生成一致的界面。

项目定好主色后页面仍然乱，不是主色选错了，而是背景、文字、边框、反馈状态各自为政。解法分两步。第一步备齐颜色组：主色相关色（同一主色方向在不同位置、不同背景上的变体）、中性色（白黑灰±冷暖，提供基础界面的大部分颜色）、语义色（成功绿/警告黄橙/错误红/信息蓝，行业惯例必须沿用，不能让 AI 为追求个性更换）、次要强调色和数据色（只在真实需要时增加）。第二步把颜色组分配给职责：页面底色与内容表面用中性色建立明暗层级，主要操作和选中用主色相关色，错误提示用错误语义色；文字、图标、链接、边框、聚焦轮廓各归各位。再往上两层：交互状态（默认/悬停/按下/选中/聚焦/禁用）要让人看出变化又认得是同一组件，浅色深色模式职责不变但色值分别适配——深色模式不是把颜色简单反转，每种角色的明暗适配得单独设计。同一个颜色脱离背景无法判断可用性，所以约束表要写明前景背景组合，不能只列色值。

洞察：颜色体系的本质是把设计决策前置成约束文档。 这和写规则文件、写 skill 是同一件事——把人类脑子里的隐性判断显性化，AI 才不用猜。“能用但丑”大多数时候不是模型审美差，是约束没给够。另外两条边界同样可迁移：语义色是行业惯例不能私有化（约定俗成的含义是用户的免费认知资产），颜色不能独自承担含义（任何单一通道的信息都要有冗余备份）。

启示： 可以直接落成项目规则文件里的一节：列出五组颜色、六种职责、状态与双模式的适配规则，AI 按表生成。更一般地，任何”AI 做出来了但不对味”的领域，先检查自己是不是只给了”点”（一个主色、一句风格描述）而没给”关系”（谁和谁一组、谁不能借谁的色）。

提醒： 内容转述的是行业惯例，无一手数据支撑；只有一两个页面的小项目上完整体系是杀鸡用牛刀；数据可视化需要独立配色体系，别和业务色混用。还有一个容易踩的坑：主色本身接近红色时，普通操作和错误状态会撞色，得额外用文字、图标、层级手段区分，光靠色值拉不开。

---

📺 敲代码的小虾米，抖音，2026-09-28 · 原视频 · 库内 2026-09-28-VibeCoding术语：前端项目颜色 · 速览 速览/2026-09-28-前端项目颜色职责体系