> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# 修复Vibe Coding应用的廉价感
- URL: https://www.hubwiz.com/blog/fixing-the-cheap-feel-of-vibe-coding-apps/
- Published: 2026-03-20T17:58:19.000Z
- Updated: 2026-03-20T17:58:19.000Z
- Description: 你可以在 3 秒内识别出一个 Vibe Coding的应用。不是因为代码写得不好，而是因为设计决策有问题。
- Author: admin
- Tags: APPLICATION, VIBE CODING, #Import 2026-10-14 14:41

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

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

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

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

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

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

我的字体选择框架：

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

![](https://www.hubwiz.com/blog/content/images/2026/03/image-225.png)

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

![](https://www.hubwiz.com/blog/content/images/2026/03/image-226.png)

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

![](https://www.hubwiz.com/blog/content/images/2026/03/image-227.png)

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

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

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

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

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

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

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

![](https://www.hubwiz.com/blog/content/images/2026/03/image-228.png)

## 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 都可以。混用两者是不行的。
- 输入框高度标准化——所有输入框和按钮在同一上下文中高度一致
- 每个交互元素都应有悬停状态——每个按钮、每个链接、每个可点击元素都应有悬停状态
- 焦点状态应采用非默认的蓝色轮廓——焦点环的样式应与您的设计语言相匹配

![](https://www.hubwiz.com/blog/content/images/2026/03/image-229.png)

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

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

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

---

原文链接：[Why 90% of Vibe Coded Apps Look Cheap (And Exactly How to Fix It)](https://x.com/Hartdrawss/status/2034890067236594136?ref=hubwiz.com)

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