2026年1月6日•6 分钟阅读

🎨 设计师的“逆袭”：我如何用 Windsurf + Claude/Gemini 指挥出一个全栈网站

我不写 SQL，也不背 API 文档。我只是告诉 Windsurf 我想要什么，剩下的交给 Claude 3.5 和 Gemini。这就是 QY-Space 的构建故事

作为一个设计师，我们往往对前端的“皮囊”（UI/CSS/Animation）得心应手，但一旦涉及到“灵魂”（数据库、鉴权、服务端逻辑），常常会感到一阵无力。

我们脑子里有完美的交互逻辑：“用户点击这里，数据保存，后台更新”。但在代码里，这变成了 Prisma Client、Server Actions、Middleware 这些令人头秃的名词。

但在 2026 年，规则变了。

重构 QY-Space Blog 时，我做了一个大胆的决定：我不做“码农”，我要做“产品经理”兼“创意总监”。 真正写代码的，是我的豪华 AI 团队：Windsurf 编辑器，配合目前地表最强的 Claude 4.5 和 Gemini 3 Pro。

今天，我想跟设计师朋友们聊聊，我是如何通过“对话”，搭建起一整套 Next.js 16 全栈系统的。

🛠 我的 AI “施工队” (Dream Team)

在开始之前，介绍一下我的数字员工，这配置绝对是“版本答案”：

IDE (指挥中心): Windsurf。它不是简单的代码补全工具，它能感知整个项目的上下文 (Context)。它就像一个一直坐在你旁边的资深技术合伙人。
首席架构师: Claude 4.5 (Sonnet/Opus)。逻辑推理能力的巅峰。写 React 复杂组件、处理 Server Actions 的异步逻辑，它几乎能做到“一次通过 (Zero-shot)”，代码不仅能跑，而且优雅得像是有洁癖。
全能技术顾问: Gemini 3 Pro。拥有恐怖的上下文窗口和多模态能力。我把几万字的 Tailwind v4 文档和 Prisma 文档扔给它，它能瞬间消化并结合我的项目给出最优解。

对设计师来说，最难的往往是第一步：搭建数据库。

以前我需要去学 SQL 语法，去研究 Postgres 配置。但这次，我在 Windsurf 的 Cascade 对话框里直接打字：

我 (Prompt): "我需要做一个博客系统。文章 (Post) 需要有标题、内容、封面图、分类。内容会用 Tiptap 编辑器。请帮我设计一个 Prisma Schema，并解释一下怎么把它同步到 Supabase 数据库里。"

Claude 4.5 瞬间给出了一份完美的 schema.prisma 文件，不仅定义好了模型，甚至连 relation (文章和分类的关联) 以及索引优化都考虑到了。

接着，它告诉我：“在终端运行 npx prisma db push”。

Boom！ 数据库建好了。全过程我没写一行 SQL 代码，我只是在描述我的设计意图。

前端还原是设计师的强项，但手写 CSS 还是很累。

这次我用上了最新的 Tailwind CSS v4。当我想实现一个复杂的“毛玻璃卡片”效果时，我没有去翻文档查 backdrop-filter 怎么写。

我 (Prompt): "基于 Shadcn/ui 的 Card 组件，帮我写一个变体。要求使用 okclh 色彩空间，支持暗黑模式。卡片边缘要有一层淡淡的动态流光，类似 Apple 的风格。"

Windsurf 此时调用了 Gemini 3 Pro 的视觉理解能力，直接生成了基于 CSS 变量的高级动画代码。它不仅仅是给了样式，还帮我把 oklch 的色彩变量定义进了全局样式表里。

我发现，懂得描述视觉效果，比懂得 CSS 属性名更重要。

这是整个项目中技术难度最高的部分：一个类似 Notion 的富文本编辑器，带有悬浮菜单 (Bubble Menu) 和斜杠命令 (Floating Menu)。

如果我自己手写，可能要研究 Tiptap 的 API 文档一整周。

我的操作流是这样的：

Gemini 3 Pro：我把 Tiptap 复杂的 Extensions 文档丢给 Windsurf (它会自动读取)，让 Gemini 总结核心用法，并排查版本兼容性。
Claude 4.5：我描述交互——“选中文字时弹出一个菜单，可以加粗、变色；输入 '/' 时弹出组件选择器，要有流畅的 Framer Motion 动画。”
Windsurf：它直接在我的 src/components/admin/editor 目录下生成了 5 个组件文件。

第一次运行，几乎完美。偶尔遇到一个小 Bug，我直接点击 Windsurf 里的 "Fix" 按钮，AI 自动读取错误日志，分析原因，秒修代码。Claude 4.5 的 debug 能力简直让人感动。

这种体验，就像是你把设计稿甩给开发，两分钟后他说：“修好了，你再看看。”

通过构建 QY-Space，我深刻意识到，设计师转全栈的门槛已经彻底消失了。

以前我们需要学习 “How” (怎么写 useEffect，怎么写 SQL join)。现在，有了 Claude 4.5 和 Gemini 3 Pro 的加持，我们只需要专注于 “What” (我想要什么功能，我想要什么视觉效果)。

Windsurf 就像是你的外骨骼装甲。你依然是那个对像素有洁癖的设计师，但穿上这套装甲后，你拥有了搬动数据库、构建复杂系统的力量。

所以，设计师们，别再害怕打开终端了。你的下一个作品集，也许不该只是 Figma 原型，而是一个真实运行的、全栈的 Web 应用。

(P.S. 这篇文章的 Markdown 结构，也是我让 Gemini 3 Pro 帮我排版的 😉)