用途:在设计具体 UI 元素(首屏、导航、卡片、表单、页脚)、组织落地页、设计定价表、评价或 CTA 时使用,确保模式符合成熟产品的既有标准。
主要能力:给出五条原则(模式符合用户预期、渐进披露、每个视口仅一个主 CTA、内部一致性优先于创意、移动优先 375px 起);对各元素给出明确规则。首屏限三种变体:声明式(大标题+副标题+CTA,无图,适合 SaaS)、分栏式(左文右图)、沉浸式(全屏图/视频叠加文字,适合品牌与作品集);CTA 需在首屏可见,标题不超过 15 词,禁止轮播、带声自动播放。导航限三种模式:吸顶栏、汉堡全屏覆盖、极简头部;滚动向下自动隐藏、向上显现,标记当前页,主导航不超过 7 项,移动端不用大型菜单。卡片结构统一(图、标题、描述、元信息、底部 CTA),整卡可点,提供悬停态,同行等高。表单单列布局,失焦即校验,标签置于字段上方,错误就近显示,每屏不超过 5 个字段,默认不用验证码。CTA 用填充对比色、动作化文案(如 Get started、Try for free、Book a demo),提供悬停/加载/成功反馈,并排不超过 2 个。
附加模式:特性展示标签页、粘性分栏滚动、跑马灯社会证明、命令面板(Cmd+K)、大型页脚转化、对比表、最多 5 步的引导向导。反模式包括:轮播当主导航、无定位的无限滚动、模态叠模态、隐藏主 CTA、通知轰炸、仅靠提示气泡解释、假聊天窗口、少于 5 项用下拉、移动端无跳过链接等。
使用方式与限制:文档以规则、正反例与检查清单形式给出,未提供代码、安装命令或可执行脚本;定价、评价、页脚的完整规则及详细模式说明指向 references/extended-rules.md 与 references/patterns.md,本次资料未展开。未提供收费、价格、平台、许可与效果数据。