审美：9 个工具让 demo 看起来像产品

本章主记忆点：你不是审美差，是没给用户一个能停的地方。

你看完能拿走什么

• 四个最实用的设计原则（对比、对齐、亲密、重复）的实操判断方法
• 一张"9 款 AI 工具 × 场景"的对照表，每次做新东西都能直接照表选
• 一个判断 demo 和产品 UI 临界点的 3 米测试法

前置条件

已完成本系列前面的章节。这一章是四大能力的第一个——在你已经把方向筛好、需求用 VDF 说清的前提下，让东西看起来不像一个 demo。

为什么审美放在第四章

很多人以为"审美"是艺术细胞的问题，是天生的。

不是。

审美是可训练的。 更具体地说——审美是一系列可判断的决策。

我过去几年看过一百多个独立开发者自己做的 side project。有一个规律很明显：工程师做的产品看起来像 demo 而不是产品，90% 不是因为他们审美差，而是因为：

他们没给用户"一个可以停下来看"的地方。

一个产品里一定要有一处让人眼睛停下来的东西。可能是 hero 区的大标题，可能是表格的清晰排版，可能是按钮的强对比颜色。这个"停下来"的地方不需要复杂，但必须存在。

没有这个地方，用户的眼睛会在页面上到处飘——就算功能再好，他也会下意识地觉得"这东西不专业"，然后关掉。

这一章不教你变成设计师。它教你识别那个"能停下来的地方"应该在哪，以及怎么用 AI 工具低成本做出来。

四个原则：能直接照着判断的

这四个原则叫 CRAP 原则（别误会，这是设计界的正经术语）——Contrast 对比、Repetition 重复、Alignment 对齐、Proximity 亲密。

每一个我都给你一个可以立刻执行的判断动作。

对比（Contrast）

判断方法：站在离屏幕 3 米远处看你的页面。你能一眼看出"主要动作"是什么吗？

能 → 过。看不出来 → 对比不够。

常见错误：

• 所有按钮都是同一个灰色，用户不知道点哪个
• "次要按钮"和"主要按钮"视觉上太像
• 正文和背景对比度不够，眯着眼才看清

怎么改：

• 主要动作用一个强对比颜色（深色背景配亮色按钮，或者相反）
• 次要动作用无填充的边框按钮，或者只是一个文字链接
• 正文纯黑、背景纯白是最稳的起点

对齐（Alignment）

判断方法：把页面所有主要元素的左边（或顶部）连起来，它们能不能落在几条隐形的直线上？

能 → 过。参差不齐 → 没对齐。

你看所有干净的网页，它的元素都落在几条看不见的对齐线上——文字左对齐、图片顶部对齐、按钮底部对齐。一旦你打破这个对齐，页面会立刻变乱。

怎么改：

• 所有主要内容左对齐到同一条线（除非有强烈的居中理由）
• 间距用 4 / 8 / 16 / 24 / 32 / 48 这样的 8 的倍数阶梯
• 用 flex / grid 强制对齐，不要手动调 margin

亲密（Proximity）

判断方法：相关的东西距离是不是明显小于不相关的东西？

是 → 过。所有东西间距差不多 → 没亲密。

一个表单里，label 和它对应的输入框应该贴着；一张卡片里，标题、副标题、按钮应该紧凑；但卡片和卡片之间应该有明显的间距。

怎么改：

• 一条铁律："相关内容之间的间距 < 不相关内容之间的间距"
• 一个简单的比例：紧密关系用 4-8px，段落间用 16-24px，模块间用 48-64px

重复（Repetition）

判断方法：把页面里所有按钮的圆角、padding、字号列出来，是一致的吗？

一致 → 过。每个都不一样 → 没重复。

所有卡片的圆角应该一样，所有按钮的 padding 应该一样，所有主要标题的字号应该一样。

怎么改：

• 提前定义一套设计变量（字号、间距、圆角、颜色），所有组件复用这一套
• 用 Tailwind 的固定 spacing scale，不要自己随手写像素

demo 和产品的 UI 临界点

这里插一个重要的概念，是我观察了很多独立开发者之后总结出来的。

demo 和产品在 UI 上的差别，其实就是一件事：用户第一屏能不能停下来。

• 用户滑进你的页面第一眼就觉得"这看起来挺正经的" → 跨过临界点
• 第一眼觉得"像随手做的" → 没跨过

跨过临界点不需要整个页面都精致。你只需要把第一屏做到 90 分，剩下的可以是 60 分。

独立开发者最大的误区是"我要把每一页都打磨到极致"。错——你应该把第一屏打磨到极致，剩下的时间留给功能本身。

这是独立开发者和大厂设计师最大的区别：你不需要整个产品都无懈可击，你只需要让人愿意进来看。

9 款 AI 工具：按场景挑

下面这 9 款工具是我实际在用的 AI 设计/UI 生成工具。

每个工具都有它最适合的场景——不要一个工具打所有场景，按场景挑工具。

类型 1：从文字生成一个可用组件

1. v0.dev（Vercel）

场景：你要一个特定的 React 组件（比如 pricing table、dashboard sidebar、带图表的卡片）。用文字描述一下，它给你一段可直接复制到项目里的 React + Tailwind 代码。

什么时候用：做新功能块的第一版组件。

2. Claude Artifacts

场景：你在 claude.ai 里对话，用文字描述一个页面或组件，Claude 直接在右侧生成可交互的 HTML 或 React 版本，你可以立刻看到效果。

什么时候用：快速验证一个交互原型，还不想打开 IDE。

3. ChatGPT Canvas

场景：类似 Artifacts 的对话式生成，但在 ChatGPT 生态里。

什么时候用：你已经习惯用 ChatGPT 写东西，想直接在那里出原型。

类型 2：直接在你的 IDE 里改

4. Codex + 设计 prompt

场景：你已经有一个项目，想让 AI 直接在项目里改 UI。好处是不用复制粘贴，坏处是它会尊重你现有的代码风格——不会主动推新的设计方向。

什么时候用：在现有项目上迭代 UI，保持风格一致。

5. Claude Code + shadcn/ui

场景：和 Codex 类似，直接在项目里操作代码。搭配 shadcn/ui 这种"可复制的组件库"会让输出质量明显变高——因为模型知道怎么写 shadcn 风格的代码。

什么时候用：Next.js / React 项目，并且用了 shadcn/ui 或类似组件库。

类型 3：从手绘或截图出发

6. TLDraw Make Real

场景：你在白板上画了一个简陋的 wireframe，按一下"Make Real"，它把你画的东西变成可运行的 HTML 页面。

什么时候用：脑子里有布局但还没想清楚组件的细节，先画一下再转成代码。

7. Uizard

场景：从手绘稿或参考截图生成完整的 UI 设计稿。

什么时候用：你有一张喜欢的参考图想复刻类似风格。

类型 4：整站或设计稿级别

8. Framer AI

场景：整个网站级别的生成。给它一段描述，它给你一整个可编辑的网站（不是单组件）。

什么时候用：做一个 landing page 时，比自己从头搭 Next.js 快很多——Framer 出的第一版可以作为结构参考，再用 v0 复刻成你自己的技术栈。

9. Figma First Draft

场景：Figma 原生 AI，在 Figma 里从文字生成一份完整设计稿。

什么时候用：你习惯 Figma 工作流，想先在设计稿层面迭代，再交给工程师或自己实现。

场景 × 工具速查表

你要做什么	先试这个	备选
一个组件（比如价格表、仪表盘卡片）	v0.dev	Claude Artifacts
一个 landing page	Framer AI	v0.dev
把手绘想法快速变成真东西	TLDraw Make Real	Uizard
在现有项目上改 UI	Codex	Claude Code
做一个交互原型给别人看	Claude Artifacts	v0.dev
先出设计稿再实现	Figma First Draft	Framer AI

挑工具的原则：

做一件事之前，先问自己"这件事属于哪个场景"，然后按表挑。不要在所有事上都用同一个工具。

我自己的真实用法：90% 的情况下我用 v0.dev 和 Claude Artifacts 做第一版组件，然后在项目里用 Codex / Claude Code 微调。 其他工具是特定场景才拿出来用。

一个具体的复盘

两个月前我做一个内部小产品的 landing page。

第一天我直接用 Codex 在 Next.js 项目里从头写。写了 3 小时，每一块都是"能用但看起来像 demo"的水平。第一屏没有一个让人停下来的地方——标题是正常黑字，按钮是默认绿色，hero 图是一个普通图标。

晚上我自己看了一眼，下意识地想关掉。这就是"没跨过临界点"的信号。

第二天我换策略：

1. 先用 Framer AI 生成一个完整 landing page 作为风格参考
2. 拿 Framer 出的第一屏结构和配色思路，在 v0.dev 里复刻出 React 版本
3. 把 v0 输出的组件复制回我的项目
4. 用 Codex 微调文字和间距，让它和项目现有代码风格对齐

90 分钟之后第一屏就变得让我自己都愿意停下来看——一个清晰的大标题、一个强对比按钮、一张有细节的产品截图。第一屏跨过了临界点，剩下的页面我就敢用"够用就行"的标准写。

整个 landing page 从"像 demo"到"像产品"，关键投入就是这 90 分钟。而且这 90 分钟里真正在敲代码的时间不到 15 分钟——剩下的是在看、判断、选工具。

本章主记忆点

你不是审美差，是没给用户一个能停的地方。

第一屏给用户一个能停下来的地方——一个大标题、一个强对比按钮、一张有细节的图，这三样任选一样做到位就够了。

剩下的页面不需要都做到这个程度。

执行步骤

1. 打开你当前项目的 landing page 或第一屏
2. 站到离屏幕 3 米远的地方看一眼，记下你第一眼停在哪里——或者记下"哪里都没停下来"
3. 按 CRAP 四原则扫一遍：对比、对齐、亲密、重复，每一项找一个最差的问题
4. 按"场景 × 工具"速查表挑一个工具，专门重做第一屏
5. 做完再站 3 米外看一次，检查这次眼睛停在哪

验证方式

做完之后，用下面这张清单自检。四项中过 3 项就算这一关过了。

• 第一屏存在一个明显的视觉焦点（强对比按钮 or 大标题 or 细节图）
• 所有主要元素落在同一条对齐线上
• 同类元素有一致的间距、圆角、字号
• 主要动作按钮（比如"立即试用"）站 3 米外能看见

常见问题

Q：这些工具都免费吗？

A：v0.dev 有免费额度；Claude Artifacts 和 ChatGPT Canvas 需要会员但都有免费试用；TLDraw Make Real 基础能力免费；Uizard 和 Framer 是 freemium，基础够用；Figma First Draft 是 Figma 付费计划的一部分。对独立开发者来说，v0 + Claude Artifacts + TLDraw 这三个免费组合就能覆盖 80% 的需求。

Q：我用 v0.dev 生成的组件，直接复制到项目里是不是版权有问题？

A：v0 生成的代码可以自由使用，它的服务条款里写得清楚。但一个好习惯是：生成之后你要能读懂，不要当黑盒——因为以后改 bug 要你自己改。

Q：我对审美没感觉，CRAP 原则我看了也判断不出来怎么办？

A：两件事：

1. 拿一个你觉得"看起来专业"的网站当参考。 用它的 HEX 色值、间距系数、字号作为你项目的起点。审美的训练其实是大量模仿——看 100 个好页面，你下一次自己做的时候就会自然地落在那个区间里。
2. 让 AI 帮你判断。 把你的页面截图丢给 Claude，让它用 CRAP 原则点评。这个方法我自己经常用，比你自己盯着看一下午有用得多。

Q：第一屏之外的页面真的可以"60 分就行"吗？

A：在 MVP 和冷启动阶段，对。用户如果第一屏就被留下了，他会对后面的页面有更高的容忍度——他已经认定"这是个正经产品"了。但当你进入规模化阶段，所有页面都要提上来。这一章是 MVP 阶段的打法，不是长期方案。

Q：工具列表会不会很快过时？

A：会。AI 设计工具这个领域每三个月就会换一批新的。但本章的场景分类方法不会过时——哪怕某个工具消失了，你可以在它那个场景格子里换一个当时最好的工具。工具在变，场景分类不变。

为什么值得收藏这一章

每次你做新项目卡在"看起来像 demo"的时候，回到这一章：

1. 先用 3 米测试法看第一屏能不能停下来
2. 再用 CRAP 四原则找最明显的那个问题
3. 最后用**"场景 × 工具"速查表**挑一个工具重做第一屏

目标只有一个——让用户在第一屏能停下来。

这一章给的不是审美天赋，是一套可以照着做的判断动作。