Garden Skills五维度设计评审法完整指南：0-10分打分标准详解-酒店常州论坛

Garden Skills五维度设计评审法完整指南：0-10分打分标准详解

【免费下载链接】garden-skillsConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills

Garden Skills 是 ConardLi 开源的 AI Agent 技能集合，其中的 web-design-engineer 技能内置了一套五维度设计评审法：从设计哲学一致性、视觉层次、工艺质量、功能性与原创性 5 个角度，对网页设计逐项打出0–10 分，并输出按严重程度排序的修改清单。本指南完整拆解每个维度的打分标准，帮你把"这个设计好不好看"的模糊感受，变成可量化、可执行的设计评审标准。

一、五维度设计评审法是什么 📐

当 AI 生成一个网页后，"完成"不等于"好看"。web-design-engineer 技能在工作流第 7 步定义了 **Critique（设计评审）**环节：对产物按 5 个维度逐一打分，满分 10 分。五个维度分别回答一个核心问题：

维度	英文	核心评审问题
设计哲学一致性	Philosophy Alignment	每个细节是否都源于选定的设计方向？
视觉层次	Visual Hierarchy	视线是否沿设计师预期的路径流动？
工艺质量	Craft Quality	对齐、间距、用色的像素级执行是否精准？
功能性	Functionality	每个元素是否"挣得了它的位置"？
原创性	Originality	是否避开俗套、又有"意料之外但恰当"的决策？

完整的打分细则、权重表和问题清单都收录在 critique-guide.md，五维度的定义入口在 SKILL.md。

💡 评审的黄金法则：Critique the design, not the designer—— 评设计，不评人。所有反馈要具体、可操作、有设计语言支撑，而不是"颜色有点怪"这种模糊口味判断。

二、0–10 分打分标准逐维详解

2.1 设计哲学一致性：从"表面模仿"到"全面体现"

评审设计是否贯彻了选定的方向（比如极简主义、瑞士网格、杂志编辑感），而不是东拼西凑。

分数	标准
9–10	每个细节都在体现所选哲学，没有任何"从别处搬来"的痕迹
7–8	方向正确、签名特征落地，仅 1–2 处轻微漂移
5–6	意图可见，但混入了外来元素稀释纯度（如"极简主义"却每行排 6 张卡片）
3–4	只有表面模仿，不理解底层价值观
1–2	与任何既定方向都无可辨识的关联

检查要点：选定设计师/工作室的招牌手法是否真的在场？色彩、字体、布局、动效是否指向同一套哲学？有无"自我矛盾"的元素？

2.2 视觉层次：眯眼测试是否通过 👀

分数	标准
9–10	视线自然沿预期路径流动，读取信息零摩擦
7–8	主次清晰，1–2 处层次模糊
5–6	标题与正文可区分，但中间层（副标题、图注）塌在一起
3–4	信息平铺，没有明确入口
1–2	混乱——观看者不知道先看哪里

检查要点：标题与正文字号比是否 ≥ 2.5 倍（Hero 区理想 4–6 倍）？色彩/字重/大小是否构建了 3–4 个清晰层级？眯眼测试（Squint test）——眯起眼睛看屏幕，层次是否依然可读？

2.3 工艺质量：8pt 网格与色彩纪律

像素级执行的评审：对齐、间距系统、色彩克制。

分数	标准
9–10	像素级完美，对齐、间距、色彩无瑕疵
7–8	整体精细，仅 1–2 处轻微对齐或间距问题
5–6	基本对齐，但间距不一致、色彩使用不成体系
3–4	明显对齐错误、间距混乱、颜色过多
1–2	粗糙——看起来像草稿

检查要点：间距是否遵循 8pt 网格（只取 8/16/24/32/48/64 这类值）？同类元素间距是否一致？颜色数量是否 ≤ 4（主色 + 点缀 + 中性色阶 + 1 个强调）？字体家族是否 ≤ 2（1 个展示字体 + 1 个正文字体）？

2.4 功能性：删除测试 🗑️

分数	标准
9–10	每个元素都服务于目标，零冗余
7–8	整体以功能为先，仅存可删的轻微装饰
5–6	可用，但明显有装饰元素在争夺注意力
3–4	形式大于功能，用户需要费力找信息
1–2	装饰淹没了内容传达

检查要点：对每个元素做删除测试——"删掉它，设计会变差吗？"若答案是否 → 删掉。CTA 和关键信息是否在最显著位置？有没有"因为好看"而添加的元素？信息密度是否匹配媒介（幻灯片宜稀疏、PDF 可以密、落地页为转化服务）？

2.5 原创性：拒绝"AI 味"俗套 ✨

分数	标准
9–10	耳目一新，在所选哲学内找到独特表达
7–8	有自己的想法，不是按模板拼装
5–6	平庸——读起来像模板执行
3–4	大量俗套（"AI"必配紫色渐变光球，"对话"必配聊天气泡）
1–2	纯模板/素材拼凑

检查要点：是否避开了"AI 味清单"（紫粉渐变、emoji 充图标、左侧彩色边框卡片、Inter 当展示字体）？是否至少有一个"意外但正确"的决策？有没有元素在尖叫"这是 AI 做的"？更多上下文化的失败模式可查 failure-patterns.md。

三、不同产物类型的权重策略

不同产物的评审重点不同，打分时应按下表调整权重（完整表格见 critique-guide.md）：

产物类型	最重要	次重要	可放宽
落地页 / 营销站	功能性、视觉层次	原创性	无（必须全面）
仪表盘 / 数据产品	功能性、工艺质量	视觉层次	原创性（清晰优先）
HTML 幻灯片	视觉层次、功能性	工艺	原创性（可读优先）
移动端原型	功能性、工艺	视觉层次	哲学一致性（可用性优先）
品牌发布动画 / Hero 片	原创性、视觉层次	哲学	功能性（它是时刻而非表单）
编辑设计 / 作品集	原创性、哲学	视觉层次	功能性（氛围最重要）

一句话理解：落地页看转化，仪表盘看清晰，作品集看气质。

四、Top 10 常见设计问题清单

评审时可直接对照这张清单逐项检查（完整问题清单含"为什么是问题"与"修复方案"，见 critique-guide.md）：

#	问题	快速修复
1	AI 科技感俗套（渐变光球、机器人脸）	用抽象隐喻替代直白符号
2	字号层次不足（标题 < 正文 2.5 倍）	正文 16px → 标题至少 48–64px
3	颜色过多（≥ 5 色无主次）	限 1 主 + 1 次 + 1 点缀 + 灰阶
4	间距无系统	只取 8pt 网格值
5	留白不足	留白 ≥ 总面积 40%（极简风 ≥ 60%）
6	字体过多（≥ 3 家族）	最多 2 个，用字重/字号做变化
7	对齐不一致	全局统一一种对齐方式（通常左对齐）
8	装饰压过内容	做删除测试，不加分就删
9	赛博霓虹滥用（深色底 + 荧光色）	换更有辨识度的调色板
10	信息密度与媒介错配	幻灯片每页 1 个核心观点

五、评审报告输出模板

评审完成后，按固定模板交付一份结构化报告（模板见 critique-guide.md）：

总评：Overall: X.X / 10，并标注档位 —— 优秀（8+）/ 良好（6–7.9）/ 待改进（4–5.9）/ 不及格（<4）
分维度得分：5 个维度各 X/10，附一句话理由
Keep（值得保留）：用设计语言说清"哪里好、为什么好"，而非"颜色不错"
Fix（修改项）：按严重程度排序 ⚠️ 关键 → ⚡ 重要 → 💡 打磨，每项给出具体值（如"标题从 32px 提到 56px"，而不是"把标题做大"）
Quick Wins（快速收益）：只有 5 分钟时先做的 3 件最高性价比修改

六、评审反模式：好点评 ≠ 模糊夸奖

critique-guide 末尾专门列出了 6 个评审反模式，新手最容易踩中：

❌模糊口味判断："颜色不对" → ✅ "点缀色饱和度太高，与主色抢注意力，建议降低明度使其从属"
❌无细节的夸奖："看起来很棒"零学习价值——永远说清什么很棒、为什么
❌混排严重程度：关键层次错误和打磨级颜色微调不能混在一个列表里
❌修改项超过 7 条：认知过载；同类问题要合并成一条
❌批评设计师而非设计："你没想清楚"不解决任何问题

七、上手路径与相关文件 📂

想亲手体验"Skill 开 / 关"的评审差异，可以直接打开仓库里的对比演示页 demo/web-design-demo/demo2/index.html，同一提示词、有无技能加持各生成一页，差异一目了然。

核心文件导航：

评分细则 + 权重表 + 问题清单：critique-guide.md
七步工作流（评审在第 7 步）：SKILL.md
按产物类型的失败模式：failure-patterns.md
25 套风格配方库（评审哲学一致性的参照系）：style-recipes/INDEX.md
技能中文说明：README.zh-CN.md

掌握这套五维度 + 0–10 分打分体系后，无论是自评 AI 生成的网页，还是评审自己的设计稿，你都有了同一把"标尺"——分数可比较、问题可排序、修改可验收。🚀

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析