不写一行代码：设计师用 AI 把个人网站从草图做到上线的全流程

作品集到底发 PDF 还是个人网站，设计师圈子里吵了很多年。PDF 胜在可控，导出去什么样就是什么样；个人网站胜在鲜活，有交互、有动效、能持续更新，可一旦涉及"找开发实现"，画风就变了——精心对齐的网格、调了两天的间距、做了三版才定下的动效，上线后总有一处被"技术原因"干掉。会写代码的设计师是少数，大多数人只能二选一。

现在这道选择题有了新解法。一位设计师最近更新了自己的第三版个人网站，从设计构思到部署上线全程没写一行代码，把完整流程公开了出来。整个工具链只依赖一个付费订阅：ChatGPT Plus，其余工具全部免费。

工具栈：四件套各管一段

先看全局分工：产品构思用 ChatGPT 网页版；界面设计用 Pencil；设计稿完成后交给 Codex 做开发和动效；最后通过 GitHub 和 Vercel 部署上线。四段流程各有一个趁手的工具，互不重叠。

第一步：跟 AI 把网站聊清楚

动手设计之前，先想清楚三个问题：这个网站用来干什么？给谁看？需要放哪些内容？求职展示、吸引合作方、建立个人品牌，三种目标对应的内容结构完全不同。

作者的做法很松弛：第一句话不需要什么准备，表达得没逻辑也没关系，让 AI 尽情激发想法，这个阶段就是头脑风暴。一个小技巧是尽量用语音输入，或者直接打开对话模式，说话比打字更容易把想法讲清楚。聊完的产出是一份信息框架：整个网站分几个板块、每个板块放什么、交互流程怎么走。有了这份框架，后面的设计才有据可依。

第二步：Pencil 里搭低保真

设计工具选 Pencil 而不是 Figma 的理由很实际：它本身免费，订阅了 ChatGPT 就能在里面调用 GPT 模型，消耗的是订阅套餐内的额度，不用额外付费。把信息框架发给它，AI 生成的设计稿已经用自动布局搭好了结构，后续调整不会散架。这一步只关心信息放得对不对，不用管好看不好看。

第三步：视觉板定调，边拼边改

定风格的方式值得抄作业：先在 Pinterest 找一批参考图，放进 Pencil 做成一张视觉板，每个画板都标注想借鉴的点，方便 AI 读取。生图用 Image 2.5 模型，但可以在 ChatGPT 网页端、Codex、Pencil 几个平台之间切换调用——某个平台生成的风格跑偏了，就换个环境重试。生成效果不错的图随手放回视觉板，好素材不散落。

高保真稿不是一次生成的，而是"拼"出来的：保留低保真的信息结构，用生成的图片把对网页的设想拼上去——首屏放什么形象、作品用什么卡片形式、按钮长什么样，逐步细化到满意，最后再让 AI 统一色彩、调整间距。这一步做得越细，后面转成网页的还原度就越高。

第四步：Codex 开发，ReactBits 补动效

开发阶段反而最省心：把 Pencil 画板链接和设计图发给 Codex，它读取画板里的设计信息直接生成网页。项目管理上有个实用经验——按功能模块把项目拆成几个对话，避免上下文过长干扰 AI 判断。

静态页面出来后，动效去哪找？作者的答案是 reactbits.dev：这个网站把常用动效封装成了现成组件，水波光标、重力文字、文件夹展开、工牌悬挂都有。面对一整站动效不知从哪下手，技巧是把做好的静态设计稿和动效网站链接一起发给 AI，让它根据网站风格推荐合适的动效，设计师确认后再逐个实现。网站里实际用到的四种动效，都是这么挑出来的。

第五步：推上 GitHub，部署到 Vercel

最后一步是标准的部署流程：代码推送到 GitHub 仓库，再通过 Vercel 一键部署上线，后续每次更新代码，线上网站自动同步。有一个针对国内访客的提醒：Vercel 分配的域名在国内可能无法直接访问，解决办法是在阿里云或腾讯云买一个域名绑定上去，网站就能稳定打开了。

写在最后

回头看这套流程，最有价值的原则是"AI 负责实现，人负责判断"。信息结构、视觉方向、动效取舍，每个关键决策都由设计师拍板，AI 只负责把决策变成现实——这正是过去设计稿到开发环节最容易失真的那一段。工具会不断换代，但"把想法讲清楚、把标准定清楚"的能力，才是这套工作流里最不会被替代的部分。手上正攒着作品集的设计师，不妨从低保真那一步开始试一次。