Top Design
Award-winning 10/10 web design
Create award-winning, 10/10 web designs inspired by elite agencies like Locomotive, Studio Freight, and AREA 17. This skill gives your AI agent techniques for premium visual storytelling, scroll-driven animations, and distinctive creative direction.
npx skills add wondelai/skills/top-design --global Elite Agency Techniques Locomotive, Studio Freight, AREA 17
02 What it is
What is the Top Design skill?
Distilled from how agencies like Locomotive, Studio Freight, and AREA 17 work, Top Design is the skill for the last two points — the gap between a site that looks professional and one that gets shared. It pushes your agent toward a signature moment, a dramatic type scale, custom easing curves, and motion that never leaves transform and opacity.
03 Key concepts
Five principles your agent applies.
Drawn from Elite Agency Techniques — not advice it repeats back to you, but decisions it makes while it works.
04 Fit
When to use it, and
when not to.
four symptoms it fixes, and four it doesn't.
Reach for it when
Your landing page is competent and completely forgettable, and adding animation hasn’t changed that.
You are building a portfolio, launch, or brand site where being memorable is the actual requirement.
Every section fades in identically because your agent reached for the default easing curve again.
You want a page people screenshot, and you have the performance budget to pay for it.
Reach for something else when
The fundamentals are not in place. run Refactoring UI first; drama over broken hierarchy is just louder.
It is a dense internal tool where scroll choreography gets in the way. UX Heuristics is the right lens.
The message is the weak part, not the visuals. StoryBrand Messaging and Made to Stick come first.
You are optimising conversion rate. CRO Methodology tests against revenue instead of taste.
05 Prompts
Say it like this.
Name the skill at the end of a prompt and the agent applies the framework rather than a vibe. Or say nothing — it loads on its own when a task matches.
Design a hero section with cinematic scroll reveal using top-design skill
Add custom cursor and magnetic button effects to my portfolio using top-design skill
Create a case study page with scroll-driven storytelling using top-design skill
Make my marketing site feel like a premium agency built it using top-design skill
06 About the source
07 Same stack
The stack it sits in.
Nine Design & UX skills. Most people run two: this one, and whichever fits the next problem.
All Design & UX skills08 Questions
Before you install.
How do I install the Top Design skill?
Run npx skills add wondelai/skills/top-design --global. It takes about 30 seconds and needs no account. The Top Design skill then works in Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw and Hermes Agent — anything that reads the open agentskills.io format — and your agent loads it on its own when a task calls for it. It is free and MIT-licensed, and the source is at https://github.com/wondelai/skills.
Which book is the Top Design skill based on?
It packages Elite Agency Techniques by Locomotive, Studio Freight, AREA 17 — award-winning digital agencies and Awwwards honorees. The skill distils the book's method into instructions your agent follows while it works, covering visual storytelling, scroll-driven animation and whitespace as design. It sits in the Design & UX part of the library.
Is this just adding scroll animations?
Motion is one of five levers and rarely the one that matters most. The others are typography at a scale most sites never attempt, composition that breaks the centred default, a color system that avoids pure black and the purple-to-blue gradient every generated site reaches for, and the detail work in hover, cursor, and transition states. The signature moment is a composition decision before it is an animation one.
Will it wreck my performance?
It can, which is why the skill constrains itself: animate transform and opacity only, hold 60fps, keep parallax off text. What it does not budget for you is the rest — weighted-scroll libraries, display faces, full-bleed media, WebGL. Those are real costs on a mid-range phone. Decide the budget first, and pair this with High Perf Browser if the page has to be fast as well as striking.
Can it get my site featured on Awwwards?
No skill can promise that, and anyone claiming otherwise is selling something. Those awards are judged by people weighing originality and concept, and the concept is yours. What this gets you is the craft floor every featured site shares — considered type, custom easing, intentional composition, no default anything. That removes the reasons a site gets dismissed. It does not supply the idea that gets it noticed.
What about users who don’t want all that motion?
Ask for it explicitly, in the same prompt. Heavy scroll effects are hostile to people with vestibular sensitivity, and a prefers-reduced-motion path that keeps the layout intact while dropping the choreography is the standard answer. The skill’s motion is decorative rather than load-bearing, so it degrades cleanly — but it degrades because you asked, not by default.
09 Guides that use it
Put it to work.
Long-form playbooks where this skill does part of the job.
One skill, one command.
Install Top Design, or the whole stack.
npx skills add wondelai/skills/top-design --global MIT licensed · Claude, Claude Code, Codex, Cursor, OpenClaw, Hermes · No account