主观评价难以推动修改
“不好看”“像 AI”往往无法告诉协作者下一步做什么，因此需要把观察转成结构化问题。
LAB / WEB AESTHETIC EVALUATION
AI 网页审美评估实验
把模糊审美反馈转化为可观察证据、整改优先级与复核标准，支持设计师、产品经理与 Coding Agent 高效协作。
CASE LOGIC / AESTHETIC JUDGMENT
把“感觉不对”，
拆成可执行判断。
这个实验面向设计、产品与 Coding Agent 协作场景，目标是让审美反馈可以被定位、排期、修改和复核。
设计师与开发者共享语言
评审需要同时照顾栅格、层级、品牌、交互与响应式，让视觉意见能对应到具体页面元素。
评估框架、优先级与验证闭环
定义观察维度与问题严重度，整理 Bad Case，对旧版作品集与 AI 落地页进行归因、改版和复核。
先描述现象，再给修改方向
每个维度都包含定义、观察点、常见问题和修改建议，避免用单一总分掩盖具体差异。
从模板化页面回到任务逻辑
通过前后版本对照，重新组织首屏承诺、卡片层级、强调色语义和移动端阅读顺序。
14 个维度，2 组完整对照
实验形成可复用评估框架、Bad Case 图谱和四步过程日志，可用于后续网页设计复盘。
A / RUBRIC
14 个可复用的观察维度。
每个维度包含定义、可观察证据、常见问题与修改方向。评分用于形成讨论，不代表审美存在唯一数学答案。
栅格与对齐
观察边线、基线、列宽和左右边距是否形成稳定关系。
修改建立列与间距单位，先对齐结构再调装饰。
间距与密度
观察相关内容是否靠近，无关内容是否获得足够分隔。
修改用有限间距层级替代随意的 16/24/37 像素混用。
字体与层级
观察标题、正文、标签与 CTA 是否有可辨认的优先级。
修改拉开字号、字重和留白，而非增加更多字形样式。
配色与对比
观察强调色是否服务行动与重点，文字是否始终可读。
修改限制强调色，把渐变放在有语义的局部。
留白与节奏
观察空白是否帮助阅读，而非让模块碎裂或内容拥挤。
修改让标题、案例和行动区获得不同强度的呼吸空间。
信息层级
观察读者能否先理解主题，再看到证据和下一步行动。
修改删除同权重元素，让每屏只保留一个主焦点。
组件一致性
观察相同语义是否使用相同规则，不同语义是否避免硬套卡片。
修改按内容角色而非“组件库方便”决定容器样式。
品牌调性
观察色彩、语气、图像和布局是否共同表达同一个对象。
修改先定义一条核心气质，再让局部项目色作为补充。
时代感与模板感
观察是否出现一眼可见的默认渐变、圆角卡片和英文装饰词堆砌。
修改以内容结构和真实素材建立差异，而不是追加特效。
动效与节奏
观察动效是否帮助定位、反馈或叙事，而非阻挡阅读。
修改保留可理解的静态状态，并尊重 reduced motion。
交互逻辑
观察按钮、链接、切换与返回是否符合读者预期。
修改用明确的标签、焦点与可逆操作降低试错成本。
响应式与移动端
观察390px 是否重新安排层级、卡片与标注，而非压缩桌面。
修改在小屏改为单列并重排对比内容，保留足够触控面积。
可访问性
观察文字对比、键盘焦点、语义结构和替代文本是否可用。
修改无 JavaScript 时保留主内容，互动仅增强信息获取。
内容与视觉匹配
观察页面承诺、文案、图片和交互是否说的是同一件事。
修改删除空洞口号，让每项视觉都有与内容对应的任务。
B / AI BAD CASES
常见问题不是风格标签，
而是可解释的失效。
以下分类用于归因，不是为了嘲笑初版页面。一个网页可以“能用”，但仍因结构平均或品牌失焦而缺乏说服力。
模板套壳 / 卡片墙
所有内容套进相同圆角卡片，主次消失。影响：读者只能扫到组件，无法理解项目。策略：按内容角色拆开容器和尺度。
渐变与圆角滥用
每一块都使用高饱和渐变和大圆角。影响：品牌焦点被装饰吞没。策略：保留一处强调，其他区域退后。
层级平均 / 大标题空洞
标题、卡片标题、按钮和 Badge 同样响亮。影响：阅读没有顺序。策略：确立标题 → 说明 → 行动的优先关系。
英文装饰词与 Emoji
与内容无关的英文小字和 Emoji 替代语义。影响：像通用 AI 模板。策略：用真实标签、图像和文字说明功能。
品牌调性缺失
默认科技紫蓝被用于任何主题。影响：对象、行业和语气无法被识别。策略：从内容与受众建立色彩、密度和图像规则。
桌面稿机械缩小
三列卡片仅缩小到手机。影响：文字、标注和触控目标失效。策略：移动端重排行文与对比，不只是缩放。
C / CASE 01
从旧作品集到新版：
先承认重心错误。
案例使用自己的旧站与本次新版，目的不是证明“新版更高级”，而是展示问题如何被标注、改动如何对应问题、以及哪些问题仍待验证。
旧版首页结构案例页面占据首屏
兰亭墨仙传
问题 1：首屏先看到单一国风 AIGC 项目，无法快速判断职业定位。
问题 2：项目顺序让互动网页和 AI 产品能力退后。
问题 3：长单页连续叠图，案例职责与交付难以快速比较。
评估：这是信息层级和招聘路径问题，不是“兰亭不好看”。它会造成“只做国风 AI 插画”的职业误读。
新版首页结构招聘路径 / 项目证据
视觉设计师 × AI 产品经理
双岗位证据索引
第一入口：网页审美评估实验，证明评价与整改能力。
第二组：禾小星 + 禾小宣，证明互动网页和 AI 产品结构。
第三组：DP LAB、兰亭、之茶，各自承担真实交付与视觉判断。
修改：将首页改为招聘决策型编辑索引；每个项目入口写清职责和主要交付，详情页再展开设计过程。
| 维度 | 前版观察 | 修改 | 复核 |
|---|---|---|---|
| 信息层级 | 单一案例压过职业定位 | 首屏增加身份、岗位相关入口和四类证据 | 首页 15 秒可识别身份与评估实验 |
| 项目节奏 | 项目被长单页内容淹没 | 首页索引与独立详情页分工 | 项目可在 30 秒横向比较 |
| 移动端 | 长图与内容密度需重排 | 390px 改为单列和短句索引 | 构建后做真机/浏览器复核 |
后续：禾小星与禾小宣的真机操作片段将继续补入迭代记录。
D / CASE 02
AI 生成落地页整改：
从能用到有判断。
虚构 Brief：为“会议纪要 AI”制作落地页。无真实客户、无第三方品牌。初版由 Coding Agent 按常见默认模式产出，后续由人工进行结构化整改。
MemoGlow ✨AI POWERED
让每一场会议
重塑无限可能
圆角渐变卡片
智能总结
智能总结
圆角渐变卡片
团队协作
团队协作
圆角渐变卡片
一键洞察
一键洞察
归因：并非“颜色不好看”。首屏承诺空泛；同尺寸卡片造成层级平均；紫蓝渐变与 Emoji 没有产品语义；移动端三列缩放会压缩阅读和触控。
录纪会议后的可复查结论
把讨论整理成
可继续执行的下一步。
输入：录音或笔记
明确来源与权限
明确来源与权限
处理：摘要、待办、分歧
按阅读顺序组织
按阅读顺序组织
输出：可编辑纪要
保留负责人和上下文
保留负责人和上下文
修改：以产品真实流程替代空洞愿景；将单一强调色留给行动按钮；三块内容使用不同的信息密度；移动端改为单列流程。
| 维度 | 初版 | 证据 | 修改建议 | 置信度 |
|---|---|---|---|---|
| 信息层级 | 2 / 明显问题 | 标题、卡片、Badge 同时抢焦点 | 建立标题 → 说明 → CTA → 流程顺序 | 高 |
| 品牌调性 | 2 / 明显问题 | 默认紫蓝渐变与产品任务无对应 | 用中性纸色和单一深绿强调可复查感 | 中 |
| 组件一致性 | 2 / 明显问题 | 三张卡承担不同内容却完全同形 | 按输入、处理、输出区分信息形式 | 高 |
| 移动端 | 2 / 明显问题 | 桌面三列直接缩小 | 390px 切换为单列流程与 44px 操作区 | 高 |
边界：评分是辅助判断；“品牌调性”部分含主观偏好，已以中等置信度标注。
E / CODING AGENT LOG
记录可复用的判断，
不倾倒聊天全文。
公开日志只保留 Brief、结构决定、提示、观察、人工判断、修改和验证，不声称模型具有隐藏思考或真实评测经验。