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.
Elite Agency Techniques
npx skills add wondelai/skills/top-design --global This skill is compatible with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent, and other agentskills.io-compatible agents.
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.
Key concepts from Elite Agency Techniques your agent applies
Visual Storytelling
Guide users through a narrative with intentional pacing, layout shifts, and typographic moments.
Scroll-Driven Animation
Use scroll position to trigger transitions, parallax, and reveal sequences that feel cinematic.
Whitespace as Design
Leverage generous whitespace to create focus, elegance, and a sense of luxury.
Typographic Drama
Use oversized type, mixed serif/sans-serif, and kinetic text to create visual impact.
Micro-Interactions
Add subtle cursor effects, hover states, and transitions that reward exploration.
When to use Top Design — and when not to
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.
Example prompts for the Top Design skill
Design a hero section with cinematic scroll reveal using top-design skill
Landing pageAdd custom cursor and magnetic button effects to my portfolio using top-design skill
Creative enhancementCreate a case study page with scroll-driven storytelling using top-design skill
PortfolioMake my marketing site feel like a premium agency built it using top-design skill
Design directionTop Design vs the other Design & UX skills
All 9 Design & UX skills are free and install the same way — the only question is which framework fits the job in front of you.
| Skill | Based on | Best for |
|---|---|---|
| Refactoring UI | Refactoring UI — Adam Wathan & Steve Schoger | Practical UI design system |
| iOS HIG Design | Human Interface Guidelines — Apple | Native iOS app design guidelines |
| UX Heuristics | Don’t Make Me Think — Steve Krug & Jakob Nielsen | Usability evaluation and principles |
| Web Typography | On Web Typography — Jason Santa Maria | Web typography principles and implementation |
| Design of Everyday Things | The Design of Everyday Things — Don Norman | Foundational design principles: affordances, signifiers, feedback |
| Top Design | Elite Agency Techniques — Locomotive, Studio Freight, AREA 17 | Award-winning 10/10 web design |
| Lean UX | Lean UX — Jeff Gothelf & Josh Seiden | Collaborative, experiment-driven UX design |
| Microinteractions | Microinteractions — Dan Saffer | Designing details that delight users |
| Steve Jobs Design Review | Steve Jobs — Walter Isaacson | Jobs-style reviews: ruthless simplicity, focus, binary verdicts |
Frequently asked questions
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.
Guides that use this skill
Install Top Design
Free, open-source, and ready in 30 seconds.
npx skills add wondelai/skills/top-design --global MIT Licensed · Works with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent & other agentskills.io agents · No account needed
Don’t guess your AI engineering level.
Measure it.
AI Developer Scorecard
How production-grade is your AI engineering?
Twenty-five questions across the practices that separate vibe-coding from production-grade engineering. Instant score, per-section breakdown, and a 30/60/90-day playbook.
Score 0–75 · 30/60/90-day playbook Score yourself For CTOs & foundersCTO Scorecard
Is your engineering team ready for AI at scale?
Twenty-five questions on how your org adopts AI — adoption, governance, automation, and ROI. See where you sit on the path from Reactive to Strategic Leader.
Score 0–75 · Reactive → Strategic Leader Score your orgWe build the skills you already use. Now we’ll build yours.
Sprints from $3K · shipped to production, or you don’t pay the final milestone.