Top Design
Skill Verified ActiveCreate award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "premium website", "portfolio site", "scroll animations", "Awwwards quality", "brand experience", "cinematic web design", "parallax storytelling", or "agency-quality site". Also trigger when building landing pages that need to impress, designing creative portfolios, or elevating a standard website to 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.
To guide users in creating websites and applications that achieve the highest standards of digital design, akin to those featured in Awwwards.
Features
- 10/10 scoring rubric for web experiences
- Detailed guidance on typography, layout, and motion
- Best practices for color, performance, and micro-interactions
- Analysis of techniques from elite digital agencies
- Actionable example prompts for implementation
Use Cases
- Creating premium portfolio sites or agency-quality websites
- Designing immersive web experiences with custom animations
- Elevating standard websites to memorable digital experiences
- Improving typography, motion, and composition for high-impact design
Non-Goals
- Providing specific code implementations (direct code snippets are illustrative)
- Replacing formal design education or tools
- Focusing on foundational UI or basic type selection
Workflow
- Understand the core principles of 10/10 design.
- Review specific techniques for typography, layout, motion, color, performance, and micro-interactions.
- Analyze case studies from leading agencies.
- Apply the provided scoring rubric and diagnostic questions to evaluate designs.
- Use example prompts to guide AI in implementing these high-craft principles.
Practices
- Typography as Architecture
- Layout & Composition
- Motion & Animation
- Color & Contrast
- Scroll-Based Design
- Performance & Loading
- Micro-Interactions
Installation
First, add the marketplace
/plugin marketplace add wondelai/skills/plugin install skills@wondelai-skillsQuality Score
VerifiedSimilar Extensions
Baseline Ui
100Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Macos Design
100Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Epic Design
99Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.