layout

layout 技能概览

layout 技能可以帮助你在 UI 工作中优化间距、层级和构图，尤其适用于界面显得扁平、拥挤，或排列过于机械的时候。它更适合需要实用型 UI Design 布局指导的设计师和 agent，而不是泛泛的美化处理：比如留白不均、分组不清、网格过于重复，或者页面没有清晰引导视线。

layout 技能是做什么的

当真正的问题是结构，而不只是视觉润色时，就该用 layout 技能。它的目标是把粗糙的排布整理得更易读、节奏更清晰、间距更有意图，同时不需要把整个产品重新设计一遍。

什么时候最适合用

当 prompt 提到间距问题、对齐问题、信息密集的 dashboard、单调的卡片网格，或者重点不明确时，它最适合。若任务只是颜色、品牌或插画相关，layout 技能通常不是合适的工具。

它有什么不同

这个技能在改动之前，会先认真诊断当前布局，这一点很有主张。正因如此，它比一句“让它更好看”的 prompt 更有用，因为它会推动你关注上下文、间距逻辑和结构性修复，而不是随意做些视觉微调。

如何使用 layout 技能

安装 layout 技能

使用 layout 的仓库安装流程执行安装步骤：npx skills add pbakaus/impeccable --skill layout。之后先从 SKILL.md 开始，并按照其中的准备要求再发起修改请求。

给 layout 技能正确的输入

layout 技能在你提供目标屏幕、当前布局问题以及关键约束时，效果最好。弱一点的 prompt 会说“优化这个页面”。更强的 prompt 会说：“优化这个 analytics dashboard 的布局，让 summary metric 成为最主要的视觉焦点，让卡片之间没那么拥挤，并且在不改变内容顺序的前提下保持桌面端间距紧凑。”

先读最关键的文件

先读 SKILL.md，因为里面包含强制性的准备步骤和布局优化工作流。如果你的环境里还有配套文档，也可以查看 README.md、AGENTS.md、metadata.json，以及任何 rules/、resources/、references/ 或 scripts/ 文件夹。这个仓库里的技能本身比较自包含，所以真正的判断质量，很大程度上取决于你是否理解 SKILL.md。

按“先诊断、后修复”的循环来做

这个技能的设计初衷，是先评估间距、层级和网格结构，再去改动任何内容。你可以先让它指出哪里薄弱，再要求针对性处理：把相关内容组更紧密地收拢、拉开不同模块之间的距离、减少重复且等距的排布，并突出主元素。这样的 workflow，比直接跳到最终润色，更能发挥 layout 技能的价值。

layout 技能常见问题

layout 技能只适合视觉设计师吗？

不是。前端开发者、产品设计师，以及需要做实际布局决策的 AI agents 都能用它。只要你能描述屏幕和目标，它就能帮助你组织构图。

它和普通 prompt 有什么不同？

普通 prompt 往往只会给出表层的样式调整。layout 技能增加了一套决策框架：先评估当前结构，找出层级问题，再有意图地优化间距。对于构图问题大于纯美化问题的场景，这通常会带来更好的结果。

layout 技能适合新手吗？

适合，只要你能说清楚目标屏幕和痛点。新手最容易获得好结果的方式，是用朴素语言描述哪里不对劲，比如“太拥挤”“没有明确焦点”或者“这些卡片看起来都在抢注意力”。

什么时候不该用 layout 技能？

如果主要任务是文案写作、配色体系创建、动效设计，或者组件 API 设计，就不要用它。即使 UI 结构本身已经很稳，只需要改文案或做视觉品牌调整时，它也不是好选择。

如何提升 layout 技能效果

给出更强的布局约束

layout 技能最好的结果，来自会影响间距决策的约束：移动端还是桌面端、信息密集还是留白充足、内容顺序是否固定、卡片最小尺寸是多少，或者是否必须保留现有组件。这些细节能避免输出过于泛化的“把间距调好看一点”。

用业务语言描述层级

如果你想要更好的 UI Design 结果，就直接说明注意力应该先落在哪里、其次在哪里、再次在哪里。比如：“让 revenue total 成为最强视觉中心，filters 保持次要，supporting metrics 往下放，必要时折叠到首屏以下。”这比只说“层级更强一点”更有帮助。

留意常见失败模式

最常见的问题是间距被过度拉平，导致每个空隙都差不多大，页面节奏也随之消失。另一个问题是只做表面清理，却忽略结构。如果第一轮结果还是显得扁平，就明确要求做分组、节奏和强调的调整，而不是泛泛地要求重新设计。

结合截图感知做迭代复盘

拿到第一版输出后，检查一眼能不能看出阅读顺序，相关内容有没有被分到同一组，以及视线是否准确落到预期焦点上。然后只做一个聚焦的后续调整：减少杂乱感、拉开模块间距离，或者强化主内容块。