skill
design-inspiration-skills
Clean-room studies of award-winning websites, packaged as an agent skill
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/raphaelbleier/design-inspiration-skills itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
README
synced Oct 26, 2026Ask a coding agent for an "award-winning" site and you get a hero, three cards and a gradient. The agent has never seen why a Site of the Year works: the type contrast, the one easing curve used everywhere, the single WebGL idea that carries the whole identity.
This repo gives it that knowledge. Each study measures one Awwwards winner (Site of the Year, Site of the Month, Developer Award, Site of the Day, 2023 to 2026) and writes it down in a form an agent can reuse:
| Design tokens | Palette with roles, type scale, fluid root logic, spacing, radii, as CSS variables |
| Motion spec | Every animation with trigger, duration, easing curve and stagger, plus the code that drives it |
| Why it works | The 3 to 5 decisions that make it award-level, and the anti-patterns it avoids |
| Rebuild | A runnable Vite project, written from scratch with fictional content and generated images |
The studies
Browse them with filters by category and technique in the gallery, where every rebuild runs live.
Install
Two skills, so you choose how much lands in your project:
| Skill | Contains | Size |
|---|---|---|
design-inspiration | Index plus every study: tokens, motion spec with code excerpts, why it works | under 1 MB |
design-inspiration-rebuilds | The runnable Vite rebuild with images for every study | about 64 MB |
Any agent (Agent Skills CLI), pick one or both when prompted:
npx skills add raphaelbleier/design-inspiration-skills
# non-interactive
npx skills add raphaelbleier/design-inspiration-skills --skill design-inspiration
Claude Code plugin: add the marketplace once, then install one or both plugins:
/plugin marketplace add raphaelbleier/design-inspiration-skills
/plugin install design-inspiration@design-inspiration-skills
/plugin install design-inspiration-rebuilds@design-inspiration-skills
The same from a terminal: claude plugin marketplace add raphaelbleier/design-inspiration-skills,
then claude plugin install design-inspiration@design-inspiration-skills.
How an agent uses it
- The skill triggers when you ask for a site that should feel premium, award-level or less generic.
- The agent opens
INDEX.mdand picks 1 to 3 studies by industry or by the technique it needs (webgl,page-transitions,text-reveal, ...). - It reads the tokens, the motion spec and the reasoning, then applies the principles to your brand: one signature effect, a restrained supporting system, the study's easing as a starting value.
- When it needs a complete implementation, it opens the rebuild file the motion spec names.
Clean-room policy
- Not affiliated with Awwwards or with any studio whose work is studied here.
- No original code, images, fonts or copy are included. Every rebuild is written from scratch, uses fictional names and copy, AI-generated images and open-source font substitutes.
- Every study credits and links the original site and its creators.
- Are you the creator of a studied site and want it removed? Open an opt-out request and it will be removed.
Contributing
Each study lives in two places: the breakdown in skills/design-inspiration/studies/<category>/<slug>/
and the rebuild in skills/design-inspiration-rebuilds/<category>/<slug>/. node scripts/studies.mjs
validates every study (required sections, code excerpts, no reference to the original domain, no
file copied from a capture of the original) and regenerates the index and the table above.
License
Code: MIT. Original designs remain the intellectual property of their creators.