Zhishuo apply visual taste

应用智说审美

把模糊的“做得好看”转换成一份可执行、可交接、可验收的视觉合同。先保护内容和功能，再选择一条主气质；不要从随机配色、圆角或装饰开始。

执行流程

1. 锁定真实任务

记录页面或成品的用途、主要用户、核心内容、主操作、目标载体、桌面与移动目标视口和必须保留项。已有设计时保存修改前截图；有指定参考图时标明它负责结构、气质还是交互。

完成标准：可以用一句话说明“谁在什么场景完成什么”，并列出至少一个必须保留项。无法说明时先补简报，不选风格。

2. 选择一主一辅

按场景读取 风格系统，选择一条主风格和最多一条辅助风格。用户明确指定风格时优先服从；没有指定时运行：

python3 scripts/create_visual_brief.py \
  --title "Anonymous product" \
  --scene knowledge \
  --output-dir /absolute/new/output

完成标准：视觉合同中只有一个主风格、一个明确艺术强度和一组避免项。不要把六套系统平均混合。

3. 建立视觉合同

使用生成的 visual-brief.md 与 visual-tokens.json 约束颜色职责、字体角色、网格、间距、材质、图像、动效和窄屏重排。先用真实内容建立结构与视觉中心，再加入一种有信息职责的效果。移动端必须重新分配层级，不得只把桌面画布缩窄或依赖横向裁切。

需要精确字段和交付目录时读取 输出合同。需要查看参考来源时读取 来源索引，只学习机制，不复制品牌或截图。

完成标准：另一个执行者无需猜测“高级、年轻、有感觉”的含义，就能根据 token 和限制开始实现。

4. 使用可发布资源

优先使用脚本输出的原创 CSS/SVG 基础资产，再根据项目内容创作新的图像、图标或纹理。使用任何外部素材前读取 授权边界。

完成标准：每个进入成品的非原创素材都有授权依据；仅供研究的截图和原型素材没有进入交付目录。

5. 在真实目标中实现

• 新建独立网页：从生成目录的 assets/responsive-shell.html 开始，保留其中 min-width: 0、文本换行、筛选换行和移动端单列规则，再替换匿名内容。
• 现有网页或应用：保留现有功能与数据流，把响应式骨架作为对照，先完成一个关键页面和两个目标视口。
• PPT 或报告：正文保持阅读优先，只在封面、章节和关键结论页提高艺术强度。
• 作品集或营销页：使用真实作品、产品或证据作为视觉中心。
• 现有设计审查：按合同列出差异，只修最影响结果的 3–5 项。

完成标准：实现结果能回到视觉合同的具体条目，不依赖“看起来差不多”的解释。

6. 真实渲染验收

在用户实际使用的浏览器、设备、Office 或播放器中检查信息层级、可读性、响应式、交互状态、动效降级和素材授权。源码检查、构建成功和组件存在只能作为结构证据。

网页分支优先使用真正的设备仿真，不要用 macOS Chrome 的 --window-size=390,844 冒充 390 CSS 像素：

python3 scripts/check_web_render.py \
  --html /absolute/page.html \
  --output-dir /absolute/new/render-evidence

读取 render-report.json，确认报告里的 inner_width 分别为 1440 和 390，再目视两张截图。脚本的溢出、焦点和 reduced-motion 检查是程序证据，仍不能替代内容层级和整体气质的目视判断。

完成真实检查后回写结果：

python3 scripts/record_visual_result.py \
  --workspace /absolute/output \
  --structure passed \
  --desktop passed \
  --mobile passed \
  --interaction passed \
  --reduced-motion passed \
  --licensing passed \
  --evidence desktop-and-mobile.png \
  --notes "Inspected in the target browser."

完成标准：visual-acceptance.md 的每项都标记为 passed、failed 或 not-run，并附截图或明确人工检查边界。存在 failed 时不宣布视觉完成。

稳定规则

• 默认底盘：quiet-functional；需要更强表达时加入 mature-editorial，默认艺术强度不超过 2 / 5。
• 强风格只服务于明确场景：展示用 art-gallery，科技能力说明用 tech-stage，活动与消费内容用 vivid-pop。
• 高级感来自可靠内容、清楚比例和一个视觉中心；黑底、粒子、渐变和大字本身不构成高级感。
• 动效解释状态、结构或叙事节奏；普通鼠标跟随和整页持续运动不进入默认方案。
• 一套作品只使用一种视觉语言；颜色、字体、图像、形状和交互共享同一组规则。

停止条件

• 真实用途、核心内容或必须保留功能不清楚：停止选风格。
• 只有未授权截图或图片：停止复制，改为提取机制或重制原创资产。
• 出现三种以上主气质：停止加元素，退回一主一辅。
• 缺少真实渲染证据：保留 not-run，不把程序检查冒充视觉通过。
• 移动截图出现文字、按钮或筛选器裁切：保持 failed，先修复重排再继续装饰。
• 移动测试报告的 inner_width 不是目标 CSS 宽度：停止验收，先修正设备仿真工具。