honey-design

Honey Design（相同像素，更少令牌）

对于面向用户的交付成果——落地页、营销网站、UI 组件—— 精致度就是规格。 一个简陋、有效却难看的页面不合格，不算节省。

因此，这里的令牌优化手段不是“减少设计”。而是“以更精炼的方式表达相同的 设计”。压缩代码，绝不压缩渲染结果。如果删减会让最终页面哪怕只改变一个像素， 那就不该删。

将这些规则作为写作风格本能地应用——不要纠结该用哪条规则，也不要把推理令牌 花在技能本身上。构建精致的成品；养成以精炼方式编写标记和 CSS 的习惯。

坚守精致度（评判维度）

绝不要为了节省令牌牺牲以下内容——它们就是交付成果：

• 视觉层次——经过考量的布局、富有节奏感的间距、清晰的视觉层级、符合品牌调性的 色彩与字体。不是未经样式修饰的框架。
• 每个要求的版块都应完整呈现——导航、主视觉区、功能、定价、页脚等。敷衍的版块 意味着不完整，不是简洁。
• 交互与动效——悬停／焦点状态、过渡效果，以及那些让作品显得“完成”的细节。
• 丰富的响应式体验——在手机和桌面设备上都真正出色，而不是仅仅不会在桌面页面上 出错。
• 无障碍性——带标签的控件、每张图片都有 alt、语义化地标、可见的焦点状态、 足够的对比度、键盘操作路径。
• 用户明确要求的任何内容。

令牌优化手段——表达更精炼，渲染结果不变

通过删去代码中的重复和冗长来减少令牌，同时产出完全相同的最终页面；绝不要 删减设计的丰富度：

CSS

• 为所有重复使用不止一次的内容定义自定义属性——调色板、间距比例、圆角、阴影、 过渡效果。在 :root 中定义一次，随处引用。节省最多的做法：将重复出现的 #1a1a2e／24px／box-shadow:… 替换为 var(--…)。
• 使用共享类，避免重复代码块。 三张功能卡片只需一条 .card 规则，不要写三段 几乎相同的声明块。通过类设置样式，不要使用内联样式。
• 使用简写属性——优先使用 margin、padding、inset、font、flex、 background、border、grid 简写属性，而不是展开成长属性。
• 使用流式尺寸，合并媒体查询——对字号和间距使用 clamp()／min()／max() 以及 %／fr／vw，并搭配 grid-template-columns:repeat(auto-fit, minmax(…,1fr)) 和 flex-wrap。一条流式规则通常就能替代一条基础规则加两条 @media 覆盖规则。只有布局确实需要改变时才保留 @media。
• 合并具有相同规则的选择器（h1,h2,h3{…}）；使用简洁的重置样式，而非冗长的 规范化样式；使用简写十六进制（#fff）、数字 0 不带单位，并避免尾随零。
• 不要保留无用、重复或已注释掉的 CSS。

HTML

• 使用语义化地标，不要添加多余的包装 div——`
  ` 已能承载结构；不要嵌套没有作用的 div。
• 不要重复使用内联 style=——改用类来设置样式。
• 文案简洁且真实可信——内容足以支撑设计，不要堆砌填充用的 Lorem 文本。

产物周围的说明：越少越好。 页面本身就是答案。不要说“这是你的落地页！”，也不必 介绍你构建了什么。如果确实有不可或缺的信息（例如字体依赖），最多用一句话说明。

完成前自检

进行每项压缩前后，渲染出来的页面是否完全相同？

如果是，就可以交付；你只是减少了令牌开销，并未牺牲设计。如果所谓的“节省”删掉了 悬停状态、渐变、版块、断点或无障碍属性，就没通过测试——请恢复它。降低渲染效果的 精简不算成功，而是这种技能要避免的更便宜、更差劲的方案。