Agent Skills
返回列表
设计稿自动布局文本适配

设计稿自动布局文本适配

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @user_5d52b855/layout-adaptation。

技能介绍

问题背景

设计稿从中文切到英文、德语或其他更长文案时,常见问题不只是文字被截断。自动布局里的固定宽高会放大风险:文本节点只改 width 不改 height,INSTANCE 内部文本被漏扫,按钮和标签类文本被当成普通段落处理,最后出现溢出、塌陷、间距失衡。

工作方式

该技能把布局适配拆成可审计的流程:

  • 先扫描后修复:读取目标节点下的可见文本,并展开 INSTANCE 内部子树,避免只处理普通 FRAME 文本。
  • 强制分类:按可见性、父容器命名、textAutoResize、父容器宽度模式和高度模式判定文本类型,再映射到填充、跳过、按钮、标签、容器级溢出等规则。
  • 同步处理宽高:文本改为 fill_container 或 HEIGHT 时,容器高度统一改为 hug_contents;若原本是固定高度,需要按原高度与文本行高补偿 paddingTop 和 paddingBottom。
  • 输出验证材料:生成适配报告,列出修复节点、padding 补偿值、跳过原因,并配合截图检查截断、溢出和塌陷。

适用边界

它适合以自动布局为基础的多语言适配,尤其适合按钮、标签、导航、列表、表格等结构化文本。若设计稿大量依赖手动坐标、绝对定位或像素级视觉稿,则不能只靠该技能完成。它主要解决文本变长后如何保持自动布局稳定,不替代设计师对视觉权重和品牌排版的最终判断。

使用场景

  • 将 Figma 中文按钮、标签和导航项换成英文后,检查文本是否溢出或容器塌陷。
  • 把设计稿组件实例内的多行说明文案从中文换成德语,调整宽度模式并补偿 padding。
  • 扫描一个页面里所有可见文本,标记固定宽度、INSTANCE 内文本和需要 fill 的节点。
  • 修复后截图对比基线,定位被截断、溢出或高度塌陷的节点并输出适配报告。

适合人员

  • 负责多语言产品界面的设计师:需要保证按钮、标签和导航在文案变长后不破版。
  • 做设计系统组件的工程师:需要把 INSTANCE 内部文本纳入统一布局修复规则。
  • 交付前端还原稿的设计师:需要生成节点修复清单、padding 补偿值和截图验证结果。
  • 维护设计稿规范的团队负责人:需要把文本适配检查变成可执行、可复查的流程。