top-design
top design
What it does
- Massive scale contrast is non-negotiable -- minimum 10:1 between display and body (e.g., 180px / 14px); viewport-filling type at the extreme
- Negative tracking on large type (-0.02em to -0.05em) tightens display into cohesive units; body needs generous line-height (1.5-1.7)
- Variable fonts enable weight animation on hover without layout shift
- Optical alignment beats mathematical alignment -- adjust visually, not just numerically
- Control every line break on headlines -- beautiful breaks require manual intervention at key breakpoints
- White space as a weapon -- amateurs fill every gap; 10/10 designers use emptiness to create tension that controls the eye
- Asymmetric balance creates interest -- offset elements from center, let images bleed beyond containers
Requirements & configuration
- Negative tracking on large type (-0.02em to -0.05em) tightens display into cohesive units; body needs generous line-height (1.5-1.7)
- Control every line break on headlines -- beautiful breaks require manual intervention at key breakpoints
- See references/case-studies.md when you need a worked example of any pillar -- agency-by-agency breakdowns of real color systems, type treatments, and micro-interactions to reverse-engineer.
- Horizontal scroll galleries need clear visual affordance
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
top-design FAQ
What does the top-design skill do?
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard landing page into a memorable digital experience. Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation. For foundational UI, see refactoring-ui. For type selection, see web-typography. Massive scale contrast is non-negotiable -- minimum 10:1 between display and body (e.g., 180px / 14px); viewport-filling type at the extreme Negative tracking on large type (-0.02em to -0.05em) tightens display into cohesive units; body needs generous line-height (1.5-1.7)
What does top-design require?
Negative tracking on large type (-0.02em to -0.05em) tightens display into cohesive units; body needs generous line-height (1.5-1.7) Control every line break on headlines -- beautiful breaks require manual intervention at key breakpoints See references/case-studies.md when you need a worked example of any pillar -- agency-by-agency breakdowns of real color systems, type treatments, and micro-interactions to reverse-engineer. Horizontal scroll galleries need clear visual affordance
How do I install top-design?
Run: npx -y skills add https://github.com/wondelai/skills --skill top-design --agent claude-code — the source lives at github.com/wondelai/skills.
Maintain top-design?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[top-design on getagentictools](https://getagentictools.com/skills/wondelai-skills-top-design?ref=badge) npx agentictools info skills/wondelai-skills-top-design The second line is the CLI lookup for this page — handy in READMEs and docs.
