视觉规范：token、表头、组件照搬

GenUI 有一套强制的视觉规范，目的是让所有小工具在搜索场景里呈现统一、可控的观感。它主要由「视觉 token + 表头规则 + 组件照搬」三部分构成，且是 genui check 的重点扫描对象。

视觉 token：禁止硬编码颜色

所有颜色、字号都必须使用官方提供的 CSS 变量（token），形式为 --cos-*，严禁在 CSS 里写死 #fff、rgb(...) 等字面量。常用 token 包括：

• 字号：--cos-text-body（14px）、--cos-text-body-lg（16px）、--cos-text-headline-sm 等；
• 颜色：--cos-color-text、--cos-color-text-minor、--cos-color-text-slim、--cos-color-bg-raised 等。

实战中曾把字号全部改为 calc(var(--cos-text-body) / var(--font-size-scale, 1)) 这种写法，既用 token 又兼容缩放。注意：QR 码的白底是由 canvas 像素自身绘制的，不属于 CSS 硬编码色，合规。

字体大小也有下限：小于 14px（即小于 --cos-text-body）会被 genui check 拦截。

表头规范

小工具顶部必须有一行表头，规则是：

• 文案格式：「小工具 · 项目名」；
• 总长度 ≤ 10 字；
• 高度 45px。

实战例子：表头写成「小工具 · 二维码免费生成器」，与提交表单里的名称在语义上保持一致。

组件照搬：不要自己造轮子

官方在 assets/components/ 提供了标准控件，应直接照搬使用，而不是自己手写一套样式：

• layout.html：形态 A 的「画布 + 操作区」骨架，两个实战工具都照搬了它；
• radio.html：单选控件（二维码的「纠错等级 L/M/Q/H」就是用它实现的分段单选）；
• tabs.html：分段控件（本质仍是 radio，用于分类切换）。

照搬组件能一次性满足视觉 token、尺寸、交互等多条规范，是最省事的合规路径。

其他交互约束

• 1:1 正方形响应式：展示区按正方形自适应，不用硬编码宽高比。
• 控件克制：滑动条 ≤ 4 个、按钮 ≤ 2 个，避免操作区过载。
• 图标用 cos-icon：官方字体图标（如 cos-icon-refresh、cos-icon-info-source）按类名引用，注意它在平台外（如本地浏览器直接打开）会显示为方块，这是正常现象，不是 bug。

小结

视觉规范的核心是「用 token 不用字面量、用官方组件不自己造、表头卡 10 字 45px、控件做减法」。照搬 assets/components/ 能一次性绕过一大半视觉检查项。