top-design

仓库: wondelai/skills
安装量: 374
排名: #2536

安装

npx skills add https://github.com/wondelai/skills --skill top-design
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 Philosophy
The agencies you're emulating share these traits:
Every pixel is intentional — nothing default, nothing accidental
Typography IS the design — not decoration, but architecture
Motion creates emotion — animation serves narrative, not novelty
White space is a weapon — tension through restraint
Performance is non-negotiable — 60fps or nothing
What separates 10/10 from 8/10:
8/10: Good typography, nice colors, smooth animations
10/10: Typography that makes you gasp, colors that feel invented, animations that tell stories
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
Score
Level
Description
0-2
Amateur
Default fonts, no hierarchy, generic layout, template feel
3-4
Basic
Decent typography, some hierarchy, but forgettable
5-6
Competent
Good fundamentals, clean execution, but lacks soul
7-8
Professional
Strong typography, intentional motion, clear POV
9
Exceptional
Signature moments, memorable details, near-flawless craft
10
World-class
Would win Awwwards SOTD, defines new standards
Category Scoring (Each 0-10)
TYPOGRAPHY (Weight: 25%)
Score
Criteria
0-3
System fonts, uniform scale, default tracking
4-6
Premium fonts, some scale contrast, basic hierarchy
7-8
Dramatic scale contrast (10:1+), perfect tracking, optical alignment
9-10
Typography IS the design—gasping moments, custom/variable fonts, type as architecture
VISUAL COMPOSITION (Weight: 25%)
Score
Criteria
0-3
Centered everything, equal spacing, rigid grid, no tension
4-6
Some asymmetry, decent spacing rhythm, basic depth
7-8
Intentional grid breaks, layered elements, strong negative space
9-10
Magnetic compositions, unexpected scale shifts, elements that breathe and surprise
MOTION & INTERACTION (Weight: 20%)
Score
Criteria
0-3
No animation or default/linear motion
4-6
Basic transitions, some scroll effects
7-8
Custom easing, orchestrated reveals, purposeful parallax
9-10
Motion that tells stories, perfectly timed choreography, scroll feels invented
COLOR & ATMOSPHERE (Weight: 15%)
Score
Criteria
0-3
Random colors, pure black/white, no mood
4-6
Cohesive palette, some atmosphere
7-8
Colors feel owned, contextual shifts, intentional contrast
9-10
Colors feel invented for this project, atmosphere you can feel
DETAILS & CRAFT (Weight: 15%)
Score
Criteria
0-3
Default cursors, no hover states, generic everything
4-6
Basic hover states, some custom elements
7-8
Custom cursor, magnetic buttons, branded selection colors
9-10
Every micro-detail considered—focus states, loading, empty states, scroll indicators
Quick Score Formula
Total = (Typography × 0.25) + (Composition × 0.25) + (Motion × 0.20) + (Color × 0.15) + (Details × 0.15)
The 10/10 Difference: What Makes Design Exceptional
Typography That Commands Attention
The Gasping Moment Test:
If someone scrolls past your hero and doesn't pause, your typography isn't working.
Scale Contrast That Shocks:
WEAK: 48px headline / 16px body (3:1 ratio)
GOOD: 96px headline / 16px body (6:1 ratio)
GREAT: 180px headline / 14px body (13:1 ratio)
10/10: Viewport-filling type that makes body text feel intimate
Font Selection Hierarchy:
DISPLAY/HERO: The statement maker
├── Custom/Variable fonts (preferred)
├── Foundry fonts: Pangram Pangram, Dinamo, Grilli Type, Klim, Commercial Type
├── Premium Google: Space Grotesk, Instrument Serif, Fraunces
└── NEVER: Inter, Roboto, Arial, system-ui (these are for apps, not experiences)
BODY: The workhorse
├── Match personality to display font
├── Legibility at 16-18px minimum
└── Consider: Söhne, GT America, Suisse, Neue Montreal
Typography Principles:
Massive scale contrast: 200px hero + 14px body
Negative tracking on large type (-0.02em to -0.05em)
Generous line-height for body (1.5-1.7)
Tight line-height for display (0.85-1.0)
Optical alignment over mathematical alignment
Text that breaks beautifully—control every line break on headlines
Variable fonts for weight animation on hover
The Typography Stare Test:
Blur your eyes. Does the type hierarchy still read? If everything looks the same importance when blurred, you've failed.
Composition That Creates Tension
The Grid Paradox:
Master the grid so you can break it with intention. Every violation should feel deliberate, not accidental.
White Space as a Weapon:
Amateur: Fills every gap with content
Pro: Uses padding liberally
10/10: White space creates tension, makes you lean in, controls pacing
Asymmetric Balance:
/ Don't center—create visual tension /
.hero-title
{
/ Offset from center, aligned to grid but not centered /
margin-left
:
8.33
%
;
/ One column offset /
max-width
:
83.33
%
;
/ 10 of 12 columns /
}
/ Let images bleed and overlap /
.hero-image
{
margin-right
:
-5
vw
;
/ Extend beyond container /
width
:
calc
(
100
%
+
5
vw
)
;
}
Unexpected Scale Shifts:
Full-viewport hero → intimate text section → massive single word → dense grid
The rhythm of density and breathing room creates a reading experience
The Screenshot Test:
Would someone screenshot this section and share it? If not, you're missing signature moments.
Motion That Creates Emotion
The Three Laws of Elite Motion:
Purpose Over Decoration
Every animation answers "Why does this move?"
Custom Curves, Never Linear
:
ease
and
linear
are banned
Orchestration Over Isolation
Elements animate in relationship, not independently Custom Easing (Agency Standards): :root { / These are your only easings / --ease-out-expo : cubic-bezier ( 0.16 , 1 , 0.3 , 1 ) ; --ease-out-quart : cubic-bezier ( 0.25 , 1 , 0.5 , 1 ) ; --ease-in-out-expo : cubic-bezier ( 0.87 , 0 , 0.13 , 1 ) ; / NEVER use: ease, ease-in, ease-out, linear / } Page Load Choreography: Frame 0-200ms: Background/structure fades in Frame 200-600ms: Hero title words slide up (staggered 80ms) Frame 400-800ms: Hero subtitle fades up Frame 600-900ms: Navigation items cascade down Frame 800-1200ms: Supporting elements reveal Scroll-Triggered Sequences: Elements reveal as they enter viewport (not all at once) Parallax used sparingly and only on non-essential elements Pinned sections for storytelling moments Horizontal scroll for galleries (with clear affordance) The Smooth Scroll Standard: Default browser scroll is unacceptable. Use Lenis or Locomotive Scroll. Color That Feels Invented Approach Types: MONOCHROMATIC TENSION ├── 95% one dominant color/neutral ├── 5% accent that POPS └── Example: Locomotive (cream + black + orange spark) BOLD SIGNATURE ├── Own a color combination ├── Make it unmistakable └── Example: Studio Freight (black + cream + rust) CONTEXTUAL SHIFTING ├── Color responds to content ├── Sections have distinct palettes └── Example: AREA 17 (adapts to each client case study) Technical Implementation: :root { / Never just 'black' or 'white' / --color-dark :

0a0a0a

; / Slightly warm black / --color-light :

fafaf9

; / Slightly warm white / --color-accent :

ff4d00

;
/ A color you OWN /
/ Functional hierarchy /
--color-text-primary
:
var
(
--color-dark
)
;
--color-text-secondary
:
rgba
(
10
,
10
,
10
,
0.6
)
;
--color-text-tertiary
:
rgba
(
10
,
10
,
10
,
0.4
)
;
--color-surface
:
var
(
--color-light
)
;
--color-border
:
rgba
(
10
,
10
,
10
,
0.1
)
;
}
The Squint Test:
Squint at your design. Do the important things stand out through contrast alone?
Details That Signal Craft
The Details Checklist (All Required for 10/10):
CURSOR
☐ Custom cursor that reflects brand personality
☐ Cursor changes on interactive elements
☐ Magnetic effect on buttons (subtle)
SELECTION
☐ Custom ::selection color that's on-brand
☐ Selection works well on all backgrounds
HOVER STATES
☐ Every link has a considered hover state
☐ Images have scale or overlay treatment
☐ Cards transform meaningfully
FOCUS STATES
☐ Focus states are visible and beautiful
☐ Focus indicators match brand aesthetic
☐ Tab order is logical
LOADING STATES
☐ Custom skeleton/loading animation
☐ Progress indicators are designed
☐ First contentful paint is instant
EMPTY STATES
☐ Empty states are designed, not default
☐ Error states are helpful and branded
☐ 404 pages are memorable
MICRO-TYPOGRAPHY
☐ Smart quotes (" " not " ")
☐ Proper apostrophes (' not ')
☐ En/em dashes where appropriate
☐ No orphans on headlines
☐ text-wrap: balance on key text
The Signature Moment
Every 10/10 project has at least one moment that makes people stop and share. Design this first.
Types of Signature Moments:
A hero animation that's never been seen before
Typography so bold it becomes the visual
An interaction that delights unexpectedly
A scroll sequence that tells a story
A transition that feels like magic
Questions to Identify Your Signature:
What will people screenshot?
What will they describe to colleagues?
What will they try to reverse-engineer?
What makes this unmistakably THIS project?
Design Process
1. Concept First, Code Second
Before any code, define:
BRAND ESSENCE: What single word captures the soul?
VISUAL TENSION: What opposing forces create interest?
SIGNATURE MOMENT: What will people screenshot and share?
TECHNICAL AMBITION: What pushes the browser's limits?
2. Design the Signature Moment First
Don't start with the header. Start with the thing that defines the experience. The header can be solved later.
3. Typography Sets Everything
Choose your display typeface first. Let it dictate:
The color palette mood
The animation style
The spacing rhythm
The overall personality
4. Motion Is Not Polish
Prototype animations early. Motion design happens alongside visual design, not after.
5. Ship With Restraint
3 things perfect beats 10 things mediocre. Cut ruthlessly.
Reference Files
Consult these for detailed implementation:
references/typography.md
Font pairing strategies, type scale systems, advanced CSS typography
references/animation-patterns.md
Scroll animations, page transitions, micro-interactions with code
references/layout-systems.md
Grid frameworks, breakpoints, responsive patterns
references/technical-stack.md
Libraries, tools, performance optimization
references/case-studies.md
Agency technique breakdowns (Locomotive, Studio Freight, AREA 17, Hello Monday, etc.) Quality Checklist Before considering any design complete: TYPOGRAPHY □ Display font makes a statement (not Inter/Roboto/Arial) □ Scale contrast is dramatic (min 10:1 ratio) □ Tracking adjusted for size (-0.02em to -0.05em on large type) □ Line-height optimized per use case (0.9 display, 1.6 body) □ No orphans/widows on key headlines □ Variable font with weight animation (if applicable) COMPOSITION □ Grid exists but is strategically broken □ White space creates tension and pacing □ Hierarchy is instantly clear from across the room □ Asymmetric balance creates visual interest □ Elements overlap, bleed, or extend with intention □ Unexpected scale shifts create rhythm MOTION □ Page load has choreographed reveal (not all at once) □ Scroll feels custom (Lenis/Locomotive level) □ Custom easing on everything (expo.out, power4.out) □ Staggered animations create depth □ 60fps verified on target devices COLOR & ATMOSPHERE □ No pure black (#000) or pure white (#fff) □ Colors feel owned by this project □ Accent color creates moments of surprise □ Works in both light and dark contexts □ Contextual color shifts between sections (if applicable) DETAILS □ Custom cursor (if appropriate for the project) □ Selection colors are branded □ Focus states are beautiful AND accessible □ Loading states are designed □ Error/empty states are crafted □ Micro-typography is correct (smart quotes, proper dashes) SIGNATURE □ There is at least one screenshot-worthy moment □ Something would make another designer stop and inspect □ The project has a clear point of view PERFORMANCE □ Fonts subset and preloaded □ Images optimized (WebP/AVIF with fallbacks) □ Animations GPU-accelerated (transform/opacity only) □ No layout shifts (CLS near zero) □ LCP under 2.5s Anti-Patterns to Avoid TYPOGRAPHY CRIMES ✗ Inter, Roboto, Arial, or system-ui as primary typeface ✗ Uniform type scale (everything within 2x of each other) ✗ Default letter-spacing on headlines ✗ Line-height: 1.5 applied universally ✗ Type that doesn't command attention ANIMATION SINS ✗ Linear or ease easing anywhere ✗ Everything animated simultaneously ✗ Animations blocking interaction ✗ Parallax without clear purpose ✗ Default browser scroll ✗ Animations longer than 1.2s without reason COMPOSITION FAILURES ✗ Center-aligned everything ✗ Equal spacing everywhere ✗ Grid followed rigidly without breaks ✗ Mobile as afterthought ✗ No signature moments COLOR CRIMES ✗ Pure #000000 black ✗ Pure #ffffff white ✗ Random colors without system ✗ No clear accent ✗ Palette that could be any brand GENERIC TELLS (Instant 10/10 Disqualification) ✗ Purple/blue gradient hero sections ✗ "Hi, I'm [Name]" portfolio intros ✗ Floating cards with drop shadows ✗ Stock photography (unedited) ✗ Visible lorem ipsum ✗ Default form styles ✗ Generic 404 pages ✗ Cookie-cutter layouts ✗ Font Awesome icons (unmodified) AI SLOP (Immediate Rejection) ✗ ANY emoji in professional interfaces ✗ Purple-to-blue or purple-to-pink gradients (the "AI gradient") ✗ Generic "futuristic" glassmorphism everywhere ✗ Overly smooth, soulless illustrations (the "corporate Memphis" successor) ✗ Teal + coral + purple color schemes (every AI startup ever) ✗ "Clean and modern" that means "generic and forgettable" ✗ Gradients on everything because "it looks techy" ✗ Neon accents on dark backgrounds (cyberpunk cliché) ✗ Abstract blob shapes as decoration ✗ Particle effects without purpose ✗ "Magical" sparkle animations ✗ The same Figma community hero section everyone uses Implementation Notes Start with the signature moment — design the thing that defines the experience first Conceptualize desktop-first, build mobile-first — dream big, implement progressively Prototype animations early — motion is not a polish step, it's core to the design Test on real devices — simulators lie about performance and feel Ship with restraint — 3 things perfect beats 10 things mediocre Sweat the micro-details — craft lives in the 1% others skip Design the states — hover, focus, loading, empty, error all matter Own your constraints — every limitation is a design opportunity
← 返回排行榜