AI 总把红色用错地方?你需要一张“颜色使用说明书“

📅 2026/7/29 17:41:52
AI 总把红色用错地方?你需要一张“颜色使用说明书“
定位Schema-As-Code 证据链的认知 合法性站B 列全景 背书覆盖主题行①的第一个关键设计——语义令牌表Semantic Token Table。回答凭什么成立语义令牌把这个红代表什么编码为离散、可查询、可校验的机器码本而非换名的色值别名。快速阅读方法论总纲与开源把设计规范写成代码格式是所有 AI 工具的上游约束方法论阶段一结构化诊断组件语义快照与模式诊断AI 生成界面的第一道检查阶段二语义契约化设计师作为语义翻译者 当AI生成界面时我怎么用规则锁住设计意图角色专题1:设计师与产品经理AI 界面语义走查指南一、调整前四个角色的真实反馈在没有语义令牌之前各角色在界面层看到的世界用他们自己的话说前端与 AI 工程师的真实反馈“致命错误和限流提示被渲染成了同一种红色背景条。”AI 生成工具里只有 Design Token——color.danger: { value: #EF4444 }。红色是一个色值不附带任何场景含义。同一款 AI 对话产品中对话可能已丢失的致命错误与请求太频繁请等 30 秒的限流提示长得一模一样色板合规、对比度达标视觉走查挑不出任何毛病但用户从界面上读不到两者的区别。设计师与产品经理的真实反馈“同一个 alert三个人三种理解每个人都没错。”组件库里的Alert只是视觉组件——圆角、图标位、关闭按钮。它不知道自己在交易确认场景里是阻断性语义在信息展示场景里是旁观性语义。前端理解为弹窗设计师指的是顶部通知条两个人都对因为没有任何注册表裁定。前端与 AI 工程师的另一条真实反馈“LLM 把 Critical 降级为’严重’代码里查不出来。”在 LLM 的词汇表里“Critical和严重是近义词。AI 生成告警时把 “Critical” 替换为严重”、把 “Data Loss Risk” 替换为请稍后重试——情绪权重在概率性输出中被随机降级而没有任何机制判定这是违规。DesignOps 与设计系统负责人的真实反馈“规范写在文档平台里人可能看漏AI 工具完全不可见。”错误状态分四级供人阅读机器查询不了更校验不了。汇总成一张表工具 / 环节界面层呈现状态缺失什么AI 生成工具只有色值与样式语义靠概率猜这个红代表什么的机器可读定义组件库组件只有视觉属性组件在不同场景下的语义身份文案生成同义词自由替换关键术语的权重锚定规范文档供人阅读机器可查询、可校验的注册表这四条反馈指向同一个根因语义没有被编码成机器可读的东西。红色只是色值组件只是容器术语只是字符串——机器拿不到语义就只能靠概率猜。二、把语义编码为离散令牌不是自创概念2025年7月arXiv上的MOSS论文提出Token Codebook——把语义概念锁进可查询的离散字典让概率生成不再自由浮动。这与我们的语义令牌表是同一逻辑。同期STCC框架将其定义为码本离散令牌指向一组连续约束视觉、行为、文案。编译管线查表展开的过程就是码本解码。工业界也在做。W3C DTCG的Design Token Taxonomy已定义Semantic Token层把颜色和间距抽象为语义。我们在其之上扩展了行为约束与跨域规则。但行业也有反面的声音。Design Systems Collective今年指出很多所谓语义令牌只是换名color-red-500改叫color-danger没有场景定义。这恰恰反证了我们为什么需要真正的语义字典——不是换名而是锁义。参考链接MOSS · W3C DTCG · When “semantic tokens” are no longer semantic · STCC检索关键词 “Semantic Token Coding Framework arXiv 2026”三、关键设计语义令牌表3.1 四大命名空间码本原子集语义令牌按回答的问题分为四个命名空间每个令牌是离散索引编译管线查表后展开为连续约束status._ —— 这件事有多严重_*令牌含义视觉映射示例status.critical致命系统故障、数据丢失红色脉冲 八边形警告status.warning警告限流、降级、可恢复错误黄色提示 时钟图标status.info信息提示、说明、部分可用蓝色静态 信息图标status.success成功保存完成、操作成功绿色静态 对勾图标status.neutral中性加载中、等待中灰色动画 旋转图标phase._ —— AI 处于什么阶段用户在等什么_*令牌含义视觉映射示例phase.research检索搜索信息、查找来源蓝色 放大镜图标 来源计数phase.analysis综合对比多源、识别分歧黄色 大脑图标 共识度phase.check验证核对链接、验证事实绿色 盾牌图标 验证状态phase.output生成生成答案、输出结果紫色 文档图标 引用索引boundary._ —— 系统拒绝用户时权利边界在哪里_*令牌含义视觉映射示例boundary.soft软性拒绝拒绝请求但保留会话黄色提示条 保留输入框boundary.hard强制终止终止会话清空上下文红色退出面板 数据政策说明boundary.review升级审核提交人工审核蓝色提示 预计审核时间action._ —— 用户点击后后果是什么_*令牌含义视觉映射示例action.destructive破坏性删除、清空、不可逆红色空心 二次确认 输入验证action.constructive建设性保存、提交、创建蓝色实心 成功反馈action.neutral中性取消、关闭、返回灰色描边 无后果3.2 字典注册的 6 个语义绑定v1.0.0字典 v1.0.0 注册的 6 个语义绑定构成组织级语义码本的最小可行原子集语义绑定含义核心约束注入跨层禁止示例status.critical阻断性、可能不可恢复红色脉冲、八边形图标必须二次确认文案必须说明后果不可用于 observational 域限流提示禁用致命红status.warning需注意、可恢复黄色静态、三角图标必须显示恢复时间必须提供操作步骤—status.info中性信息告知蓝色静态、信息图标可自动消失禁止附加操作说明—status.success操作成功确认绿色静态、对勾图标可自动消失禁止附加操作说明—action.destructive不可逆操作红色空心描边、危险图标必须二次确认必须说明不可恢复禁止使用普通主按钮样式action.primary场景主行动品牌色实心、箭头图标点击后跳转显示下一步预览—3.3 令牌如何展开为连续约束每个令牌在契约中展开为一组连续约束。以status.critical应用于致命错误ERR-001 · fatal 级别为例semantic_tokens:error_severity:fatal:description:致命错误数据可能丢失或会话不可恢复visual_mapping:color_token:status.critical# 引用字典绑定非色值motion_token:pulse.red.urgent# 红色脉冲注意力强制的最高档icon_token:octagon-alertuser_action:# 必须提供恢复路径-label:刷新页面action:refresh_pagepriority:1-label:导出历史action:export_historypriority:2llm_constraints:-文案必须说明对话可能已丢失-禁止仅显示出错了等模糊文案-禁止显示纯技术错误码immutable_boundaries:-boundary_type:semanticrule:禁止把 fatal 级错误渲染为普通文字提示violation_action:block-boundary_type:semanticrule:status.critical 不可用于 observational 域violation_action:block一个离散索引status.critical→ 展开为视觉方向红色脉冲 八边形图标 行为约束恢复路径、二次确认 文案约束必须说明后果 机器防线跨层禁止 block。这就是码本解码的完整形态。四、架构层概念设计背景码本而非术语表。术语表供人查阅码本供机器解码每个令牌是离散索引编译管线查表后展开为连续约束视觉方向 行为约束 文案语气。这决定了令牌的读者不只是设计师更是编译管线与 AI 工具。令牌层与呈现层分离。color_token是语义标识color是实际色值同一个status.critical在不同设计系统里可映射到不同色值Tailwind #EF4444 / Ant Design #F5222D / DevUI #FF4D4F。语义令牌不关心具体色值只关心语义映射关系——设计系统更新时改映射表契约不变。语义覆盖层Semantic Overlay。组件库是底层Underlay只负责渲染——它提供圆角、色值、图标位这些空容器语义覆盖层在组件之上加盖业务语义把空容器翻译为业务语义组件。令牌是覆盖层加盖语义时使用的印泥。术语双轨。面向不同读者群时三层结构有两套叫法语义域 ≈ 覆盖层目录语义令牌 ≈ 语义重绑定场景映射 ≈ 约束注入。两套术语指向同一份注册表。五、这些坑怎么被解掉场景与角色对照回到开头那些真实反馈看令牌就位后它们各自怎么闭环。踩过的坑 1“这个红到底代表什么走查时谁也说不清”症状AI 生成限流提示时Before 形态下选color-danger无可指责——红色本身没错视觉走查也合规但用户看到红色以为账户出了问题实际只是需要等 30 秒。合规但错误。根因Token 只定义颜色没定义场景语义机器拿不到限流 ≠ 致命这条信息。关联机制①语义令牌与字典本篇 B1 B3 C-D2《Token 层差异》解法路径有了令牌后限流语义级别是retryable黄色时钟 倒计时AI 若选status.critical直接违反跨层规则CI 阻断PR 无法合入。错误在生成阶段就无法成立。验证方式前端与 AI 工程师的验收争议从感觉不对变成违反了哪条绑定——争议可引用、可定位、可裁决。踩过的坑 2“LLM 把 Critical 降级为’严重’代码里查不出来”症状AI 生成告警时把 “Critical” 替换为严重、把 “Data Loss Risk” 替换为请稍后重试——情绪权重被概率性输出随机降级Schema 校验通过语义却是错的。根因文案层没有术语锚定同义词自由替换没有任何机制判定违规。关联机制①语义令牌与字典B3 字典synonym_firewall同义词防火墙 6 个漂移模式证据库ALR-001解法路径YAML 定义禁止词并编译进 Prompt 前缀synonym_firewall约束下关键术语替换即违规生成阶段被校验规则命中。验证方式设计师与产品经理精心设计的语义权重不再被概率性输出随机抹平——“Critical” 在所有产出中保持锚定替换即被校验规则命中。六、调整后工具界面层的呈现状态同一批工具在语义令牌就位之后工具 / 环节调整前调整后AI 生成工具只有色值限流与致命错误同红Prompt 前缀注入令牌约束后致命错误 红色脉冲 八边形图标 恢复路径限流提示 黄色时钟 倒计时——同模型同任务产出语义分级文案生成“Critical” 被随机替换为严重synonym_firewall锚定关键术语替换即被校验规则命中验收环节走查结论停留在感觉不对Checklist 逐项核对语义分级 / 文案 / 红线违反红线即阻断结论注明契约版本号边界声明语义令牌表不解决视觉值的一致性那是 Design Token 层的职责不定义具体场景的约束实例那是 YAML 契约的职责也约束不了有没有人查它消费纪律在角色侧见角色 1 长篇。当前量化收益均为数据模型推演待生产数据验证。