6个步骤保姆级教程！教设计师轻松独立完成建站

把作品放在更自由的地方，把表达交还给自己。

更多AI编程案例：

引言

作为一名 B 端设计师，我一直对代码有着天然的好奇和热爱。虽然我的开发知识只停留在基础层面，但还是觉着设计不该被局限在一张张静态的“飞机稿”里，能把一个想法或交互亲手落地成真实可用的页面，那种成就感是单纯做设计稿无法替代的。

我的网站：jiangyu.pro （该环境为演示分支，内容图片均来自网络）

搭建个人网站，对我而言更像是一种练习：能够尝试不同的交互，探索更自由的视觉呈现，也能用文字记录设计思考。如今借助 AI 的能力，设计师完全可以在无需精通代码的前提下快速把想法落地。

PS：这篇文章不是教程，算是实践经验分享，对于某个操作的详细步骤，我相信你问下 AI 或百度会比我阐述的更清楚。

一、为什么要搭建个人网站

很多设计师在初期都会问一个问题：现在已经有那么多作品平台了，我还需要自己搭网站吗？

确实，像站酷、UI 中国、Behance 这些平台都很成熟，也带来了很多曝光机会。但问题是，它们的展示方式有些统一了——结构定死、节奏一致，不管你怎么精心排版，别人刷到时的感受还是“又一个项目”。

久而久之，人们记住的不是你，而是千篇一律的模板感。

而个人网站真正的价值，不是多放几个项目，而是你可以自己定义一切：结构、节奏、语气，甚至是想说什么、不想说什么。

更重要的是，它会成为你表达风格的延伸：你想怎么设计、怎么呈现都由自己决定，没有模板、没有标准，也没有“别人都是怎么做的”——你唯一需要对齐的，就是你自己想怎么来。

说到底，我们做个人网站，不是为了炫技，也不是为了给别人看一堆“结果”，而是为了让你可以用自己的方式讲述自己、持续释放价值，更有利于设计师长期打造自己的个人品牌 / IP。

二、选择适合自己的建站方式

在真正开始做网站之前，我也纠结了很久：到底要不要学代码？要学多深？是不是有更省事的方式？

查了不少资料，也尝试了几个工具后，其实路径无非三种：零代码、低代码、自己开发。

不管你是什么类型的设计师，应该都能从中找到最适合自己的那条。

一是最省事的：零代码平台

像 Notion + Super、Framer、Vzy 这些工具，拖拖拽拽就能搞定，不用碰一行代码，页面也能看上去还不错，适合完全不想折腾的。

我一开始也试过 Notion，整理内容确实方便，但要想做点有趣的交互或者页面层级比较复杂的结构就做不了了，而且样式看起来有点“平台模板感”了，对于有个性的设计师来说，发挥空间不够。

Framer 则有点像是 figma，通过画框、制作组件交互来实现页面的构建，并且社区也有很多模版供参考选择。

二是稍微进阶一点的：低代码或模板方案

这类方案，像 WordPress、Framer、WIX、SvelteKit 等，通常提供一堆现成模板，配置一下就能上线。也可以接后台、做博客、切换主题……适合内容比较多、功能稍复杂的项目。

哎，你可能会发现 Framer 又出现了？没错，它不仅是简单的拖拽工具，其实也支持嵌入代码，自定义组件逻辑，甚至做出一些数据联动的高级交互。

以上这些工具也并不是“完全免折腾”：要安装环境、调样式、懂点目录结构，还经常踩些坑，适合有一点技术基础或者或愿意花时间摸索的。

三是真正自由的一条路：自己开发

如果你喜欢代码，愿意多花一点时间、想要更自由地控制内容和风格，那就可以考虑自己动手开发。

下面是我研究下来的一些基础技术构成，语言我尽量写得白话一点：

HTML & CSS：网站的骨架 + 皮肤

这两门可以说是建站的“基础中的基础”了。

HTML 决定页面结构（像是你在 Figma 里画框），CSS 负责样式（字体、颜色、动画）。

语法简单，很适合设计师入门，尤其对于 B 端设计师，应该都有了解的。

Tailwind CSS：为设计师量身定制的写法 

相信大家对 token、原子级样式都不陌生，而 Tailwind 本质上就是一套“写 class 控样式”的开发方式。不像传统 CSS 要反复写命名、层层嵌套，直接在元素上写 class 就能控制样式，还支持主题切换，组件化开发特别爽。

比如，你要做一个卡片：

每个样式都很语义化，一眼能看出这个组件的“长相”：

1. bg-white → 背景白色
2. p-6 → 所有方向内间距 24px（Tailwind 的 spacing 单位默认是 4 的倍数）
3. rounded-xl → 大圆角
4. shadow-md → 中等阴影

用了 Tailwind 的人，基本都不愿意再回去写传统 CSS，因为它就是太爽了。

前端框架：React / Vue / AngularJS

基本是目前主流的前端框架了，它们帮助你把页面变得“像搭积木一样”，每个功能或板块都是独立组件，写起来更清晰，维护也更轻松。

1. React：生态成熟、文档丰富、配套工具最多，社区支持最好；👍
2. Vue：语法更简洁，上手快，但在组件生态、AI 辅助开发上略逊一筹；
3. AngularJS：架构完整、企业级方案，但学习曲线陡峭，适合大型应用，在灵活性和现代开发体验上稍显不足。

JavaScript（JS）& TypeScript（TS）

JS 是网页上的“行为语言”，主要用来实现交互，比如点击按钮切换内容、弹窗、页面滚动动画等；

TS 是 JS 的“加强版”，可以让代码更规范、安全，适合做大型项目。

在今天，其实我建议大家是选自由开发的路，因为我们完全可以借助 AI 来快速推进，不需要管各种框架、语言多么的复杂，请无脑选最成熟的！

“干中学”—— 虽然我们可以一点不懂代码都完全抛给 AI ，但还是建议稍微了解一点前端的底层知识，例如 HTML 和 CSS…… 不然很难在搭建过程得到成长。

三、AI 建站靠不靠谱

先说结论：靠谱，甚至可以说，是完全颠覆式的体验。

我们总觉得做网站写代码太烧脑，要么拖拽工具又限制多，更别提那些“改个小地方要改三十处”的烦人细节。但现在，AI 工具已经从“辅助”变成了“主力”，不仅能听懂你说什么，还能真的帮你搭出一个上线可用的网站。

过去几个月我试了非常多工具，有的功能炫酷但难落地，有的看似智能但用起来依旧繁琐。最后我筛选出以下 8 个，都是我认为对设计师来说真正值得一试的 AI 建站利器

1. Framer AI

网址：https://www.framer.com/features/ai/

Framer AI 是一个主打“所见即所得”的网页生成工具。只需输入一句话，它就能生成风格现代、动画流畅的完整网站，适合作品集、展示页等场景。生成后你还能在线拖拽编辑，零代码也能做出专业效果，特别适合注重视觉体验的设计师或创作者。

2. Durable

网址：https://durable.co/

Durable 是一个“开口即上线”的网站生成工具，几乎不需要操作流程。你只需输入行业或业务类型，它就能自动生成包含主页、服务页、表单等内容的完整网站，适合小型商家或自由职业者快速上线使用。无需设计、无需写代码，上手极快。

3. Wegic AI

网址：https://wegic.ai/zh-cn

Wegic 用自然语言帮你搭网页，说一句话，它就能画出页面结构并自动生成前端代码。相比传统开发，它更像是帮你“半自动写网页”的工具，适合希望了解代码结构、又不想从零写起的用户。轻量好用，也适合快速做展示页或 Demo。

4.  Uizard

网址：https://uizard.io/

Uizard 更偏向原型设计和界面搭建，支持拖拽和 AI 生成页面结构，也能把手绘稿变成界面草图。适合项目早期做思路演示，帮助你快速构建网站雏形，虽然不是最终上线用的网站工具，但对产品设计或网页结构规划非常有帮助。

5. MakeLanding

网址：https://makelanding.ai/

专注做“营销型登陆页”，尤其适合产品介绍、活动宣传等场景。你只要输入产品描述，它就能自动生成一页结构合理、文案清晰的宣传页，包含卖点介绍、用户评价、FAQ 等模块。页面干净利落，生成速度快。

6. Dora AI

网址：https://www.dora.run/ai

Dora 主打视觉和交互体验，能生成包含 3D 动效、滚动特效的网页，页面效果炫酷、富有动感。它更适合有视觉设计需求的用户，如果你希望网页不仅实用还“出圈”，可以尝试。但相对也比其他工具复杂，适合愿意深挖细节的创作者。

7. GitHub Copilot

网址：https://github.com/features/copilot

Copilot 是一位 AI 编程搭档，能根据你写的注释、关键词，自动补全 HTML、CSS、JS 等代码。对学代码的小白非常友好，不会写也能学着做，能快速搭建页面、理解结构。适合正在学习网页开发、希望提升写代码效率的技术初学者（学生党有福利！）

8. ChatGPT

网址：https://chatgpt.com/

很多人觉得 ChatGPT 就是个“能对话的搜索引擎”，其实它已经远不止于此。ChatGPT 在 24 年就开放了应用联动，可以配合 VS Code 在项目中查找文件、编辑代码。

主要它不是只给你一段孤立的代码，而是能根据你的需求*一步步帮你拆解任务，解释概念，按流程帮你构建整个网站——从选框架、搭建项目，到写组件、调样式，再到处理交互、补全文案。

对于零基础设计师，它是从 0 到 1 的陪伴式助手；对有经验的人，它是提速写代码、少走弯路的效率利器。

四、搭网站前，你需要准备这些

1. 明确目标：你的网站要做什么？

别一上来就想着视觉、结构和动效，先问自己一个问题：

我希望网站帮我完成什么？

是找工作，还是输出内容？是打造个人 IP，还是只是想试试写代码的感觉？不同的目标，决定了你后续做页面规划、内容组织、甚至部署方式的选择。

几个常见的目标：

1. 找工作 / 求职用：突出代表项目和个人能力，信息清晰；
2. 建立个人品牌：注重风格调性和内容的持续性表达；
3. 记录思考 / 输出内容：需要有博客功能和良好的阅读体验；
4. 承接项目 / 商业用途：强调转化效率、联系方式和案例展示；

目标不需要太大，但要真实——你做这个网站，是想让谁看到？想传达什么印象？先想清楚这一点，后面的选择才会更轻松。

2. 页面结构：先规划，不要一上来就写代码

虽然个站不用像产品项目那样搞 PRD，但也建议提前大致想好页面结构。推荐一套适用于大多数设计师网站的基础页面组合：

1. Home：首页，介绍你是谁 + 精选项目预览；
2. About：自我介绍 + 简历链接 / 联系方式；
3. Work / Projects：项目页，可单独介绍每个作品；
4. Blog（可选）：输出设计思考、开发日记等；
5. Contact（可选）：放邮箱、社媒链接、表单等联系信息。

页面越少，越容易落地。你也完全可以只从一个 About 页开始，后面慢慢补上其他内容。

当然作为设计师，如何从原型到视觉稿这里就不再赘述了

3. 准备开发工具：轻便、好上手就够了

你不需要搭建什么复杂环境，用一些基础工具就足够应对建站需求了。

代码编辑器：VS Code

插件推荐：Tailwind CSS IntelliSense、Prettier、ESLint、GitLens、Copilot（AI 自动补全）…

AI 辅助工具：ChatGPT

可以作为开发对话助手，负责页面生成、结构拆解、动效调试；后面章节会细讲使用技巧。

代码托管：GitHub

将项目托管上去，就能配合部署平台自动完成构建上线，代码更新也会实时同步。更重要的是，哪怕你不熟 Git 指令，也可以搭配让 ChatGPT 帮你写出从提交到上线的完整流程和脚本。

如果你已经有一些个人标识（比如 logo、色彩方案、字体喜好等），也可以顺手整理一下，这些会在后期样式构建中派上用场。

五、设计师如何与 AI 合作建站

到这一步，我们就真正进入“动手做”的环节了。

其实这部分最重要的不是你能写出多少代码，而是你知道怎么表达你的想法。我们会分两步来讲：

1. 初始化环境：项目先搭起来

说实话，像什么 Vite、React、Tailwind 的安装和配置，我一开始也搞不清楚。但现在这些事根本不用你亲手查、硬着头皮配。

你只需要问一句：

“我想建一个用 React + Tailwind 的网站，用 Vite 初始化项目，请帮我写出完整的初始化步骤。”

ChatGPT 就会一步步告诉你怎么做，包括：

1. 下载什么工具（比如 Node.js）
2. 怎么新建项目
3. 安装哪些依赖
4. 哪些文件要改动
5. 最后怎么启动项目跑起来

你照着它说的复制粘贴就行，几分钟就能跑起来一个空白页面，后续所有开发都从这里开始。

这个过程最重要的一点是：你不用搞懂每一行代码在干嘛，但要知道你在做什么。

比如你要的是“React + Tailwind”，那就直接告诉它；你要加上 TypeScript、加路由，也可以提前说，它就会自动帮你安排好所有配置。

2. 你说需求，AI 写代码

环境搭好之后，接下来就是写页面了。但“写代码”这事，你真不用自己去写。

我建站过程中最有感的一点就是：你只要说清楚你想要什么，ChatGPT 就能帮你搭出来。

比如我一开始就直接跟它说：

“我想做一个 About 页面，上面放头像、名字和一句自我介绍，居中排版，用 Tailwind。”

ChatGPT 就直接写了一个完整的组件，结构、样式、注释全都有，甚至还贴心告诉我“这个地方你可以自己换成你的头像和文字”。

我又补了一句：

“再写一个 ProjectCard 组件，title / description / image 做输入，样式整洁有层次。”

它首先会基于你的想法梳理边界及步骤，如果有多个方案的选择，也会询问你的意向，直到最后稳健的代码，并且 ChatGPT 自有的代码块，能够直接替换代码，省的你去翻找。

你只需要不断明确你的想法，它就会不停帮你推进开发。

那我到底该怎么和 AI 配合？

这其实是个“提问技巧”问题：

1. 描述结构：「我要三栏布局，右边放一个按钮」
2. 描述交互：「这个按钮 hover 的时候放大一点，有个过渡动效」
3. 描述场景：「我想做个作品展示页，像 Behance 那样排布」

你说得越清楚，AI 回答得越准确。哪怕你表达模糊，它也会尝试理解你的意思，并提供方案让你选。

而且，如果它第一次没给到你想要的效果，你还可以接着追问：

“加点阴影试试？” “图片能不能变成圆角的？” “我想让间距更宽一点。”

它不会不耐烦，更不会拒绝你，改到你满意为止。

还是补充一句，如果你选择了 VS Code 编辑器，记得装上 Copilot 插件。它不是那种对话形式，而是实时帮你“猜”你要写什么，而且比 ChatGPT 还安静不打扰。有时候你只打了一个 div，它已经猜你要放头像、名字和一句话了……

3. 善用第三方组件库

做网站做到一半，你可能会有这种感觉：

👉 功能是跑起来了，但好像哪里还差点意思； 👉 想加点动效，描述了半天，AI 做出来却完全不对味。

这时候，推荐你去逛一逛那些第三方组件 / 动效资源库。它们不是传统那种堆满按钮、表单的企业级 UI 组件，而是更适合个人网站的一点小炫技。比如

这几个库的共同点是：好看、好用、上手快。你一打开就能看到实际效果动起来，喜欢哪个直接复制，完全不需要翻文档硬读。实在不会 copy？直接丢给 ChatGPT，让它教你怎么嵌进项目。

重要的是，它们能给你提供一种“交互语感”：像按钮吸附、滚动视差、磁力 hover、粒子背景这些看起来有点小炫技的效果，背后其实都不复杂，但实现起来非常抓眼球。你不一定照搬原样，但可以从这些动效节奏和结构组合中找到灵感，甚至让 AI 帮你衍生出自己的风格。

这其实也呼应了前面提到的那句话：“无脑选最好的”。因为成熟的框架，不只是功能全、文档全，还意味着有人已经帮你把各种漂亮的组件和细节做出来了，你完全可以站在这些“现成灵感”的肩膀上。

4. 可能会遇到的一些问题

虽然 ChatGPT 已经帮了大忙，但说实话，第一次自己建站，多少还是会遇到点小麻烦。

1. 样式写上了但没生效，不知道哪儿出了问题；
2. 有时结构乱了，看不懂它怎么组织的
3. 你讲了一堆需求，AI 却完全跑偏方向……

这些情况很常见，别急也别气馁。我当初也经常卡住，后来总结出两个比较重要的“心法”：

① 别想着一口气做完所有页面

很多人一开始就想把首页、About、项目集、Blog 全都写好，结果页面一个没跑起来就已经快放弃了。其实最好的方式，是只做一个页面，先跑通再说。

比如先搞一个简单的介绍页，头像 + 一句话介绍 + 联系方式。这个页面能顺利跑起来，你会对流程有信心，后面复制粘贴慢慢扩展就容易多了。

做网站跟做设计是一样的，一上来就想“做完整套视觉系统”，多半是拖延和内耗的开始。

② 不要指望 AI 全都懂你

ChatGPT 再强，也不是你肚子里的虫，它需要你像写需求文档一样一步步拆解思路。你说“做得炫酷一点”，它可能完全不知道你在想啥。

但如果你换种方式说：

“我希望这个按钮 hover 的时候能放大一点，有个缓动动画”“图片上加一层透明遮罩，文字能浮出来”

这样它就能听懂、照做，还能给你多个变体让你挑，所以你需要做的，其实就是把设计师的视觉语言，转换成结构描述 + 行为描述。

其实网站搭建过程中的不断学习，在后期有很多小的问题你完全可以自己解决掉。

这个过程，不光让网站做得出来，也让你对“设计落地”这件事，多了一点掌控感。

六、上线部署

网站在本地构建完了只剩最后一步：把它发布到网上，让别人也能看到、点开、转发

1. 用什么平台上线？

在上线之前，我们得先搞清楚一件事：写好的代码到底要放在哪里？

可能你会想，直接绑域名不就完了？但其实域名就像是一张地址卡，它只是告诉别人“你的网站在哪里”，真正的网站内容（你的代码）得有个实际存放的地方。

建议最大 ** 交友平台 GitHub，你可以把它当作一个“代码网盘”——代码传上去，版本管理、自动更新都很方便，而且还能配合部署平台一键上线。

对于部署平台我试过 GitHub Pages、Vercel、自购服务器这些方案，最后还是推荐 腾讯云 EdgeOne，理由很简单：

1. 不用配置脚本、不用管构建流程，代码更新至仓库就会触发构建；
2. 自动识别项目框架（React、Vite、Next 等）；
3. 支持一键证书、自定义域名绑定；

更重要的是，它是免费的，而且即使你没备案，国内访问速度也很快——亲测效果比大部分海外平台都稳。

2. 图片太多怎么办？

设计师的网站通常图片比较多，像作品图、动效展示图、大图滚动页，很容易就几百 MB 起步。

而由于我们大多将网站部署在 GitHub 这类海外平台，国内访问会比较慢，甚至图片直接加载失败，体验大打折扣。因此，建议上线前做好这三件事：

① 图片压缩

推荐使用 tinypng.com，把图片上传后它会自动压缩体积，视觉上几乎无差，但文件大小能砍掉一半多，非常适合作品图、Banner、动效帧图等内容做预处理。

② 格式转化

如果你网站中还在大量使用 JPG、PNG 格式，还是建议转成 WebP。它在视觉质量差异不大的前提下，文件体积更小、加载更快，很适合网页访问。

常用工具有：Squoosh：可在线压缩并转换成 WebP，支持画质控制；

注意：目前 Safari（尤其是低版本）对 WebP 的支持有限，如果考虑全面兼容性，也可以采用源图 + WebP 的方式按需加载。

③ 外链图床

不建议把所有图片都直接打包进项目中，更推荐上传到图床，再用链接引用的方式加载，这样网页会更轻盈，访问更快。

3. 要不要买一个域名

首先，不买也没关系，EdgeOne 会默认给你一个 .edgeone.app 结尾的子域名，不会影响使用。

但如果你比较介意，或是打算长期经营这个网站，比如放简历、做内容输出，那还是建议买个好记的独立域名，比如 yourname.design、yourname.com 之类，看起来会更专业。

域名在哪里买？推荐这几个平台：

① 腾讯云 / 阿里云国内大厂平台，中文界面友好，适合首次买域名的新手。尤其如果你本来就打算用 EdgeOne 或 COS，直接在腾讯云买域名可以省一些折腾。

② Namecheap 国外平台，价格透明、界面简洁，管理也很方便。英文界面，但比较适合做国际向品牌或英文域名。

③ GoDaddy 全球老牌域名商，域名种类全、经常有促销，支持中文搜索，适合想找冷门后缀或国际向用户使用。

4. 上线前的快速检查清单

先别急着发朋友圈，来个“最后大扫除”：

这些东西看着不起眼，但也会会影响别人对你网站的第一印象。

最后的最后

网站上线那一刻，并不是终点，而是一个新的开始，它其实可以慢慢变成你个人品牌的养成地。比如：

这些小动作不难做，但会慢慢积累出你自己的风格和内容资产。

把网站从“脑子里的一个想法”变成“线上可访问的成品”，这整个过程本身就是一次很棒的练习。它不只是一个网页，更是你用行动在说的一句话：“我有点想法，想让你看到。”

愿你的网站不是为“做完”而做，而是为你自己存在——你想说什么，想怎么说，想给谁看，全都由你决定。

这才是最酷的部分。

编者注：如果给自己建个网站，你想展示什么内容？欢迎评论区交流。