技能介绍

解决什么问题

团队常知道设计要现代，却难判断哪些动效、字体、配色和布局仍符合获奖级标准。这个技能是面向 2026 Q1/Q2 的网页设计趋势参考库，覆盖当前获奖模式与新兴技术，并按周期更新，每个部分可独立刷新。适合启动新网页项目、评估既有设计是否仍具当代性，或为 hero section、动画与布局建立统一标准。

技能如何工作

核心能力包括：

设计原则：动效承载含义、字体即 hero、克制但有纵深、深色界面为默认、滚动即叙事、性能是前提。
趋势模式：Immersive Hero、Scroll Storytelling、Bento Grid Dashboard、Dark Canvas、Kinetic Typography、AI-Native Interface、Micro-Animation System。
动效规则：用 IntersectionObserver 或 ScrollTimeline 触发滚动动画；用 View Transitions API 或 FLIP 处理状态切换；加载动画要品牌化；普通动画不超过 400ms，叙事滚动除外；避免过度视差。
字体规则：用 variable fonts 做响应式过渡；hero 展示字大于 80px 且高对比；最多 1 个表现型展示字体加 1 个中性正文字体，共 2 个字族，每页最多 3 个字重。
配色与布局：采用单色或低饱和底色，加 2-3 个强调色；深色高对比为主，强调色对应主要操作；用非对称网格、bento grid 和全屏/约束区交替建立节奏。
交互规则：加入自定义光标、hover reveals、magnetic buttons 与 hover/focus/active 微交互；用 Lenis 或原生 scroll-behavior 平滑滚动；点击区不小于 44x44px，不无价值地劫持滚动。
反模式：动画过载、通用紫蓝渐变、无目的 WebGL、照抄 Awwwards、忽略可访问性、把移动端当附属、带声自动播放、过度滚动劫持。
检查清单：hero 动画有叙事目的；字体不超过 2 个字族；色板不超过 4 个彩色加中性色；深色为默认或有明确选择；滚动动画用 IntersectionObserver 或 ScrollTimeline；交互元素有状态；尊重 prefers-reduced-motion；布局主动破格；移动端独立设计；hero 不用素材图；动画 60fps 且无 layout thrashing；异步加载有 skeleton screen；3G 模拟加载低于 3 秒。

适用边界与注意点

它是参考与评审指南，不是自动生成设计的工具；不自动安装依赖、修改系统权限、创建持久任务或执行下载内容。涉及发送、发布、删除、付款、部署或其他外部写入时，先展示目标与影响并取得用户明确确认。凭据仅用于用户指定的对应官方服务，不回显、不记录、不转发。命令和代码默认仅作参考；只有用户明确要求且目标范围清楚时才可运行。ui-patterns、visual-direction 等交叉参考可作延伸，核心趋势仍以 SKILL.md 与 references/patterns.md 为准。

获取使用帮助和更多实用 Skill，请关注公众号「简诗 AI」，或在 SkillHub 搜索「简诗 AI」