修复Vibe Coding应用的廉价感

微信 ezpoda免费咨询：AI编程 | AI模型微调| AI私有化部署
AI工具导航 | Tripo 3D | Meshy AI | ElevenLabs | KlingAI | ArtSpace | Phot.AI | InVideo

你可以在 3 秒内识别出一个 Vibe Coding的应用。

不是因为代码写得不好，而是因为设计决策有问题。

字体错误。间距不一致。颜色搭配不协调。组件看起来像 shadcn 但又略有偏差。

这些问题修复起来并不费时，但你必须知道该检查什么。

1、字体搭配逻辑（一个决定一切的关键决策）

大多数 Vibe 代码应用都使用 UI 库自带的字体，通常是 Inter。Inter 本身没有问题，但当所有应用都使用它时，你的应用看起来就千篇一律了。

我的字体选择框架：

SaaS/生产力工具：UI 使用 Inter 或 Geist 字体，标题不使用字体（使用相同字体，不同字重）。

消费者应用：使用 Jakarta Sans 或 DM Sans 字体，营造更友好的氛围。

高端/金融/法律应用：使用 Sora 或 Neue Haas Grotesk 字体，更显结构化和权威性。

仅限落地页：标题可以使用展示字体，但应用本身绝对不能使用。

使用单一字体系列，最多两种字重。设计本身就是规则。

2、间距系统——让一切感觉恰到好处的无形因素。

如果你的应用感觉“不对劲”，但又说不出原因，答案通常是间距不一致。

设置间距比例并严格遵守：

• 基本单位为 4px
• 有效间距值：4、8、12、16、24、32、48、64
• 切勿使用任意值，例如 13px 或 22px
• 将此比例统一应用于边距、内边距和间距

Tailwind 的默认间距比例已采用此系统。如果您在使用 Tailwind 时间距仍然不一致，则说明您没有使用默认比例，而是覆盖了它。

3、颜色标记结构 — 停止为每个组件选择颜色

设计系统使用语义化的颜色标记，而不是为每个组件使用单独的十六进制代码。

你需要的最小标记集：

• background（页面背景）
• surface（卡片和面板背景）
• border（所有边框，使用统一的颜色）
• text-primary（主要内容）
• text-secondary（标签、标题）
• brand-primary（主要操作颜色）
• brand-secondary（悬停状态、辅助操作）
• disstructious（错误、删除）

在 Tailwind 配置或 CSS 变量中定义这些标记。切勿在组件中硬编码十六进制值。

4、使用 shadcn 保持组件一致性 — 正确使用

对于大多数 Vibe 开发者来说，shadcn 是正确的选择。但大多数 Vibe 开发者都错误地使用了它。

• 不要直接对单个组件进行内联自定义——自定义基础设计标记
• 切勿在同一视图中混用来自不同库的 shadcn 组件
• 使用 shadcn 的 cn() 工具处理条件类——不要手动连接类字符串
• 扩展 shadcn 变体而不是覆盖它们——维护系统

5、区分机构设计与创意编码的 6 个设计决策

• 一致的边框半径——选择一个半径（8px 或 12px）并应用于所有位置。切勿在同一 UI 中混用圆角和直角。
• 阴影层级——使用阴影来表示高度，而不是装饰。卡片使用一种尺寸，模态框使用另一种尺寸。
• 图标库一致性——所有图标都来自同一集。Lucide 和 Heroicons 都可以。混用两者是不行的。
• 输入框高度标准化——所有输入框和按钮在同一上下文中高度一致
• 每个交互元素都应有悬停状态——每个按钮、每个链接、每个可点击元素都应有悬停状态
• 焦点状态应采用非默认的蓝色轮廓——焦点环的样式应与您的设计语言相匹配

设计并非关乎美观，而是关乎信号。

精心设计的应用表明您注重细节。用户信任那些注重细节的人所打造的产品。

这种信任能够转化为实际购买。

原文链接：Why 90% of Vibe Coded Apps Look Cheap (And Exactly How to Fix It)

汇智网翻译整理，转载请标明出处