GitHub

● Agent SkillClaude Code · Codex · Cursor · 30+ 工具MIT

让 AI 做出能拿奖的网页，by default.

以 Awwwards、Webby、FWA 获奖网站为标准：先定一个设计概念，再实现，然后真正打开浏览器截图，按八个维度打分、修改、再截图——直到挑不出明显问题。

$ npx skills add ABC-xiaoxuan/award-level-web-design -g

也可以用 Claude Code 插件市场或手动复制 安装。

01 / 工作方式

不是一次生成，
而是一轮一轮改出来的。

评委看的是一个清晰的概念被执行到每个细节，而不是特效堆得多不多。

  1. 01

    先定概念

    一句话创意、字体搭配、色彩、网格，以及至少一个让人记住的"签名时刻"。

    避开 AI 模板脸
  2. 02

    守住底线实现

    设计令牌、只动 transform/opacity、完整交互状态、AA 对比度、减弱动效偏好。

    375 → 1920 四档宽度
  3. 03

    截图—打分—修改

    桌面和手机截图，八个维度逐项打分，按影响排序修改后重新截图。全部 ≥ 9 分才停。

    脚本审计 + 2–3 轮
01排版02留白03视觉层级04色彩05动效06微交互07响应式08原创性
02 / 示例

三个方向，
三种完全不同的气质。

三套可交互的完整示例，点开页面体验各自的设计与细节。

栖木咖啡首屏：大号衬线标题 Slow roast, honest cup. 与烘焙曲线卡片打开页面 ↗
Example 01

栖木咖啡Independent coffee roaster

概念"一张烘焙记录卡"。暖纸色与 Fraunces 衬线，签名时刻是一条自动绘制、可拖动查看任意时刻温度的烘焙曲线。

FrauncesNoto Serif SCSVG 曲线
查看在线页面
间 Studio 首屏：巨大的细体汉字间与 SPACE IN BETWEEN打开页面 ↗
Example 02

间 StudioArchitecture studio

概念"图纸即界面"。可见的 12 栏发丝网格、尺寸标注与图签；悬停项目显示平面图，鼠标是带坐标读数的十字准线。

Archivo 可变宽度Noto Sans SC 100十字准线
查看在线页面
回声 Echo 首屏：暗色等高线背景与酸性绿标题打开页面 ↗
Example 03

回声 EchoAI voice notes

概念"声音留下的等高线"。暗色与酸性绿，背景等高线会绕开鼠标弯曲；下方是自动轮播的"录音 → 转写 → 整理"演示。

CanvasBricolage Grotesque自动轮播 Tabs
查看在线页面
03 / 安装

一行命令，
装进你的 AI 助手。

装好后不用特意调用：做落地页、官网、作品集，或者说"要高级感"时会自动启用。

npx 推荐

支持 Claude Code、Codex、Cursor 等 30+ 工具，自动放进对应目录。

npx skills add \ ABC-xiaoxuan/award-level-web-design -g

Claude Code 插件 Plugin

在 Claude Code 里依次输入这两行。

/plugin marketplace add ABC-xiaoxuan/award-level-web-design /plugin install award-level-web-design@award-level-web-design

手动复制 Manual

把 skills/award-level-web-design/ 整个文件夹复制过去。

Claude Code → ~/.claude/skills/ Codex → ~/.agents/skills/