让AI做网页设计不再”哪里不对劲”——用Awwwards评分框架做设计验收

你有没有这种感觉——看到别人做出来的网页，第一反应是「哇，好高级」，但自己让 AI 做的时候就变成「哪里不对劲」？

问题往往不在于不会用工具，而在于缺一套评判标准。

187webdesign 就是来解决这个问题的。这是一个专门给营销网站、landing page 和产品 UI 使用的设计评审 Skill，来自 LumenHelixLab/187WEB 合集。

它的核心逻辑很清晰：先教你怎么看，再教你怎么做。

它凭什么不一样？

大多数设计指南会扔给你一堆规则——颜色对比度、字体大小、留白技巧。187webdesign 不一样，它从Awwwards 评分体系出发，告诉你评委会怎么打分的：

• Design 40%：排版、色彩、构图、一致性、细节
• Usability/UX 30%：导航清晰度、响应速度、可访问性
• Creativity 20%：有没有一个让人记住的瞬间
• Content 10%：文案质量和整合度

这个框架很实用——下次你让 AI 设计网页，可以直接拿这个框架去「验收」，而不是凭感觉说「再改改」。

几个实操建议

1. 前 5 秒法则
访问者 5 秒内决定要不要继续看。Hero 区域必须回答三个问题：这是什么？谁用的？为什么选你？用真实产品图 > 用库存图，用一句有力的 tagline > 用泛泛的描述。

2. 字体要有个性，不要中性的
大多数 AI 生成的设计用 Inter、Roboto——这些字体本身没问题，但太安全了，没有记忆点。找个有性格的 display font 搭配干净的 body font，2 families、2-3 weights，足矣。

3. 60-30-10 配色法
60% 背景/主色，30% 次要色，10% 强调色（留给 CTA 和重点）。强调色别滥用，稀释了就不灵了。

4. 动效服务功能，别装饰
动效是用来引导注意力和反馈状态的，不是用来炫技的。一个精心编排的页面入场动画 > 满屏的微交互。一个检查清单：动效有没有功能性？有没有尊重 prefers-reduced-motion？

适合谁用？

如果你：
– 经常需要做营销页、landing page
– 让 AI 做设计但不知道好不好
– 想建立自己的视觉判断标准

这套 Skill 值得存一份。它的文档非常详细，光是那个评分框架本身就值回「阅读时间」。

GitHub：https://github.com/LumenHelixLab/187WEB

GitHub: https://github.com/LumenHelixLab/187WEB