Web Designer Plugin（48个Award级设计模式）

"Would this get featured on Awwwards?" — 给 AI 配一个网页设计总监。48 个设计模式，参考 38 个优秀网站，覆盖排版/配色/动效/3D/页面节奏。

Key Points

核心定位：解决"AI Look"问题——蓝紫渐变、统一卡片网格、border-radius: 12px、Inter 字体、居中布局
决策框架：MOOD → PALETTE → TYPE → LAYOUT → MOTION → SIGNATURE

6步决策框架

MOOD — 情感调性（calm/energetic/luxurious/playful/authoritative）
PALETTE — 配色（从 mood 推导）
TYPE — 字体策略
LAYOUT — 服务内容的节奏
MOTION — 什么需要动，为什么
SIGNATURE — 让设计被记住的那一件事

48 个设计模式

涵盖：

3D 卡面 tilt跟随光标（SVZ Design）
描边/笔画字体（VOUS Church）
Clip-path 图片揭示（SVZ Design）
物理 3D 按钮（Pierre-Louis Labonne）
双色分割标题（Superlist）
撕纸分割线（De La Calle）
巨大压缩 hero 文字（DONUTS）
毛玻璃导航（Michael Kors）
粘滞滚动电影场景（The Goonies）
级联菜单动画（207ouest）
无限 logo滚动（Superlist）
……等 34 个更多

10 个 Anti-Pattern 检查项

无蓝紫渐变背景
无统一间距的卡片网格
无全居中 hero
无 font-family: Inter 通篇
无 opacity: 0.8 hover 效果
无 box-shadow: 0 4px 6px 所有卡片

安装

bash

/plugin marketplace add MickeyAlton33/web-designer-plugin
/plugin install web-designer

数据

43 Stars · 6 Forks
10 个示例站点（GIF +截图）

products/taste-skill — AI前端防丑Skill
patterns/ui-polish — UI精致打磨

Sources

GitHub MickeyAlton33/web-designer-plugin (2026-06-04)