设计师的 VibeCoding 指南

上篇《设计师 不会 vibecoding 有多危险》发完，后台被问爆的一句话是："道理都懂，但我第一步到底迈哪条腿？"

好，这篇不讲道理，讲动作。工具选哪个、第一个项目做什么、怎么跟 AI 说话、哪几个坑别踩——看完这篇，你这个周末就能做出第一个能跑的页面。

工具选什么：说人话版

vibe coding 工具现在一堆，但设计师只需要分清两种。

v0 / bolt.new：给"一行代码都没写过"的你。打开网页，输入一句话，10 分钟后一个能点的网站摆在面前，不用装任何东西。v0 是 Vercel 家的，生成的页面审美在线，不会给你整出杀马特风。

v0 的首页：输入一句话，剩下的它来

Cursor / Claude Code：给"想长期玩"的你。Cursor 长得像 VS Code，左边你写字、右边 AI 帮你改，适合正经做项目。Claude Code 更 geek，在终端里跑——Anthropic 自家设计师就用它直接 ship 功能，上篇提到过。

一句话建议：先用 v0 跑通一次"从无到有"的爽感，建立信心；再碰 Cursor。顺序别反，反了容易劝退。

第一个项目做什么：别做 todo list

所有教程都让你做 todo list。别听。todo list 做完，你只学会了"跟着教程走"，没学会"自己走"。

做这个：把你自己的作品集首页，用"说"的重做一遍。

为什么是它？三点：第一，你对它有审美标准，AI 生成得好不好，你一眼就能 verdict，不用别人告诉你；第二，做完直接能用，成就感拉满；第三，过程中你会被迫把"我觉得这里不对劲"翻译成 AI 听得懂的话——这正是 vibe coding 的核心能力。

具体三步：① 准备 3 张参考——你最喜欢的 3 个网站首页截图，直接拖给 AI 看，比说一万句都管用；② 第一句 prompt 就写"做一个深色系的个人作品集首页，参考这三张图的氛围，第一屏只要名字、一句话介绍和一个作品入口"；③ 跑起来，打开看，不对的地方一次只改一处。

设计师的 prompt 心法

vibe coding 里，你的审美就是生产力。但"我觉得不好看"对 AI 是无效输入，得翻译。看对比：

三个心法，记死了：

1说具体，不说感觉。层级、对比、留白、节奏、对齐——用你做设计评审的词，AI 全听得懂。"高级感"它不懂，"大量留白+细线条+一个强调色"它秒懂。

2一次只改一件事。"标题放大、颜色换掉、再加个动效"三件事一起说，AI 给你一个四不像。拆开，一句一句来。它的注意力跟金鱼差不多。

3给参考，不给形容词。截图、链接、"像 Linear 官网那种冷淡风"，比 100 个形容词管用。AI 是视觉动物，字面意思。

AI 味是最容易翻车的地方

你肯定见过：一眼"AI 味"的页面。紫色渐变、玻璃拟态、大圆角卡片、满屏的 ✨。好笑的是，这篇的封面就是紫色霓虹风——我故意的，致敬一下 AI 味本味。

但你的作品不能这样。AI 的默认审美是"平均值"，平均值就是没味道。怎么破？加一条你自己的怪癖。别人都用圆角，你用直角；别人都深色高级灰，你来个高饱和撞色；排版上做一个反常规的决定，比如导航竖着放。AI 负责把 60 分做到 85 分，最后 15 分的"怪"，只能你来。这是你作为设计师最后的、也是最硬的护城河。

另外两个坑顺手避了：别让 AI 替你做决定——它一次给你三个方案，你要能说出"选 A，因为…"，说不出来说明你也没想清楚；能跑≠能用——生成完第一件事，手机上打开看一眼，字号对比度按钮大小，移动端翻车率 90%。

整个流程，就这四个动作

别被"vibe coding"这个词唬住。扒开看，就是下面这个循环，转起来就行：

从"画图的设计师"到"交付产品的设计师"，中间差的不是三年代码功底，是这个周末的两个小时，和第一次按下回车的那一下。

去吧，把 v0 打开，输入第一句话。