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 --global

This skill is compatible with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent, and other agentskills.io-compatible agents.

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

Put it to work

Guides that use this skill

Create · Website

How to Create a New Website with AI Skills

Read guide

Install Top Design

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

npx skills add wondelai/skills/top-design --global

Browse on GitHub See All Skills

MIT Licensed · Works with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent & other agentskills.io agents · No account needed

Prove it

Don’t guess your AI engineering level.
Measure it.

25 questions · ~8 min · Free

For hands-on developers

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 & founders

CTO 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 org