技能介绍

要解决的问题

“做得高级一点”“要年轻化”“看起来有感觉”——这类反馈的共同问题是不可执行：执行者只能靠猜测补齐意图，结果随机配色、圆角和装饰堆在一起，几种风格平均混合，最后没人能说清成品为什么“不对”。更实际的坑是：移动端直接把桌面画布缩窄，或者把源码构建通过当成视觉验收通过，整个过程没有任何可对照的证据。

核心能力与流程

这个技能把审美决策压缩成一份视觉合同，流程分六步：

锁定真实任务：先写清楚谁在什么场景完成什么，列出必须保留的内容与功能；一句话说不清就不选风格，先补简报。
一主一辅：从风格系统选一条主风格和最多一条辅助风格。默认底盘是 quiet-functional，需要表达力时加入 mature-editorial，默认艺术强度不超过 2/5；展示用 art-gallery，科技能力说明用 tech-stage，活动与消费内容用 vivid-pop。
建立视觉合同：产出 visual-brief.md 与 visual-tokens.json，约束颜色职责、字体角色、网格、间距、材质与动效，让另一个执行者不用猜测“高级、年轻”的含义即可开工。
可发布资源：优先使用脚本生成的原创 CSS/SVG 基础资产，外部素材必须核对授权边界，仅供研究的截图不得进入交付目录。
在真实目标中实现：新建网页从 assets/responsive-shell.html 起步，保留其中 min-width: 0、文本换行和移动端单列规则；存量项目先保住功能与数据流，再改造关键页面。
真实渲染验收：在用户实际使用的浏览器和设备中检查，render-report.json 的 inner_width 必须分别是 1440 与 390；脚本的溢出、焦点和 reduced-motion 检查只是程序证据，仍需目视截图。结果回写 visual-acceptance.md，每项标记 passed / failed / not-run，存在 failed 就不宣布视觉完成。