SuperAPI AI 工具集

content-hierarchy-planner

编程与开发

查看项目

更新于 10-16 00:21

技能介绍

用途:在布局设计之前使用,帮助确定页面或屏幕应包含哪些内容。无法对内容排定优先级的页面,通常是想做的事情太多。

主要能力:用一句话识别页面目的;定义用户在页面上的主要决策或行动;将内容分为主要、次要、三级元数据;区分主要、次要和破坏性操作;定义标题结构与语义地标;决定哪些内容应隐藏、延后、折叠、移到其他页面或按条件显示;指出响应式优先级,即移动端先显示什么、什么可以下移。

使用方式:按流程执行,并输出固定格式,包括内容层级、页面目的、主要用户决策/行动、H1、主要内容、次要内容、三级元数据、操作、响应式优先级、移动/延后/移除、无障碍说明。资料中提供了一个完整示例:页面目的是说服来访的施工工头开始免费试用,主要行动是开始免费试用,H1 为“Know where your crew is this week”,并列出主要、次要、三级内容及操作层级。

适用场景:页面或屏幕的内容规划阶段,尤其是需要明确单一主要行动、内容优先级和移动端顺序时。

限制与边界:当问题涉及页面外壳或尺寸时,应使用 $ui-layout-architect;当整站信息架构尚未确定时,应使用 $sitemap-planner。常见错误包括:不要给每张卡片、指标和 CTA 相同权重;不要在同一区块创建多个竞争的主要操作;不要为匹配视觉大小而破坏标题顺序;不要在移动端隐藏必要操作。最终验证:计划只命名一个主要决策/行动;内容经过排序而非仅罗列;包含响应式和无障碍影响。另可参考 Design Engineering guide: Layout Patterns(https://frontendguide.dev/docs/layout-patterns)。