SuperAPI AI 工具集

layout-director

前端与建站

查看项目

更新于 10-15 18:45

技能介绍

用途:Layout Director 用于让智能体在处理前端设计时,先确定页面结构而非从组件开始编码,使产出具有清晰的焦点层级、有意义的留白、良好的分段节奏、克制的动效以及干净的移动端折叠。适用于落地页、营销站点、产品展示、作品集和功能发布等场景。

主要能力与工作流:先从简报中提取产品类型、受众成熟度、内容密度、信任与兴奋的平衡、可用视觉素材、必需区块、移动端限制;再从 references/layout_archetypes.md 选择一个主布局原型,从 references/variation_matrix.md 选择变化轴(字体模式、间距强度、内容密度、分段节奏、动效特征、视口行为);应用 references/component_principles.md 的组件规则;需要更丰富 UI 范围时加载 references/component_families.md;需要固定或滚动响应区块时加载 references/scroll_patterns.md;最后用 references/review_rubric.md 做终审。若需特定工具调用,参考 references/platform_adaptation.md;需要措辞示例则用 references/prompt_recipe.md。

构建步骤:先框定叙事(首屏需被理解的内容、接下来需要的证明、页面在何处放宽或压缩、转化发生的位置),再选择结构系统并可选一个辅助模式;用尺度建立层级,偏好少而大的动作与强锚点,避免大量等权卡片;动效仅用于强化进入顺序、深度或可供性,允许 fade-up、交错卡片、局部视差、悬停位移与粘性叙事滚动,且只能动画 transform 与 opacity,不可动画布局属性;768px 以下需重组布局,去除影响可读性的装饰重叠、保留视觉锚点、大幅减少列数、保持 CTA 明显、维持充裕间距。

限制:不得从组件开始编码;不要固化为单一风格;拒绝通用居中英雄区加可互换功能卡、贯穿全页的对称网格、用超大渐变伪造品味、拥挤的纵向节奏、过多视觉重点、无层级的动效以及仅缩小而非重组的移动端布局。若用户要更强或不同的方向,应更换原型或变化轴,而非对薄弱结构做表面微调。具体文件内容、平台适配细节与命令暂未提供。