设计稿自动布局文本适配
将以下提示词粘贴到你的 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 补偿值和截图验证结果。
- 维护设计稿规范的团队负责人:需要把文本适配检查变成可执行、可复查的流程。