Google AI 设计工具 Stitch 来了，普通人怎么用它结合 ChatGPT 快速开发网站？

很多人想做个人站，最后都卡在同一个地方。 代码通常不是第一道坎。卡住人的，是一打开首页，就不知道该写什么。写「你好，我是某某」，太像简历页；写「AI 工程师」，又太干；写「个人数字实验室」，方向好像对了，但页面撑不住，就会变成一句口号。更麻烦的是，你脑子里明明有很多东西：文章、项目、资源、方法、长期方向。可一旦要放到首页里，就开始乱。现在有AI开发门槛已经降的很低，反倒是部署上线让大家头痛，租服务器、买域名、备案一套下来头发掉一堆。

这篇文章想解决的就是这个卡点。你可以直接拿走三样东西：

• 一个用 ChatGPT 梳理个人站定位的方法；
• 一套可以复制到 Stitch 的页面生成流程，「截图挑刺 -> 改 Prompt -> 再生成」的迭代方式。
• 一个“零成本”上线方案彩蛋，省去购买服务器和域名的烦恼

如果你也想做个人站、作品集、产品首页，或者想给内容和项目做一个长期入口，这套流程可以先帮你跑出第一版。它不必一开始就是终稿，只要足够你开始判断、修改、继续交给 Codex 开发。

我最近正好在折腾自己的个人站。我希望它能让别人 10 秒内知道我是谁，看到我长期关注 AI、系统、个人资产这些方向，也能承载文章、资源、方法、产品和实验。

这些话写出来不难，难的是变成页面。页面没有出来之前，你甚至不知道自己到底不满意什么。

所以我这次试了一套流程：先让 ChatGPT 帮我把想法说清楚，再把整理好的 Prompt 交给 Google Stitch 生成页面。

我用下来，关心的点不在「设计师会不会被替代」，话说Figma是真的惨，前后被google stitch和claude design暴揍，股价都快跌没了。。。用Figma的小伙们要不要弃暗投明（开个玩笑，嘻嘻）

Stitch 引发的 AI 设计工具被颠覆讨论

Stitch 引发的 AI 设计工具被颠覆讨论

对我来说，它的实际作用很具体：先把空白页变成一个可以看的页面。

页面一出来，我就能开始打磨：标题像不像我？模块是不是太像作品集？气质是不是太营销？能不能看出我在做长期内容资产？我一开始注意到 Stitch，也是因为这类讨论突然多了起来。

一、先别直接把需求丢给 Stitch

很多人用 AI 工具，第一步会直接写：「帮我做一个个人网站首页。」

这样当然能生成东西。但出来的页面，大概率只是一个「看起来像网站」的网站。

工具不知道你是谁，也不知道别人应该怎么理解你。它能给你一个好看的页面，却很难判断这个页面是不是适合你的定位。

所以我先把 ChatGPT 放到了前面。不是让它直接写页面文案，而是先像产品助理一样帮我拆问题：

• 网站目标是什么；
• 访问者第一眼要理解什么；
• 我的身份怎么表达；
• 首页放哪些栏目；
• 哪些风格要避开。

这一步很朴素，但后面省了很多事。需求没说清楚时，Stitch 生成得越快，偏得也越快。

所以第一张关键截图，不是 Stitch 生成页面，而是先判断：这件事到底适不适合交给 Stitch。

先让 ChatGPT 判断 Stitch 适合承担什么角色

先让 ChatGPT 判断 Stitch 适合承担什么角色

接着我又让它把边界说清楚：哪些交给 Stitch，哪些先由我和 ChatGPT 定下来。

ChatGPT 给出 Stitch 的使用边界

ChatGPT 给出 Stitch 的使用边界

二、把模糊偏好改成具体约束

我中间问过 ChatGPT 一个很具体的问题：

主题色我想用黑金色，可以加进去吗？

如果是我自己写 Prompt，很可能就直接加一句「黑金配色，要高级感」。

但 ChatGPT 提醒我：黑金色可以用，问题是很容易做土、做重，甚至做成微商海报。

它给我的建议更具体：

黑色为主，金色只做点缀，不要大面积铺金；
整体要克制、工程化、有长期实验室感；
不要像商业落地页，也不要像奢侈品广告。

这就比「高级感」好用多了。很多时候，我们以为自己在提需求，其实只是在说情绪词。下面这张图，就是 ChatGPT 把「黑金色」拆成具体约束的过程。

ChatGPT 判断主题色是否符合定位

ChatGPT 判断主题色是否符合定位

三、让 ChatGPT 生成 Prompt，再喂给 Stitch

和 ChatGPT 聊完定位、结构和风格后，我没有自己手写 Stitch Prompt。我直接让它把前面的讨论整理成完整提示词。

这里我做了一个小动作：先让它单独输出「全局风格基线」。因为网站后面不会只有首页，如果每个页面都重新描述一遍风格，很容易越做越散。

这张图对应的是「先定风格基线」这一步，后面做其他页面可以复用。

先固定全局风格基线，后面页面可以复用

先固定全局风格基线，后面页面可以复用

整理后的 Prompt 主要包括：

• 页面目标；
• 首页结构；
• 导航栏目；
• 视觉风格；
• 内容入口；
• 不要出现的风格。

到这一步，Prompt 不再是「做个个人网站」，而是一份小型设计说明。我只需要复制到 Stitch 里，让它生成第一版。

下面这张图，就是可以直接喂给 Stitch 的 Prompt。

ChatGPT 生成可复制到 Stitch 的完整 Prompt

ChatGPT 生成可复制到 Stitch 的完整 Prompt

四、第一版不用完美，但要能挑刺

我把 Prompt 丢进 Stitch 后，它很快生成了第一版。

Stitch 根据 Prompt 生成第一版页面

Stitch 根据 Prompt 生成第一版页面

左边是页面解释，右边是一组可看的界面方案。这个时候，页面终于不是想象，而是一个可以讨论的东西。

这张图重点看右侧：它已经从抽象需求变成了可评价的页面。第一眼看，页面是好看的。但多看几秒，我就知道还不对。它有点像建筑事务所官网，也有点像艺术作品集。气质是有了，但离我想要的「AI 工程师个人数字实验室」还有距离。

我具体不满意的点是：标题不够像我，模块太像博客或作品集，页面风格有点重，资源入口不清楚，也没有看出「个人系统」和「数字资产」之间的关系。

没有第一版时，我只是在脑子里觉得「哪里不对」。看到页面之后，我终于能把「不对」说清楚。

五、截图、挑刺，再让 ChatGPT 改 Prompt

第一版出来后，我没有在 Stitch 里反复乱调。我的做法很简单：

1. 截图发给 ChatGPT；
2. 说清楚哪里不像我；
3. 让它生成修改 Prompt；
4. 再复制回 Stitch。

我当时说得很直白：

这个看起来太像建筑作品集了，不像一个 AI 工程师的个人数字实验室。

这句话很口语，但足够了。ChatGPT 会把它拆成更具体的问题：视觉隐喻太重、真实身份被藏住、工具和系统能力表达不足。

这张图就是我把“不满意”的版本发回去后，ChatGPT 帮我拆问题。

把不满意的截图发给 ChatGPT，让它分析问题

把不满意的截图发给 ChatGPT，让它分析问题

当问题被拆清楚后，下一轮 Prompt 就很好写了。我不用假装自己是设计师，只需要看着页面说：哪里像我，哪里不像我。

下一张图对应修改方向，它把我的口语反馈整理成 Stitch 能执行的 Prompt。

ChatGPT 根据反馈生成下一轮修改方向

ChatGPT 根据反馈生成下一轮修改方向

六、可以直接复用的三步

如果你也想试，可以按这个顺序来。

第一步，先问 ChatGPT：我想做一个个人网站，请先帮我澄清定位，不要直接写文案。重点问我：访问者 10 秒内应该理解我是谁？网站承载哪些长期内容？它更像作品集，还是个人实验室？

第二步，让 ChatGPT 生成 Stitch Prompt：包含页面目标、首页结构、导航栏目、视觉风格、内容模块、不要出现的设计风格。

第三步，把 Stitch 第一版截图发回 ChatGPT：请它评估哪里符合定位、哪里偏了，并输出下一轮修改 Prompt。

这三步基本就能跑通第一轮。

开发

页面方向基本满意后，下一步才是开发。这时候再交给 Codex 或其他代码 Agent，效率会高很多。

这张图放在最后，是为了说明下一步：页面方向收敛后，再交给代码 Agent 工程化。

页面方向确定后，准备交给 Codex 开发

页面方向确定后，准备交给 Codex 开发

因为你给它的任务已经不再是「帮我做个个人网站」，而是更明确的一组约束：页面风格、首页结构、内容模块，以及后续要接文章资源和部署。

最后

这里还有一个彩蛋。

对普通用户体感最好的网站开发全流程

对普通用户体感最好的网站开发全流程

我直接用 Vercel 部署。对普通人来说，这一步其实特别友好：代码推上去，部署、预览、访问链接基本都能一起解决。如果后面再绑定自己的域名，也不用自己折腾服务器、Nginx 和一堆运维配置。也就是说，这条链路不是只停在「做出一张好看的网页」。它可以继续往后走：Stitch 先定页面方向，Codex 帮你工程化，Vercel 负责上线和访问。对一个想做个人站的人来说，这才是最省心的地方。

这也是我这次很深的感受：AI 没有替我决定个人站应该长什么样。它只是把空白页往前推了一步。先把想法变成页面。再看着页面，一轮轮把自己想表达的东西改清楚。

你做个人站或者作品集时，容易卡在哪一步？是定位表达、页面设计，还是后面的开发上线？ 有问题欢迎私信我！

下一篇我会继续拆：如何把 Stitch 生成的页面，交给 Codex 开发成一个可以上线的完整个人站。

资料来源

• Google Blog：Introducing “vibe design” with Stitch，2026-03-18 https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/
• Google Blog：5 things from I/O to try right now，2025-06-12 https://blog.google/innovation-and-ai/products/io-2025-tools-to-try-globally/