awwwards skill
Awwwards is not a style. It's a scoring system.
This skill encodes that system as a build method your coding agent can actually follow.
Live demo → · Read SKILL.md · Browse the 19 references
curl -fsSL https://raw.githubusercontent.com/SandroHub013/awwwards-skill/main/install.sh | sh
# Windows PowerShell
irm https://raw.githubusercontent.com/SandroHub013/awwwards-skill/main/install.ps1 | iex
# no pipe to shell
git clone https://github.com/SandroHub013/awwwards-skill.git ~/.claude/skills/awwwards
# as a versioned Claude Code plugin, from inside Claude Code
/plugin marketplace add SandroHub013/awwwards-skill
/plugin install awwwards@awwwards-skill
All routes install to ~/.claude/skills/awwwards. Re-run the one-liner to update.
Remove with rm -rf ~/.claude/skills/awwwards.
Then restart Claude Code (or /reload-skills) and say:
/awwwards read the workflow
"build me an awwwards-level site for my studio" build
"score my site against the Awwwards criteria" audit an existing site
Why this exists
Most "make it look premium" prompts produce the same competent, forgettable page. Awwwards
publishes the actual mechanism, and it changes what you should optimise for:
| Criterion | Weight | |
|---|
| Design | 40% | hierarchy, type system, colour intent, spacing, states, consistency |
| Usability | 30% | navigation, speed, responsiveness, accessibility, Core Web Vitals |
| Creativity | 20% | one idea, one signature moment, original interaction |
| Content | 10% | real copy, real imagery, art direction and content authored together |
At least 18 jurors, and the 3 most extreme scores are dropped automatically.
Two consequences drive every rule in this skill:
- You don't win because one juror loves it. The outliers are discarded, so you win by
giving no juror a reason to mark you down. Usability is 30% and objectively
measurable, which is why it quietly eliminates the most beautiful sites.
- One signature moment beats twenty effects. Every recent Site of the Day has a single
interaction people describe out loud. Scattered effects read as noise and cost points in
Design and Usability.
Thresholds: ≥ 6.5 Honorable Mention (jury and users, independently) · highest of the
day Site of the Day · > 7 Developer Award, re-scored by a developer jury.
Built with it
Eight demo sites, each produced by running the method end to end, each scored against the
same rubric with the numbers printed rather than implied:
| |
|---|
| wonk | A Fraunces specimen for one number: WONK defaults to 1, so the typeface ships crooked. Editorial, no WebGL. Score |
| descent | 8,556 real earthquakes of 2025 at their own depth — a quake map is the top face of a solid. WebGL, no webfont. Score |
| nothing here was filmed | A reel whose footage came out of a model — the scroll bar is the film's transport, and every prompt, cost and byte is printed. Video-first. Score |
| abyss | A real-time water column. The dark is the default and the pointer aims the lamp. Four draw calls, zero textures, no assets at all. Score |
| ichi | A samurai drawing a sword under cherry blossom, performed by the scroll bar. No model file — a bone hierarchy and a recursion. Score |
| il sistema solare | A primary-school lesson: every drawing of the solar system is wrong, and this one says by how much. Real JPL data, in Italian. Score |
| gamut | Scroll, and every colour your display cannot emit drains to grey. The 1931 measurements, 31 KB, no libraries. |
None uses stock imagery or placeholder copy. The first two are measured from primary
sources: a font binary and the USGS catalog. The third is generated footage, which the
skill would otherwise forbid — so its provenance is the subject of the page rather than a
line in the footer. The fourth has no assets to source: every frame is arithmetic, and
the renderer counters are read live on the page rather than typed. The last reads the CIE
colour-matching functions and derives every matrix and percentage it prints from them,
including the one in its own headline. The last builds its geometry from the rules the
masons set out with, and prints the numbers it chose separately from the ones it was given.
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
