把作品放在更自由的骤保地方 ，把表达交还给自己 。姆级
作为一名 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 就能控制样式 ，还支持主题切换 ，组件化开发特别爽 。
比如 ，你要做一个卡片 ：
每个样式都很语义化 ，一眼能看出这个组件的“长相” ：
用了 Tailwind 的人 ，基本都不愿意再回去写传统 CSS ，因为它就是太爽了 。
前端框架 ：React / Vue / AngularJS
基本是目前主流的前端框架了 ，它们帮助你把页面变得“像搭积木一样” ，每个功能或板块都是独立组件 ，写起来更清晰 ，维护也更轻松 。
Javascript（JS）& TypeScript（TS）
JS 是网页上的“行为语言” ，主要用来实现交互 ，比如点击按钮切换内容 、弹窗 、页面滚动动画等；
TS 是 JS 的“加强版” ，可以让代码更规范 、安全 ，适合做大型项目。
在今天 ，其实我建议大家是选自由开发的路 ，因为我们完全可以借助 AI 来快速推进，不需要管各种框架 、语言多么的复杂，请无脑选最成熟的 ！
“干中学”—— 虽然我们可以一点不懂代码都完全抛给 AI ，但还是建议稍微了解一点前端的底层知识 ，例如 HTML 和 CSS…… 不然很难在搭建过程得到成长 。
先说结论 ：靠谱 ，甚至可以说 ，是完全颠覆式的体验 。
我们总觉得做网站写代码太烧脑，要么拖拽工具又限制多 ，更别提那些“改个小地方要改三十处”的烦人细节 。但现在 ，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 的陪伴式助手；对有经验的人 ，它是提速写代码 、少走弯路的效率利器 。
别一上来就想着视觉 、结构和动效 ，先问自己一个问题 ：
我希望网站帮我完成什么 ？
是找工作，还是输出内容 ？是打造个人 IP ，还是只是想试试写代码的感觉 ？不同的目标 ，决定了你后续做页面规划、内容组织、甚至部署方式的选择。
几个常见的目标 ：
目标不需要太大，但要真实——你做这个网站 ，是想让谁看到 ？想传达什么印象 ？先想清楚这一点 ，后面的选择才会更轻松 。
虽然个站不用像产品项目那样搞 PRD，但也建议提前大致想好页面结构 。推荐一套适用于大多数设计师网站的基础页面组合 ：
页面越少 ，越容易落地 。你也完全可以只从一个 About 页开始 ，后面慢慢补上其他内容。
当然作为设计师 ，如何从原型到视觉稿这里就不再赘述了
你不需要搭建什么复杂环境 ，用一些基础工具就足够应对建站需求了 。
代码编辑器：VS Code
插件推荐 ：Tailwind CSS IntelliSense 、Prettier 、ESLint 、GitLens、Copilot（AI 自动补全）…
AI 辅助工具：ChatGPT
可以作为开发对话助手 ，负责页面生成 、结构拆解 、动效调试；后面章节会细讲使用技巧 。
代码托管 ：GitHub
将项目托管上去 ，就能配合部署平台自动完成构建上线，代码更新也会实时同步 。更重要的是 ，哪怕你不熟 Git 指令，也可以搭配让 ChatGPT 帮你写出从提交到上线的完整流程和脚本 。
如果你已经有一些个人标识（比如 logo 、色彩方案 、字体喜好等），也可以顺手整理一下 ，这些会在后期样式构建中派上用场。
到这一步 ，我们就真正进入“动手做”的环节了。
其实这部分最重要的不是你能写出多少代码 ，而是你知道怎么表达你的想法 。我们会分两步来讲 ：
说实话，像什么 Vite 、React 、Tailwind 的安装和配置 ，我一开始也搞不清楚 。但现在这些事根本不用你亲手查 、硬着头皮配 。
你只需要问一句 ：
“我想建一个用 React + Tailwind 的网站，用 Vite 初始化项目 ，请帮我写出完整的初始化步骤 。”
ChatGPT 就会一步步告诉你怎么做 ，包括 ：
你照着它说的复制粘贴就行，几分钟就能跑起来一个空白页面 ，后续所有开发都从这里开始 。
这个过程最重要的一点是 ：你不用搞懂每一行代码在干嘛 ，但要知道你在做什么 。
比如你要的是“React + Tailwind”，那就直接告诉它；你要加上 TypeScript、加路由 ，也可以提前说，它就会自动帮你安排好所有配置 。
环境搭好之后 ，接下来就是写页面了 。但“写代码”这事 ，你真不用自己去写。
我建站过程中最有感的一点就是 ：你只要说清楚你想要什么 ，ChatGPT 就能帮你搭出来 。
比如我一开始就直接跟它说：
“我想做一个 About 页面 ，上面放头像 、名字和一句自我介绍 ，居中排版 ，用 Tailwind 。”
ChatGPT 就直接写了一个完整的组件 ，结构 、样式、注释全都有 ，甚至还贴心告诉我“这个地方你可以自己换成你的头像和文字” 。
我又补了一句 ：
“再写一个 ProjectCard 组件 ，title / description / image 做输入 ，样式整洁有层次 。”
它首先会基于你的想法梳理边界及步骤 ，如果有多个方案的选择，也会询问你的意向 ，直到最后稳健的代码 ，并且 ChatGPT 自有的代码块 ，能够直接替换代码 ，省的你去翻找 。
你只需要不断明确你的想法 ，它就会不停帮你推进开发 。
那我到底该怎么和 AI 配合 ？
这其实是个“提问技巧”问题：
你说得越清楚 ，AI 回答得越准确 。哪怕你表达模糊 ，它也会尝试理解你的意思 ，并提供方案让你选 。
而且 ，如果它第一次没给到你想要的效果 ，你还可以接着追问 ：
“加点阴影试试 ？” “图片能不能变成圆角的？” “我想让间距更宽一点 。”
它不会不耐烦，更不会拒绝你 ，改到你满意为止 。
还是补充一句 ，如果你选择了 VS Code 编辑器 ，记得装上 Copilot 插件。它不是那种对话形式 ，而是实时帮你“猜”你要写什么，而且比 ChatGPT 还安静不打扰 。有时候你只打了一个 div ，它已经猜你要放头像 、名字和一句话了……
做网站做到一半 ，你可能会有这种感觉 ：
? 功能是跑起来了 ，但好像哪里还差点意思； ? 想加点动效 ，描述了半天 ，AI 做出来却完全不对味。
这时候，推荐你去逛一逛那些第三方组件 / 动效资源库。它们不是传统那种堆满按钮 、表单的企业级 UI 组件 ，而是更适合个人网站的一点小炫技 。比如
这几个库的共同点是：好看、好用 、上手快 。你一打开就能看到实际效果动起来 ，喜欢哪个直接复制 ，完全不需要翻文档硬读。实在不会 copy ？直接丢给 ChatGPT ，让它教你怎么嵌进项目 。
重要的是 ，它们能给你提供一种“交互语感” ：像按钮吸附 、滚动视差 、磁力 hover 、粒子背景这些看起来有点小炫技的效果 ，背后其实都不复杂，但实现起来非常抓眼球 。你不一定照搬原样 ，但可以从这些动效节奏和结构组合中找到灵感 ，甚至让 AI 帮你衍生出自己的风格 。
这其实也呼应了前面提到的那句话 ：“无脑选最好的” 。因为成熟的框架 ，不只是功能全 、文档全 ，还意味着有人已经帮你把各种漂亮的组件和细节做出来了 ，你完全可以站在这些“现成灵感”的肩膀上 。
虽然 ChatGPT 已经帮了大忙 ，但说实话，第一次自己建站 ，多少还是会遇到点小麻烦 。
这些情况很常见 ，别急也别气馁。我当初也经常卡住 ，后来总结出两个比较重要的“心法” ：
① 别想着一口气做完所有页面
很多人一开始就想把首页 、About 、项目集 、Blog 全都写好 ，结果页面一个没跑起来就已经快放弃了 。其实最好的方式 ，是只做一个页面 ，先跑通再说 。
比如先搞一个简单的介绍页 ，头像 + 一句话介绍 + 联系方式 。这个页面能顺利跑起来 ，你会对流程有信心 ，后面复制粘贴慢慢扩展就容易多了 。
做网站跟做设计是一样的 ，一上来就想“做完整套视觉系统” ，多半是拖延和内耗的开始。
② 不要指望 AI 全都懂你
ChatGPT 再强 ，也不是你肚子里的虫，它需要你像写需求文档一样一步步拆解思路 。你说“做得炫酷一点” ，它可能完全不知道你在想啥 。
但如果你换种方式说 ：
“我希望这个按钮 hover 的时候能放大一点，有个缓动动画”“图片上加一层透明遮罩 ，文字能浮出来”
这样它就能听懂 、照做 ，还能给你多个变体让你挑 ，所以你需要做的，其实就是把设计师的视觉语言 ，转换成结构描述 + 行为描述 。
其实网站搭建过程中的不断学习 ，在后期有很多小的问题你完全可以自己解决掉 。
这个过程 ，不光让网站做得出来 ，也让你对“设计落地”这件事 ，多了一点掌控感 。
网站在本地构建完了只剩最后一步 ：把它发布到网上，让别人也能看到 、点开、转发
在上线之前，我们得先搞清楚一件事 ：写好的代码到底要放在哪里？
可能你会想 ，直接绑域名不就完了 ？但其实域名就像是一张地址卡 ，它只是告诉别人“你的网站在哪里”，真正的网站内容（你的代码）得有个实际存放的地方 。
建议最大 ** 交友平台 GitHub ，你可以把它当作一个“代码网盘”——代码传上去 ，版本管理 、自动更新都很方便 ，而且还能配合部署平台一键上线 。
对于部署平台我试过 GitHub Pages、Vercel 、自购服务器这些方案 ，最后还是推荐 腾讯云 EdgeOne ，理由很简单 ：
更重要的是 ，它是免费的 ，而且即使你没备案 ，国内访问速度也很快——亲测效果比大部分海外平台都稳 。
设计师的网站通常图片比较多，像作品图 、动效展示图、大图滚动页 ，很容易就几百 MB 起步 。
而由于我们大多将网站部署在 GitHub 这类海外平台 ，国内访问会比较慢 ，甚至图片直接加载失败 ，体验大打折扣 。因此 ，建议上线前做好这三件事：
① 图片压缩
推荐使用 tinypng.com ，把图片上传后它会自动压缩体积 ，视觉上几乎无差 ，但文件大小能砍掉一半多 ，非常适合作品图、Banner 、动效帧图等内容做预处理 。
② 格式转化
如果你网站中还在大量使用 JPG 、PNG 格式 ，还是建议转成 WebP 。它在视觉质量差异不大的前提下 ，文件体积更小、加载更快 ，很适合网页访问 。
常用工具有：Squoosh ：可在线压缩并转换成 WebP ，支持画质控制；
注意 ：目前 Safari（尤其是低版本）对 WebP 的支持有限 ，如果考虑全面兼容性 ，也可以采用源图 + WebP 的方式按需加载 。
③ 外链图床
不建议把所有图片都直接打包进项目中 ，更推荐上传到图床 ，再用链接引用的方式加载 ，这样网页会更轻盈，访问更快 。
首先 ，不买也没关系 ，EdgeOne 会默认给你一个 .edgeone.app 结尾的子域名 ，不会影响使用 。
但如果你比较介意 ，或是打算长期经营这个网站 ，比如放简历 、做内容输出 ，那还是建议买个好记的独立域名，比如 yourname.design 、yourname.com 之类 ，看起来会更专业 。
域名在哪里买 ？推荐这几个平台：
① 腾讯云 / 阿里云国内大厂平台 ，中文界面友好 ，适合首次买域名的新手 。尤其如果你本来就打算用 EdgeOne 或 COS ，直接在腾讯云买域名可以省一些折腾。
② Namecheap 国外平台，价格透明 、界面简洁，管理也很方便。英文界面 ，但比较适合做国际向品牌或英文域名 。
③ GoDaddy 全球老牌域名商 ，域名种类全、经常有促销，支持中文搜索 ，适合想找冷门后缀或国际向用户使用。
先别急着发朋友圈 ，来个“最后大扫除” ：
这些东西看着不起眼，但也会会影响别人对你网站的第一印象 。
网站上线那一刻 ，并不是终点 ，而是一个新的开始 ，它其实可以慢慢变成你个人品牌的养成地 。比如：
这些小动作不难做 ，但会慢慢积累出你自己的风格和内容资产 。
把网站从“脑子里的一个想法”变成“线上可访问的成品”，这整个过程本身就是一次很棒的练习 。它不只是一个网页 ，更是你用行动在说的一句话 ：“我有点想法 ，想让你看到 。”
愿你的网站不是为“做完”而做，而是为你自己存在——你想说什么 ，想怎么说 ，想给谁看 ，全都由你决定。
这才是最酷的部分 。
编者注 ：如果给自己建个网站 ，你想展示什么内容？欢迎评论区交流 。
作者 ：姜宇De宇
关注微信
