视觉效果提升200%！手把手教你3步用GPT做出漂亮网站

一、全文速览

十五天的活儿，现在只要 10 分钟……

我以前接个网站设计，跟甲方扯皮、找几十张参考、在 Ps 里抠排版配色，一套流程走下来，半个月时间没了。

现在用 GPT 和 Gemini 一句话就能生成网页（还能自适应），说实话，爽是真爽。

可我很快发现一个问题，只要我提科技感，它默认给我搞出一套蓝紫渐变，只要我什么都不提，好了，它给我生成一样的。

​​

我专门去搜了一下，之前大模型都是调用一套默认的 shadcn/ui 模板，它算是前端和 AI 编程最火的一套开源 UI 组件（基于 React、Tailwind CSS 和 Radix UI 构建）。

搞笑的是，Tailwind CSS 的创始人曾出来道歉，这个样式库太受欢迎了，无数开发者和 AI 工具照搬了这套样式，全都是清一色的靛蓝色按钮。

​​

那有没有什么方法，能系统地实现个性化设计？

可以，我今天给大家总结了一套清晰的方法流程，三步搞定，直接上干货！

二、使用最新模型

大家都在吐槽 AI 做网页千篇一律、太死板。

但说实话，现在大模型迭代速度太快，自己就把审美给卷上去了，最新模型生成的，可能比那些套壳模板还要好看。

为了验证它到底有没有长进，我直接拿手头的 GPT 6-Astra（DeepSeek、WorkBuddy 也可以）做了个测试。

我给了它三个完全不同的主题：待办事项 APP、川菜馆，还有一个摄影师个人作品集。

​​

我全程没给它任何参考图，也没套用任何样式库，就是纯裸跑，内容让它自己填充，看看它能画成什么样。

​​

这是纯用 GPT 跑出来的待办 APP 网页。

看着挺舒服，没有花里胡哨的堆砌，蓝白配色符合主题调性，番茄钟组件和主图右边的待办事项都是可交互的，就是背景有些单调。

​​

第二个测试川菜馆官网

结构完整，图文排版和菜品标价该有的都有，还用了衬线体（手写体应该效果更好）。

排版风格有点像私房菜。

​​

第三个测试摄影师作品集

极简留白、错落排版，再配上衬线字体和大尺寸图片，杂志那种高级感一下就出来了，只是其中的作品需要替换。

如果你只是传达信息，做一个简单的个人网站，选个最新最强的模型，够用了。

三、使用素材库

AI 写代码的能力已经够强了，但它在审美和判断力上有个盲区，很多人都在抢着给这个盲区打补丁。

所以，现在冒出了无数个模板样式 Skill 和素材库。

它们的套路其实很粗暴，开发者建了一个超大的高颜值网页图库，喂给 AI，顺便给它定一堆约束。

如果你觉得默认的风格并不能满足你的需求，那么你只要调用这个 Skill，它就从图库里挑一套好看的风格，套在你当前的网站上。

我在 GitHub 上找了两个最火的模板 Skill，taste-skill（10.8 万颗星）和 hallmark（4.5 万颗星），套一下看看效果如何。

​​

​​

安装方式（直接复制这段话，往 AI 的对话框里一贴就行）：

taste-skill

npx skills add Leonxlnx/taste-skill

hallmark

npx skills add nutlope/hallmark -g

使用方法也很简单，只需要在对话框中输入：

用 design-taste-frontend/hallmark 重新设计刚才的三个网站，另存为新版本。

​​

我在第一版的抽卡中，因为没有强调要根据三个主题选择对应风格，结果就是他们调用了同一套模版，可以看出待办事项明显和这种风格不搭。

我调整提示词，加了一句：根据其主题选择对应风格（这句很重要）

几十分钟后，我得到了 6 个网页。

​​

design-taste-frontend 生成

​​

hallmark 生成

Skill 的好处是，它不仅可以节省你的时间，而且可以和默认风格做区分，如果你设计的主题，恰巧素材库中有同类，那么效果会很好。

比如调用了 hallmark 生成的摄影师个人网站，会比默认风格好。

​​

而待办事项 APP 的网页设计，个人觉得第一版会更好些。

​​

川菜馆的网站，design-taste-frontend 生成的效果会更出彩。

​​

不过，这里有一个坑：市面上绝大多数的网站素材 Skill，收录的都是英文模板。

你直接套在中文网页上，字体、行距、视觉重心经常会水土不服，必须得自己手动去调字号和其他样式。

那如果你试了一圈，觉得这些素材库还是没法完美匹配你的需求，怎么办？

最后一招：自己动手。

四、使用自定义

如果你追求极致的个性，或者甲方有特殊需求，那就别偷懒了，自定义吧。

调整字体、布局、添加图片、特效、动画，都可以。

流程就四步：哪里看不顺眼，马上去网上找张参考图，甩给 AI，告诉它你要这么做，我想要达到的效果是什么。

你没法直接跟它说高级点，因为它听不懂。

你必须用一张张具体的参考图，告诉它：你想要的是什么。

比如在川菜馆的菜品介绍区域，我觉得只有文字有些单调。

​​

我直接跟它说，川菜菜品部分，需要在菜名左侧加上菜品的真实图片。

然后喂给它一张你想要的效果图。

​​

你就可以得到下面的效果。

​​

还不够，我接着让它在列表中添加背景和投影、辣度图示，右上角加入装饰。它可以不断调整。

​​

那如果脑袋里一片空白，憋不出灵感怎么办？

简单，去那些顶级的网站上转一圈，看到哪个网站的某个交互或者 Banner 动画特别适合，直接截图或者把链接甩给 AI。

​​

直接告诉它：我看上这个动效了，把它给我拆一下，然后套在我网页的某个区域。

五、干货时间

我实在是懒得去折腾素材库，又觉得 AI 默认生成的页面太无聊，想花最少的力气搞点高级感，怎么办？

简单，直接在提示词里把这些视觉标签写进去。

比如想要苹果那种极简风，别写简约，写瑞士国际主义排版、超大留白、黑白灰主色调配克莱因蓝点缀。

想要高级的科技感，别写未来感，写深色模式（Dark Mode）、玻璃拟物化（Glassmorphism）、细腻的微光边框。

把这些词直接填充到你的提示词里，你会发现出来的页面，立马就不一样了。

我这里给大家整理 10 个最常见、极具代表性的视觉风格，提示词也都填好了，你可以直接用。

​​