为什么你的设计总是”看着不对”？80%的问题出在字体和间距上

你有没有过这种感觉——做好的页面，说不上哪里不对，但就是看着不顺眼？颜色没问题，图片也对，但整个版面就是「平」「散」「乱」。

大多数时候，问题不在颜色，在字体和间距。

排版不对，设计白费

有个说法很扎心：「排版决定了你 80% 的设计水平」——字距紧一度、行高差两像素，整个页面的呼吸感就全变了。颜色只是点缀，字体和间距才是骨架。

但排版的坑也最多：字族乱搭、层级对比不够、留白平均分配没有呼吸感……这些问题靠感觉调，调到崩溃。

这个 Skill 怎么用

叫 Typography And Layout，来自 Claude Code 社区技能库。它的核心逻辑是：

• 先把设计哲学读清楚，知道这个版面要传达什么「声音」
• 选字体——最多两个族，配合 references/type-pairing.md 的配对原则
• 建字体缩放系统——字号、行高、字重，用 4/8 基准的间距梯
• 排版时遵循网格、层级通道和负空间的规则
• 最后用 critique 技能做审查

当你对页面说「感觉不对」「看着平」「层次乱」，它就会触发，从字体和间距入手找到根源。

核心设计原则

• 字体最多两个族（代码/数据用第三个例外）
• 字号必须有 ≥ 3 倍的层级跳跃（大标题和正文之间）
• 正文宽度控制在 45–75 字符
• 间距用 4/8 基准的梯子——组与组之间留白要多，组内要少
• 数字列必须用等宽数字，保证对齐

适合谁用

• 前端开发者——每次写 CSS 前先过一遍排版检查
• 设计师——做 landing page、dashboard、海报、PPT
• 产品经理——快速搭界面原型，不想找设计师的时候
• 内容创作者——公众号封面、活动海报的排版参考

安装方法

在 Claude Code 里运行：

mkdir -p ~/.claude/skills/typography-and-layout && curl -L https://claudskills.com/skills/typography-and-layout/SKILL.md -o ~/.claude/skills/typography-and-layout/SKILL.md

装完之后，说「这个页面排版感觉不对」「帮我看看标题层级」「调整一下间距」就会触发。

下一次感觉页面哪里不对的时候，先别急着换颜色——试试调字体和间距，可能四两拨千斤。

https://github.com/petekp/claude-skills

GitHub: https://github.com/petekp/claude-skills