Home / abc-xiaoxuan / award-level-web-design · GitHub

award-level-web-design SKILL.md skillA

award-level-web-design from abc-xiaoxuan/award-level-web-design is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

Install it, pinned
mdr add abc-xiaoxuan/award-level-web-design/award-level-web-design@git:20261015.1b14758

Pins git:20261015.1b14758 in mdr.lock. Pin the fingerprint instead.

Audit grade
A, 17 of 17 checks passed
Kind
SKILL.md skill
Repository
abc-xiaoxuan/award-level-web-design
Path
skills/award-level-web-design/SKILL.md
Versions recorded
5
Latest version
git:20261015.1b14758, committed Oct 15, 2026
First version recorded
Oct 13, 2026
Size
14,970 bytes
Repository stars
8
License
MIT

以 Awwwards / Webby Awards / FWA 获奖网站为品质标准来设计和实现网页，并在完成后按排版、留白、视觉层级、色彩、动效、微交互、响应式、原创性、内容九个维度做"渲染—截图—自检—修改"的循环优化，直到没有明显可提升之处。只要用户要做落地页、官网、作品集、产品页、活动页、个人主页、HTML 页面或前端界面，或提到"高级感""好看一点""设计感""获奖级""Awwwards 风格""精致""别像模板"，或要求打磨/重做已有页面的视觉，就使用这个技能——即使用户没有明确说"获奖级"。不适用于：纯后端或逻辑 bug 修复、数据图表本身的配色与绘制、PPT/海报等非网页设计。.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# 获奖级网页设计与自检迭代

目标：做出的页面放到 Awwwards / Webby / FWA 的提名列表里不显得突兀。评委看重的是**一个清晰的创意概念被执行到每个细节**——而不是堆砌特效。"能用"和"整齐"只是起点。

"获奖级"在这里有明确的评分框架：维度按 Awwwards 的 Design / Usability / Creativity / Content 加权，每一档分数都有可观察的锚点，见 [references/award-criteria.md](references/award-criteria.md)。借鉴的是获奖站的概念贯穿和执行精度，**不借鉴**为了炫技牺牲性能和可访问性的做法。

整个流程分三段：先定方向，再实现，最后用真实渲染结果反复自检优化。第三段是这个技能的核心，不要跳过。

## 1. 动手前：定一个设计概念

概念决定页面的上限，后面的自检只能修执行，修不了想法。所以写代码之前，先完成下面三步，并把结果告诉用户。

### 1.1 发散：写出三个方向

第一个想到的方向，往往就是最平均的那个。先读 [references/art-direction.md](references/art-direction.md)，写出 3 个**来自不同美术方向**的方向，每个包含：
- 一句话概念，用这个句式："这个页面是关于 ___，它给人 ___ 的感觉，因为 ___。"（例："一家烘焙店的页面，像一张慢慢写满的烘焙记录卡，因为每一锅豆子都有自己的曲线"）；
- 美术方向和叙事结构（从参考里各选一个）；
- 3–5 个视觉关键词；
- 签名时刻是什么。

如果需要参考现有获奖站，先读 [references/deepdive.md](references/deepdive.md)，只提取可验证的原则，不复制它的布局、颜色或动效参数。

三个方向不能只是换了配色，美术方向必须不同。选定一个，用一句话说明为什么不选另外两个，然后为它写出节拍表（每屏的目的和唯一的视觉事件）。用户明确给了方向时，可以跳过发散，但节拍表仍然要写。

### 1.2 翻译：把概念落实成设计决策

把选定的概念拆成下面这张表，每一行都要能从概念推导出来。说不出理由的选择，就是模板感的来源。

| 层 | 决策 | 为什么服务于概念 |
| --- | --- | --- |
| 字体 | 一个有性格的展示字体 + 一个高可读的正文字体。中文页面按 [references/cjk-type.md](references/cjk-type.md) 选字体，并确定加载方案 | |
| 色彩 | 一个主色调 + 中性色阶 + 最多一个强调色，用 CSS 变量定义 | |
…

Read the whole file at its exact version.

How to install

The exact contents, by fingerprint
mdr add abc-xiaoxuan/award-level-web-design/award-level-web-design@sha256:cce84ed8fc4f6b14

The line at the top of this page pins the label git:20261015.1b14758, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_gvut7bcdi2e6i75q.svg)](https://markdownregistry.com/a/art_gvut7bcdi2e6i75q)

1 badge image fetches in 30 days. What the badge shows.

Versions

The registry has recorded 5 versions of this file, between Oct 13, 2026 and Oct 15, 2026, more than one a day.

versioncommittedcommitsizeaudit
git:20261015.1b14758 latest2026-10-15 1b14758 14,970 BA view · diff
git:20261014.1f089712026-10-14 1f08971 13,623 BA view · diff
git:20261014.99bcc1a2026-10-14 99bcc1a 12,876 BA view · diff
git:20261013.62533642026-10-13 6253364 8,213 BA view · diff
git:20261013.551b1af2026-10-13 551b1af 6,831 BA view

Audit of the latest version

A  17 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (14970 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters
  • pass: No link to a raw IP address
  • pass: No script tag

Source

GitHub

abc-xiaoxuan/award-level-web-design · 8 stars · license MIT · pushed 2026-10-15 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_gvut7bcdi2e6i75q
GET https://markdownregistry.com/api/v1/resolve?ref=abc-xiaoxuan/award-level-web-design/award-level-web-design
GET https://markdownregistry.com/api/v1/blob/cce84ed8fc4f6b14e23b8dcf67ff1590ddf2c7d10c31192b3dfed52726fa56c3

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

Browse by kind, by grade A, or by owner.