SuperAPI AI 工具集

better-headers

通用与其它

查看项目

更新于 10-15 20:31

技能介绍

用途:为网站生成导航页眉(页面 chrome,而非 HTTP 头)。先按主题选定一种类型再实现,命名并简述理由,不在一页堆叠多种架构。

主要能力:提供 12 种类型——1 中央胶囊、2 悬浮岛、3 左字标+中胶囊+右 CTA、4 首屏覆盖层、5 编辑排版、6 非对称/偏移、7 中央字标双侧、8 桌面竖轨、9 移动 Dock+桌面胶囊、10 工具条+主导航、11 图标簇+字标、12 滚动隐藏/紧凑。

使用方式:结合 frontend-design 处理标识色与反模板,better-web-interface 处理 token 与状态,better-footers 处理页脚;仓库设计系统优先。默认禁止无 brief 的全宽 logo 左链接中 CTA 右加通用汉堡菜单模板。要求 <header>+<nav aria-label="Principal">、跳过链接、aria-current="page"、可见焦点、键盘与 Esc 关闭菜单、抽屉焦点陷阱与关闭恢复;4–7 个链接,CTA 用实义动词,logo 带文字或 alt;sticky/fixed 需用 padding/scroll-padding-top 补偿高度以免遮挡 H1;仅当 brief 或设计系统要求才用模糊与玻璃效果;prefers-reduced-motion 下保持静态。移动端使用项目断点,菜单用 overlay 或 sheet 并管理 aria-expanded,桌面窄宽时汉堡菜单加 off-canvas 属于反模式。资料未提供具体安装命令、定价与平台信息。