Design & UX

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 Locomotive, Studio Freight, AREA 17

Elite Agency Techniques

by Locomotive, Studio Freight, AREA 17

Install this skill

npx skills add wondelai/skills/top-design

Key Concepts

What your agent learns

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.

About the Source

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

Try these with the skill installed

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

Install Top Design

Free, open-source, and ready in 30 seconds.