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

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

核心定位

解决"AI Look"问题：蓝紫渐变、统一卡片网格、border-radius: 12px、Inter 字体、居中布局——所有 AI 前端看起来都一样。Web Designer Plugin 注入真实设计思维，让 AI 按 award 级网站的标准工作。

决策框架

激活后引导 AI 经过6 个步骤：

1. MOOD — 情感调性（calm/energetic/luxurious/playful/authoritative）
2. PALETTE — 配色（从 mood 推导）
3. TYPE — 字体策略
4. LAYOUT — 服务内容的节奏
5. MOTION — 什么需要动，为什么
6. 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）
• 宽色域 P3 强调色（Superlist）
• 视角 app 截图（Daylight Computer）
• 环境径向光效（Superlist）
• ……等 34 个更多

5 种配色原型

1. Monochrome + Single Accent — SVZ、April Ford
2. Warm Neutrals — VOUS Church、Hardgraft
3. Bold Brand — De La Calle、Magic Spoon
4. Dark Luxury — SVZ、Chiara Luzzana
5. Sophisticated Minimal — Ready.so、Slite、Calm

10 个 Anti-Pattern 检查项

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

安装

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

数据

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

定位

• Web Designer Plugin：让页面有设计方向