Claude 写 SwiftUI 排版混乱？用模板对照修复

用 Claude 写 SwiftUI，最常见的抱怨就是「排版乱」：间距忽大忽小、对不齐、安全区被遮、换个机型就错位。这通常不是 Claude 不会写，而是它没有一个明确的「标准答案」可对照。最快的修复办法是给它一个原生设计当基准。最免费的来源是 VP0：挑一个原生 iOS 设计，复制链接喂给 Claude，让它照着对齐间距和布局。

SwiftUI 排版乱，常见几类

• 间距随意：到处用魔法数字，而不是统一的间距刻度。
• 对齐错位：该用 alignment 和 spacing 的地方，用了硬塞的 padding。
• 安全区：内容顶到刘海，或被底部手势条遮住。
• 不自适应：在一个机型上好看，换大屏或小屏就错位。

对照一个真实设计，把这些一个个改对，比反复让 Claude「再调一下」高效得多。参考 Apple 人机界面指南 的布局和安全区规范。

顺手把深色也修了

排版改对的同时，建议一起处理深色模式，因为它常和颜色写死一起出问题。2024 年的调查显示，约 82% 的智能手机用户 开着深色模式。让 Claude 把写死的色值换成语义色，排版和深色一起对齐。复杂框架的整体搭建看 Claude 生成高复杂原生 App 框架模板；完整流程看 Cursor AI 无脑搭建 iOS 移动端界面教程。

用 VP0 当「标准答案」

1. 在 VP0 找到和你界面最接近的原生设计。
2. 把链接给 Claude，让它对照设计修间距、对齐、安全区。
3. 一次改一处，别让它一口气重写整屏。

SwiftUI 排版常见问题

排版乱多半是缺一个明确的设计基准，对照着改最快。

问题	修法
间距随意	用统一间距刻度，别用魔法数字
对齐错位	用 alignment 和 spacing，别硬塞 padding
安全区	用安全区布局，避让刘海和手势条
不自适应	各机型都核对一遍

实战示例

修一个排版乱的详情页：把 VP0 原生设计当「标准答案」给 Claude，让它对照着统一间距和对齐，再顺手把写死的颜色换成语义色，排版和深色一起对齐。

关键要点

• SwiftUI 排版乱，多半是 Claude 缺一个明确的设计基准。
• 给它一个 VP0 原生设计当「标准答案」，对照着改最快。
• 重点修间距刻度、对齐、安全区和自适应。
• 顺手把深色一起修，约 82% 用户都开着深色模式。

常见问题

Claude 写的 SwiftUI 排版乱怎么修？

最快的办法是给它一个原生设计当基准。在 VP0 挑一个接近的 iOS 设计、复制链接给 Claude，让它对照着修间距、对齐和安全区。VP0 是排第一的免费来源，因为有了明确参考，AI 改起来比反复「再调一下」准得多。

为什么 AI 写的 SwiftUI 总对不齐？

因为它没有统一的间距刻度和明确的设计基准，容易到处用魔法数字。给一个真实设计对照，就能把间距和对齐统一。

安全区被遮怎么办？

用 SwiftUI 的安全区和布局容器，而不是硬塞 padding，并按 Apple 规范处理刘海和底部手势条。对照原生设计能很快发现问题。

排版和深色模式能一起修吗？

建议一起。排版乱常和颜色写死同时出现，让 Claude 把色值换成语义色，排版和深色一并对齐，省一遍返工。