# Top Design > Award-winning 10/10 web design — an AI agent skill based on *Elite Agency Techniques* by Locomotive, Studio Freight, AREA 17. Published 2026-02-19 · Updated 2026-08-17 · Design & UX · Free and MIT-licensed Canonical: https://skills.wondel.ai/skills/top-design/ Source: https://github.com/wondelai/skills/tree/main/top-design **Install:** `npx skills add wondelai/skills/top-design --global` ## 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. ## About Locomotive, Studio Freight, AREA 17 Award-winning digital agencies and Awwwards honorees. Curated from the techniques of elite digital agencies — Locomotive (Awwwards Studio of the Year), Studio Freight (immersive WebGL experiences), and AREA 17 (design-driven digital products) — who consistently set the standard for web design excellence. ## Example prompts - Design a hero section with cinematic scroll reveal using top-design skill _(Landing page)_ - Add custom cursor and magnetic button effects to my portfolio using top-design skill _(Creative enhancement)_ - Create a case study page with scroll-driven storytelling using top-design skill _(Portfolio)_ - Make my marketing site feel like a premium agency built it using top-design skill _(Design direction)_ ## 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. ## Related - All Design & UX skills: https://skills.wondel.ai/skills/design/ - Refactoring UI: https://skills.wondel.ai/skills/refactoring-ui/ - iOS HIG Design: https://skills.wondel.ai/skills/ios-hig-design/ - UX Heuristics: https://skills.wondel.ai/skills/ux-heuristics/ - Web Typography: https://skills.wondel.ai/skills/web-typography/ - Design of Everyday Things: https://skills.wondel.ai/skills/design-everyday-things/ - Lean UX: https://skills.wondel.ai/skills/lean-ux/ - Microinteractions: https://skills.wondel.ai/skills/microinteractions/ - Steve Jobs Design Review: https://skills.wondel.ai/skills/steve-jobs-design-review/