Top Design
技能 已验证 活跃Create 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.
功能
- 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
使用场景
- 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
非目标
- Providing specific code implementations (direct code snippets are illustrative)
- Replacing formal design education or tools
- Focusing on foundational UI or basic type selection
工作流
- 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.
实践
- Typography as Architecture
- Layout & Composition
- Motion & Animation
- Color & Contrast
- Scroll-Based Design
- Performance & Loading
- Micro-Interactions
安装
请先添加 Marketplace
/plugin marketplace add wondelai/skills/plugin install skills@wondelai-skills质量评分
已验证类似扩展
Baseline Ui
100在 Tailwind CSS 项目中验证动画持续时间，强制执行排版比例，检查组件可访问性，并防止布局反模式。适用于构建 UI 组件、审查 CSS 工具类、 styling React 视图或强制执行设计一致性。
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.