难得有空闲的时间,最近一直在搞课程和毕设。因为毕设要用到现在的服务器做平台,我留意到现在网站的页面UI实在是太outdated了,我想着搞完毕设之后顺便用AI帮我重构一下网站的UI吧。
2022年年底,随着ChatGPT的出现,我们开始进入AI的新纪元。作为AI的首批用户,我在初版GPT的体验中确实感觉到了惊艳,但是还没有觉得这个新技术有颠覆世界的能力。在初始阶段,它之只能聊一些简单的对话,输出一些看似能用的代码,稍微复杂一点的逻辑推理、项目制作,那它可就要思维错乱了。
步入2026,AI的功能已经相当的成熟,从单一的文本输入,开始延伸出多模态的能力,从只能在网页端聊天的Chat Bot摇身一变成了掌管万千技能的Agent。对于我们计算机专业的学生来说感受颇深:在2023年们还需要手敲代码,手搓PPT,到现在只需要给AI一段提示词,他便能将你给他的任务一步步拆分,调用各种技能来实现一个完整的项目。现在,不再需要我们充当项目的执行者,完整的细化这一步该怎么做,下一步该怎么走,报错出现在第几行,要怎么去修复。而是充当一个项目的拍板者,只需给出脑海中的构思,心中的想法,项目就能在人与AI交互的创建-修改-优化链路中落地。
论技术,AI总能提出一个更稳健更成熟的方案,虽然有时候会出错,但远比除懂技术的金字塔顶端之外的人要好。论速度,海报能在几十秒之内生成,代码能在几分钟内实现,建模能在几刻钟内构建,人工远比机器慢得多。AI只会去实现你想要实现的方案,因此,现在不再是谁的技术厉害则为王,在AI的支持下,新想法、新创意更加重要。
水了这么多,只是些我对近年来Ai发展的一些感想。说回正题,我的网站结构是以纯前端三件套的主页、Wordpress作为发图文的框架来实现的。在23年,我的那套UI可能还算跟得上时代,但在苹果更新IOS26之后,Liquid Glass渐渐成为各厂家之间美学“借鉴”的主要方案。我刚开始的想法是让AI仿照Liquid Glass来重新设计一下我的摄影站、以抽卡的形式给我重新设计一下KXIT.NET主页的UI。摄影站落地的效果也还不错,但是没有做到像真实的Liquid Glass那样有玻璃质感,在玻璃边缘有那种光学的变化,没有什么棱角我感觉相比抽卡得到的主页还是差点意思,所以我就弃用了仿照Liquid Glass的方案,让AI将UI统一成跟主页一样的【此处文字为AI生成:蓝金配色的极简科技风,带一点摄影杂志感。深蓝底色、金色星轨和缓慢环绕的卫星营造出宇宙氛围,大字号和留白则让个人主页显得安静、精致。】的风格,在站点之间跳转不会显得太突兀。(Liquid Glass的舍弃可能是我的审美没有跟上吧哈哈哈)
在实现过程中,我跟AI要求要蓝、金、黑、白四种配色,并丰富动画,要有设计感、高端感,生成出来的宇宙恒星确实令我感到挺惊喜的,GPT-6 Astra在这波审美没得说。但是总体的效果没有这么动态,我又陆续在后面让AI补了一些动效,比如首次进入网站的进场动效、行星的运动轨迹、背景的星点、卡片的缓入等等,才形成了现在的效果。

在实现KXIT.NET主页过程中,包括细节修改和上传服务器测试,总共花费了我不到20分钟的时间,相比我之前花费了差不多一周手搓的丑陋页面,真的感觉非常的自愧不如,跟AI比速度,是不自量力。让AI从0开始生成Html+CSS+JS,我感觉下来BUG几乎没有,UI没有什么很唐突的地方。但让AI修改一个现成的Wordpress主题UI,就显得有点吃力了:我让他生成的第一版,还是有很多旧UI的遗留,差不多修改了5版,效果就比较完美了。在现在这个阶段,遇到比较复杂的情形,AI还是会会有遗忘和偷懒,但在简单工程上,AI的完成度十分之高。
按照现在的发展速度,完善长上下文、复杂工程与逻辑推理只是时间问题,AI跳脱出机器实现具身智能也指日可待。AI被发明到完善,最好的愿景就是成为协助人类的得力智能工具,接管的是繁琐复杂的工程实现过程,替代的是凶险致命的高危职业,协助的是关怀之至的人生陪护,减少的是繁琐复杂的工作任务。而不是因为有AI的效率提升,让一个人干之前两个人的活、因为有了AI的协助,让更多的人丢掉养家的饭碗。初衷是好的,但事在人为,该怎么去应用AI以及往后的生产生活方式如何发展,是我们值得深入思考的问题。
说了这么多,我还是希望大家可以进网站看一下AI的效果吧:KXIT.NET-主页 LOOKPX.COM-摄影作品站
如果你也想获得同款的效果,不妨试一下下面的提示词:
把方括号里的内容换成你的项目,就可以直接用这段提示词:
请直接为「[项目名称]」设计并实现一个可运行的[网站 / 应用界面]。它面向[目标用户],核心功能是[主要功能],希望用户进入后首先[首要操作]。
整体采用蓝金配色的极简科技风,排版参考摄影杂志。想要的气质是安静、精致、有空间感,动效缓慢流畅。
视觉上,以午夜蓝 #080E1B 和近黑色打底,用深蓝 #123E8B 建立层次。标题用白色,辅助文字用蓝灰色,香槟金 #CCB585 只点亮主按钮、关键状态和少量细线。长文或高密度信息区可切换为暖白底,让阅读更轻松。
布局上,桌面首屏采用不对称双栏:左侧放一句简短有力的中文大标题、一段说明和一个主按钮,右侧放与项目主题相关的动态主视觉。可以参考“深蓝星球+金色椭圆轨道+缓慢公转的光点”,也可以换成更贴合项目的主体。后续内容沿统一网格对齐,通过字号、留白和细线区分层次。
交互上,展示型首页可以用约 2 秒的可跳过开场,让品牌标识浮现后进入页面。主要内容滚动进入视野时轻微淡入,按钮悬停时用金色高亮。工具或后台页面直接显示工作区,让动效服务于操作反馈。
移动端请重新编排:优先显示标题和主操作,将主视觉缩小或移到下方;导航可折叠,页脚链接分组对齐。适配“减少动态效果”偏好,并检查窄屏下的可读性、点击区域和横向溢出。