top-design

Installation
Summary

Award-winning digital experiences with dramatic typography, intentional motion, and pixel-perfect craft.

  • Covers seven core pillars: typography as architecture (10:1+ scale contrast), asymmetric composition with white space as a weapon, custom-eased scroll-driven animations, invented color palettes, performance-optimized motion (60fps only), and micro-interaction details that signal craft
  • Includes a 0-10 scoring rubric weighted across typography (25%), composition (25%), motion (20%), color (15%), and details (15%), with specific criteria for reaching Awwwards-level work
  • Provides design process guidance: identify signature moments first, let typography dictate the entire visual system, prototype motion early, and ship with restraint rather than feature bloat
  • References seven detailed implementation guides covering font pairing, animation patterns, grid systems, technical stack optimization, and technique breakdowns from award-winning agencies (Locomotive, Studio Freight, AREA 17, Active Theory, Hello Monday)
SKILL.md

Top-Design: Award-Winning Digital Experiences

Create websites and applications at the level of world-class digital agencies. This skill embodies the craft of studios that consistently win FWA, Awwwards, CSS Design Awards, and Webby Awards.

Core Principle

Every pixel is intentional -- nothing default, nothing accidental. The agencies you are emulating -- Locomotive, Studio Freight, AREA 17, Active Theory, Hello Monday -- share a common DNA: typography IS the design (not decoration, but architecture), motion creates emotion (animation serves narrative, not novelty), white space is a weapon (tension through restraint), and performance is non-negotiable (60fps or nothing).

The foundation: What separates 10/10 from 8/10 is not incremental improvement but a qualitative leap. An 8/10 design has good typography, nice colors, and smooth animations. A 10/10 design has typography that makes you gasp, colors that feel invented for this specific project, and animations that tell stories. The gap is not skill -- it is intention. Every decision at the 10/10 level answers the question: "Does this serve the experience, or is it just filling space?"

Scoring

Goal: 10/10. When reviewing or creating digital experiences, rate them 0-10 using the rubric below. A 10/10 means the design would be featured on Awwwards. Always provide the current score and specific improvements needed to reach 10/10.

Scoring Rubric

Related skills

More from wondelai/skills

Installs
2.4K
Repository
wondelai/skills
GitHub Stars
1.0K
First Seen
Feb 2, 2026